В этой статье дается четкое представление о точных шагах работы AJAX.
Шаги операции AJAX
- Событие клиента происходит.
- Создается объект XMLHttpRequest.
- Объект XMLHttpRequest настроен.
- Объект XMLHttpRequest делает асинхронный запрос на веб-сервер.
- Webserver возвращает результат, содержащий XML-документ.
- Объект XMLHttpRequest вызывает функцию callback() и обрабатывает результат.
- Обновлен HTML DOM.
Давайте сделаем эти шаги один за другим.
Происходит событие клиента
- Функция JavaScript вызывается как результат события.
- Пример: validateUserId () Функция JavaScript отображается как обработчик события для события onkeyup в поле формы ввода, идентификатор которого установлен на «userid»,
<Input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId ();">.
Создание объекта XMLHttpRequest
var ajaxRequest; // The variable that makes Ajax possible!
function ajaxFunction(){
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
}
Настройка XMLHttpRequest
На этом этапе мы напишем функцию, которая будет инициироваться клиентским событием, и будет обработана функция обратного вызова processRequest().
function validateUserId() {
ajaxFunction();
// Here processRequest() is the callback function.
ajaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
Создание асинхронного запроса на веб-сервер
Исходный код доступен в приведенном выше фрагменте кода. Код, написанный после if (!target) target , отвечает за запрос на веб-сервер. Все это делается с использованием объекта XMLHttpRequest ajaxRequest.
function validateUserId() {
ajaxFunction();
// Here processRequest() is the callback function.
ajaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
Предположим, что вы вводите Zara в поле userid, а затем в вышеуказанном запросе URL-адрес установлен на «validate? Id = Zara».
Webserver возвращает результат, содержащий XML-документ
Вы можете реализовать свой серверный скрипт на любом языке, однако его логика должна быть следующей.
- Получить запрос от клиента.
- Разбор ввода с клиента.
- Требуется обработка.
- Отправьте результат клиенту.
Если мы предположим, что вы собираетесь писать сервлет, то вот фрагмент кода.
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException
{
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim()))
{
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("true");
}
else
{
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("false");
}
}
Обратный вызов Функция processRequest()
Объект XMLHttpRequest был сконфигурирован , чтобы вызвать функцию ProcessRequest() , когда есть изменение состояния к readyState от XMLHttpRequest объекта. Теперь эта функция получит результат от сервера и выполнит требуемую обработку. Как и в следующем примере, он устанавливает переменное сообщение на true или false на основе возвращаемого значения с Web-сервера.
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
...
}
Обновление HTML и DOM
Это последний шаг, и на этом этапе ваша HTML-страница будет обновлена. Это происходит следующим образом:
- JavaScript получает ссылку на любой элемент страницы с использованием DOM API.
- Рекомендуемым способом получения ссылки на элемент является вызов.
document.getElementById("userIdMessage"),
// where "userIdMessage" is the ID attribute
// of an element appearing in the HTML document
JavaScript теперь может использоваться для изменения атрибутов элемента; изменить свойства стиля элемента; или добавлять, удалять или изменять дочерние элементы. Вот пример:
<script type="text/javascript">
<!--
function setMessageUsingDOM(message) {
var userMessageElement = document.getElementById("userIdMessage");
var messageText;
if (message == "false") {
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
}
else
{
userMessageElement.style.color = "green";
messageText = "Valid User Id";
}
var messageBody = document.createTextNode(messageText);
// if the messageBody element has been created simple
// replace it otherwise append the new element
if (userMessageElement.childNodes[0]) {
userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
}
else
{
userMessageElement.appendChild(messageBody);
}
}
-->
</script>
<body>
<div id="userIdMessage"><div>
</body>
Если вы поняли вышеупомянутые семь шагов, то вы почти закончили с AJAX. В следующих статьях вы рассмотрите объект XMLHttpRequest более подробно.
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
