В этой статье дается четкое представление о точных шагах работы 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 более подробно.


Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok