AJAX - Действие

Эта глава дает вам четкое представление о точных этапах работы AJAX.

Этапы работы с AJAX

• Происходит клиентское событие.
• Создается объект XMLHttpRequest.
• Объект XMLHttpRequest настроен.
• Объект XMLHttpRequest выполняет асинхронный запрос к веб-серверу.
• Веб-сервер возвращает результат, содержащий XML-документ.
• Объект XMLHttpRequest вызывает функцию callback () и обрабатывает результат.
• HTML DOM обновлен.

Давайте предпримем эти шаги один за другим.

Клиентское событие происходит

• Функция JavaScript вызывается в результате события.

• Пример - функция JavaScript validateUserId () отображается как обработчик события на событие onkeyup в поле формы ввода, для идентификатора которого задано значение «идентификатор пользователя».

• <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);
}

Выполнение асинхронного запроса к веб-серверу

Исходный код доступен в приведенном выше фрагменте кода. Код, написанный жирным шрифтом, отвечает за отправку запроса на веб-сервер. Все это делается с помощью объекта 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 в поле идентификатора пользователя, а затем в приведенном выше запросе URL-адрес установлен на «validate? Id = Zara».

Веб-сервер возвращает результат, содержащий 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("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

Вызывается функция обратного вызова processRequest ()

XMLHttpRequest объект был сконфигурирован для вызова функции ProcessRequest () , когда происходит изменение состояния на readyState от XMLHttpRequest объекта. Теперь эта функция получит результат от сервера и выполнит необходимую обработку. Как и в следующем примере, он устанавливает для переменной message значение true или false в зависимости от значения, возвращаемого веб-сервером.

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 более подробно.