AJAX - Acción

Este capítulo le brinda una imagen clara de los pasos exactos del funcionamiento de AJAX.

Pasos de la operación AJAX

Ocurre un evento de cliente.
Se crea un objeto XMLHttpRequest.
El objeto XMLHttpRequest está configurado.
El objeto XMLHttpRequest realiza una solicitud asincrónica al servidor web.
El servidor web devuelve el resultado que contiene el documento XML.
El objeto XMLHttpRequest llama a la función callback () y procesa el resultado.
El DOM HTML se actualiza.

Tomemos estos pasos uno por uno.

Ocurre un evento de cliente

Se llama a una función de JavaScript como resultado de un evento.
Ejemplo: la función de JavaScript validateUserId () se asigna como un controlador de eventos a un evento onkeyup en el campo de formulario de entrada cuya identificación se establece en "userid"
<input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId ();">.

Se crea el objeto 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;
         }
      }
   }
}

El objeto XMLHttpRequest está configurado

En este paso, escribiremos una función que será activada por el evento del cliente y se registrará una función de devolución de llamada 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);
}

Realización de solicitudes asincrónicas al servidor web

El código fuente está disponible en el código anterior. El código escrito en negrita es responsable de realizar una solicitud al servidor web. Todo esto se hace utilizando el 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);
}

Suponga que ingresa Zara en el cuadro de ID de usuario, luego, en la solicitud anterior, la URL se establece en "validate? Id = Zara".

El servidor web devuelve el resultado que contiene el documento XML

Puede implementar su script del lado del servidor en cualquier idioma, sin embargo, su lógica debería ser la siguiente.

Obtenga una solicitud del cliente.
Analice la entrada del cliente.
Realice el procesamiento requerido.
Envíe la salida al cliente.

Si asumimos que va a escribir un servlet, aquí está el fragmento de 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>");
   }
}

Se llama a la función de devolución de llamada processRequest ()

El objeto XMLHttpRequest se configuró para llamar a la función processRequest () cuando hay un cambio de estado en readyState del objeto XMLHttpRequest . Ahora esta función recibirá el resultado del servidor y realizará el procesamiento requerido. Como en el siguiente ejemplo, establece un mensaje de variable en verdadero o falso en función del valor devuelto por el servidor web.

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

El DOM HTML está actualizado

Este es el paso final y en este paso, se actualizará su página HTML. Sucede de la siguiente manera:

JavaScript obtiene una referencia a cualquier elemento en una página usando DOM API.
La forma recomendada de obtener una referencia a un elemento es llamar.

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

Ahora se puede usar JavaScript para modificar los atributos del elemento; modificar las propiedades de estilo del elemento; o agregar, eliminar o modificar los elementos secundarios. Aquí hay un ejemplo:

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

Si ha entendido los siete pasos mencionados anteriormente, casi ha terminado con AJAX. En el próximo capítulo, veremos el objeto XMLHttpRequest con más detalle.

↰ Previous page Next page ↱