МИНОБРНАУКИ РОССИИ САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ ЭЛЕКТРОТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ «ЛЭТИ» ИМ. В.И. УЛЬЯНОВА (ЛЕНИНА) Кафедра Вычислительной техники
ОТЧЕТ по лабораторным работам №6
по дисциплине «Распределённые системы» ТЕМА: AJAX
Студенты гр. 8308 |
|
Треско М.Ю. |
|
|
|
|
Сергеев В.С. |
Преподаватель |
|
|
Бекенева Я.А. |
Санкт-Петербург
2022
Цель работы
Изучение технологии AJAX.
Основные теоретические положения
AJAX - подход к построению интерактивных пользовательских интерфейсов вебприложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером.
Врезультате, при обновлении данных веб-страница не перезагружается полностью, и вебприложения работают быстрее.
Вклассической модели веб-приложения:
1.Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент;
2.Браузер формирует и отправляет запрос серверу;
3.В ответ сервер генерирует совершенно новую веб-страницу и отправляет её браузеру и т. д. После чего браузер полностью перегружает всю страницу.
При использовании AJAX:
1.Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент;
2.Скрипт (на языке JavaScript) определяет, какая информация необходима для обновления страницы;
3.Браузер отправляет соответствующий запрос на сервер;
4.Сервер возвращает только ту часть документа, на которую пришел запрос;
5.Скрипт вносит изменения с учётом полученной информации (без полной перезагрузки страницы).
Задание на лабораторную работу
Написать Web-приложение, поддерживающее автодополнение с использованием AJAX.
Выполнение работы
Исходный код:
List.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Lab6 Ajax</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script src="js/ajax.js" type="text/javascript"></script>
<script type="text/javascript"> $(function() {
var available_pics = [ "lake", "forest", "mountain", "ocean"
];
$('#pic').autocomplete({ source : available_pics
});
});
</script>
<link href="css/style.css" rel="stylesheet" type="text/css"> </head>
<body>
<center>
<br>
<form>
<label for="pic">Picture: </label> <input id="pic"> <!- -<button id="btn">ok</button>-->
<!--<button onclick="callJqueryAjax()">Submit</button>
-->
</form>
<br> <br> <br> <br> <br> <br> <br> <strong>Ajax Response</strong>:
<div id="ajaxPicture"></div>
<div id="ajaxGetServletResponse"></div> <center>
</body>
</html>
ajax.js:
$(document).ready(function() { $('#pic').change(function() {
$.ajax({
url : 'GetUserServlet', data : {
keyname:$('#pic').val()
},
success : function(responseText) { $('#ajaxPicture').html('<img src="images/' +
$('#pic').val() + '.jpg">');
$('#ajaxGetServletResponse').text(responseText);
}
});
});
});
GetUserServlet.java:
package lab;
import java.io.IOException; import java.util.Enumeration;
import javax.servlet.ServletException; import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.annotation.WebServlet;
/**
* Servlet implementation class MusicList */
@WebServlet("/GetUserServlet")
public class GetUserServlet extends HttpServlet { private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String pic = request.getParameter("keyname").trim(); if (pic != "") {
String path = "What a beatiful " + pic + "!"; response.setContentType("text/plain"); response.getWriter().write(path);
}
}
}
Скриншоты работы приложения:
Рисунок 1.Форма ввода с автодополнением
Рисунок 2. Страница, полученная вводе “ocean”
Рисунок 3.Форма ввода с автодополнением, начало слова forest
Рисунок 4. Страница, полученная вводе “forest”
Вывод
При выполнении лабораторной работы изучена и применена технология
Ajax.