МИНОБРНАУКИ РОССИИ САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ ЭЛЕКТРОТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ «ЛЭТИ» ИМ. В.И. УЛЬЯНОВА (ЛЕНИНА) Кафедра ВТ
ОТЧЕТ по лабораторной работе №6
по дисциплине «Распределенные системы и сети» Тема: AJAX
Студентка гр. 8308 |
|
Довженко А.Е. |
|
Преподаватель |
|
Бекенева Я.А. |
|
|
|||
|
|
|
|
Санкт-Петербург, 2022
Цель работы
Знакомство со способами работы AJAX.
Задание к лабораторной работе
Написать веб-приложение, поддерживающее автодополнение c
использованием AJAX.
Результат выполнения лабораторной работы
В результате выполнения лабораторной работы было сформировано две jsp-страницы: index.jsp (приложение А) и response.jsp (приложение Б).
Первая jsp-страница содержит форму для ввода цвета и функцию,
осуществляющую ajax-запрос. В этой функции содержится переменная name,
которой присваивается значение тега name. Затем в аргумент функции ajax
записывается адрес страницы response.jsp с переданным динамическим параметром name. Далее вызывается функция done, если запрос к странице response.jsp успешно отправлен, и в качестве её параметра передается пользовательская функция, в которой в тег h2 записывается всё содержимое страницы response.jsp. Таким образом страница index.jsp автодополняется без полноценной перезагрузки.
Вторая jsp-страница получает динамический параметр name и формирует данные, содержащие параметры, полученные от index.jsp.
2
Иллюстрация работы Web-приложения
Результат работы созданного Web-приложения представлен на рис. 3-6.
Рис 1. Начальная страница index.jsp
Рис 2. Страница index.jsp после обновления данных
3
Рис 3. Страница index.jsp после повторного обновления данных
Вывод
В результате выполнения лабораторной работы ознакомилась со
способами работы AJAX.
Было создано приложение, поддерживающее автодополнение c
использованием AJAX.
4
Приложение А: index.jsp
<%--
Document |
: |
index |
Author |
: |
amber |
--%>
<%@ page contentType="text/html; charset=UTF-8" language="java" %> <!DOCTYPE html>
<html>
<head> <title>Цвет</title>
</head>
<body>
<h1>Введите HTML-код цвета</h1> <ul>
<li>
<label for='name'>Цвет:</label>
</br><input type='text' id='name' name='user_name'> </li>
<li class='button'>
<button id="submit">Ввод</button> </li>
</ul>
<h2>
</h2>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script> <script>
$("#submit").click(function () { name = $("#name").val();
$.ajax("response.jsp?name="+name)
.done(function (data) { $("h2").html(data);
});
}); </script>
</body>
</html>
5
Приложение Б: response.jsp
<%--
Document |
: |
response |
Author |
: |
amber |
--%>
<%@ page contentType="text/html; charset=UTF-8" language="java" %> <%
String name = request.getParameter("name");
%>
<text style=color:<%=name%>>
<span>Этот текст соответствует цвету <%= name %></span> </text>
6