AJAX - Ação

Este capítulo fornece uma imagem clara das etapas exatas da operação AJAX.

Etapas da operação AJAX

Ocorre um evento de cliente.
Um objeto XMLHttpRequest é criado.
O objeto XMLHttpRequest está configurado.
O objeto XMLHttpRequest faz uma solicitação assíncrona ao servidor da Web.
O servidor da Web retorna o resultado contendo o documento XML.
O objeto XMLHttpRequest chama a função callback () e processa o resultado.
O HTML DOM é atualizado.

Vamos seguir esses passos um por um.

Um evento de cliente ocorre

Uma função JavaScript é chamada como resultado de um evento.
Exemplo - a função JavaScript validateUserId () é mapeada como um manipulador de eventos para um evento onkeyup no campo de formulário de entrada cujo id é definido como "userid"
<input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId ();">.

O objeto XMLHttpRequest é criado

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

O objeto XMLHttpRequest está configurado

Nesta etapa, escreveremos uma função que será disparada pelo evento do cliente e uma função de callback processRequest () será registrada.

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

Fazendo solicitação assíncrona ao servidor da Web

O código-fonte está disponível no trecho de código acima. O código escrito em negrito é responsável por fazer uma solicitação ao servidor da web. Tudo isso está sendo feito usando o objeto 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);
}

Suponha que você insira Zara na caixa de ID do usuário e, na solicitação acima, a URL seja definida como "validate? Id = Zara".

O servidor da Web retorna o resultado contendo o documento XML

Você pode implementar seu script do lado do servidor em qualquer linguagem, porém sua lógica deve ser a seguinte.

Obtenha uma solicitação do cliente.
Analise a entrada do cliente.
Faça o processamento necessário.
Envie a saída para o cliente.

Se presumirmos que você vai escrever um servlet, aqui está o trecho do código.

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

Função de retorno de chamada processRequest () é chamada

O objeto XMLHttpRequest foi configurado para chamar a função processRequest () quando houver uma mudança de estado para o readyState do objeto XMLHttpRequest . Agora esta função receberá o resultado do servidor e fará o processamento necessário. Como no exemplo a seguir, ele define uma mensagem variável como verdadeira ou falsa com base no valor retornado do servidor da Web.

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

O HTML DOM é atualizado

Esta é a etapa final e nesta etapa, sua página HTML será atualizada. Acontece da seguinte maneira -

JavaScript obtém uma referência a qualquer elemento em uma página usando a API DOM.
A maneira recomendada de obter uma referência a um elemento é chamar.

document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document

JavaScript agora pode ser usado para modificar os atributos do elemento; modificar as propriedades de estilo do elemento; ou adicione, remova ou modifique os elementos filhos. Aqui está um exemplo -

<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>

Se você entendeu as sete etapas mencionadas acima, então está quase terminando com AJAX. No próximo capítulo, veremos o objeto XMLHttpRequest com mais detalhes.

↰ Previous page Next page ↱