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


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




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok