AJAX — Действие

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

Шаги работы AJAX

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

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

Происходит событие клиента

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

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

• <input type = «text» size = «20» id = «userid» name = «id» onkeyup = «validateUserId ();»>.

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

Пример — validateUserId () Функция JavaScript отображается в качестве обработчика события на событие 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 . Теперь эта функция получит результат от сервера и выполнит необходимую обработку. Как и в следующем примере, он устанавливает для сообщения переменной значение 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 можно использовать для изменения атрибутов элемента; изменить свойства стиля элемента; или добавить, удалить или изменить дочерние элементы. Вот пример —

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