AJAX - Guía rápida

AJAX significa Asincrónico JavaScript y XML. AJAX es una nueva técnica para crear aplicaciones web mejores, más rápidas y más interactivas con la ayuda de XML, HTML, CSS y Java Script.

  • Ajax utiliza XHTML para contenido, CSS para presentación, junto con Document Object Model y JavaScript para visualización de contenido dinámico.

  • Las aplicaciones web convencionales transmiten información hacia y desde el servidor mediante solicitudes sincrónicas. Significa que llenas un formulario, presionas enviar y te dirigen a una nueva página con nueva información del servidor.

  • Con AJAX, cuando presiona enviar, JavaScript hará una solicitud al servidor, interpretará los resultados y actualizará la pantalla actual. En el sentido más puro, el usuario nunca sabría que se ha transmitido algo al servidor.

  • XML se usa comúnmente como formato para recibir datos del servidor, aunque se puede usar cualquier formato, incluido el texto sin formato.

  • AJAX es una tecnología de navegador web independiente del software del servidor web.

  • Un usuario puede seguir utilizando la aplicación mientras el programa cliente solicita información del servidor en segundo plano.

  • Interacción del usuario intuitiva y natural. No es necesario hacer clic, el movimiento del mouse es un activador de eventos suficiente.

  • Basado en datos en lugar de impulsado por páginas.

Tecnología de aplicaciones de Internet enriquecida

AJAX es la tecnología de aplicación de Internet enriquecida (RIA) más viable hasta ahora. Está obteniendo un tremendo impulso en la industria y están surgiendo varios conjuntos de herramientas y marcos. Pero al mismo tiempo, AJAX tiene incompatibilidad de navegador y es compatible con JavaScript, que es difícil de mantener y depurar.

AJAX se basa en estándares abiertos

AJAX se basa en los siguientes estándares abiertos:

  • Presentación basada en navegador usando HTML y hojas de estilo en cascada (CSS).
  • Los datos se almacenan en formato XML y se obtienen del servidor.
  • Recuperaciones de datos entre bastidores mediante objetos XMLHttpRequest en el navegador.
  • JavaScript para que todo suceda.

AJAX no puede funcionar de forma independiente. Se utiliza en combinación con otras tecnologías para crear páginas web interactivas.

JavaScript

  • Lenguaje de scripting poco escrito.
  • La función JavaScript se llama cuando ocurre un evento en una página.
  • Pegamento para toda la operación AJAX.

DOM

  • API para acceder y manipular documentos estructurados.
  • Representa la estructura de documentos XML y HTML.

CSS

  • Permite una clara separación del estilo de presentación del contenido y se puede cambiar mediante programación mediante JavaScript.

XMLHttpRequest

  • Objeto JavaScript que realiza interacción asincrónica con el servidor.

Aquí hay una lista de algunas aplicaciones web famosas que utilizan AJAX.

mapas de Google

Un usuario puede arrastrar un mapa completo usando el mouse, en lugar de hacer clic en un botón.

Sugerencia de Google

A medida que escribe, Google ofrece sugerencias. Utilice las teclas de flecha para navegar por los resultados.

Gmail

Gmail es un correo web basado en la idea de que los correos electrónicos pueden ser más intuitivos, eficientes y útiles.

Yahoo Maps (nuevo)

¡Ahora es aún más fácil y divertido llegar a su destino!

Diferencia entre AJAX y el programa CGI convencional

Pruebe estos dos ejemplos uno por uno y notará la diferencia. Al probar el ejemplo de AJAX, no hay discontinuidad y obtiene la respuesta muy rápidamente, pero cuando prueba el ejemplo estándar de GCI, tendría que esperar la respuesta y su página también se actualiza.

Ejemplo de AJAX

Ejemplo estándar

NOTE- Hemos dado un ejemplo más complejo en la base de datos AJAX .

Todos los navegadores disponibles no pueden admitir AJAX. Aquí hay una lista de los principales navegadores que admiten AJAX.

  • Mozilla Firefox 1.0 y superior.
  • Netscape versión 7.1 y superior.
  • Apple Safari 1.2 y superior.
  • Microsoft Internet Explorer 5 y superior.
  • Konqueror.
  • Opera 7.6 y superior.

Cuando escriba su próxima aplicación, considere los navegadores que no son compatibles con AJAX.

NOTE - Cuando decimos que un navegador no admite AJAX, simplemente significa que el navegador no admite la creación de un objeto Javascript - XMLHttpRequest object.

Escribir código específico del navegador

La forma más sencilla de hacer que su código fuente sea compatible con un navegador es usar bloques try ... catch en su JavaScript.

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!

            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;
                  }
               }
            }
         }
         //-->
      </script>
      
      <form name = 'myForm'>
         Name: <input type = 'text' name = 'username' /> <br />
         Time: <input type = 'text' name = 'time' />
      </form>
      
   </body>
</html>

En el código JavaScript anterior, intentamos tres veces hacer nuestro objeto XMLHttpRequest. Nuestro primer intento -

  • ajaxRequest = new XMLHttpRequest ();

Es para los navegadores Opera 8.0+, Firefox y Safari. Si falla, intentamos dos veces más para crear el objeto correcto para un navegador Internet Explorer con -

  • ajaxRequest = new ActiveXObject ("Msxml2.XMLHTTP");
  • ajaxRequest = nuevo ActiveXObject ("Microsoft.XMLHTTP");

Si no funciona, entonces podemos usar un navegador muy desactualizado que no es compatible con XMLHttpRequest, lo que también significa que no es compatible con AJAX.

Sin embargo, lo más probable es que nuestra variable ajaxRequest ahora se establezca en cualquier estándar XMLHttpRequest que use el navegador y podamos comenzar a enviar datos al servidor. El flujo de trabajo AJAX paso a paso se explica en el siguiente capítulo.

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.

El objeto XMLHttpRequest es la clave de AJAX. Ha estado disponible desde que se lanzó Internet Explorer 5.5 en julio de 2000, pero no se descubrió por completo hasta que AJAX y Web 2.0 en 2005 se hicieron populares.

XMLHttpRequest (XHR) es una API que puede ser utilizada por JavaScript, JScript, VBScript y otros lenguajes de scripting del navegador web para transferir y manipular datos XML hacia y desde un servidor web usando HTTP, estableciendo un canal de conexión independiente entre el lado del cliente y Lado del servidor.

Los datos devueltos por las llamadas XMLHttpRequest a menudo serán proporcionados por bases de datos back-end. Además de XML, XMLHttpRequest se puede utilizar para recuperar datos en otros formatos, por ejemplo, JSON o incluso texto sin formato.

Ya ha visto un par de ejemplos sobre cómo crear un objeto XMLHttpRequest.

A continuación se enumeran algunos de los métodos y propiedades con los que debe familiarizarse.

Métodos XMLHttpRequest

  • abort()

    Cancela la solicitud actual.

  • getAllResponseHeaders()

    Devuelve el conjunto completo de encabezados HTTP como una cadena.

  • getResponseHeader( headerName )

    Devuelve el valor del encabezado HTTP especificado.

  • open( method, URL )

  • open( method, URL, async )

  • open( method, URL, async, userName )

  • open( method, URL, async, userName, password )

    Especifica el método, la URL y otros atributos opcionales de una solicitud.

    El parámetro del método puede tener un valor de "GET", "POST" o "HEAD". Es posible que sean posibles otros métodos HTTP como "PUT" y "DELETE" (utilizados principalmente en aplicaciones REST).

    El parámetro "async" especifica si la solicitud debe manejarse de forma asincrónica o no. "verdadero" significa que el procesamiento del script continúa después del método send () sin esperar una respuesta, y "falso" significa que el script espera una respuesta antes de continuar con el procesamiento del script.

  • send( content )

    Envía la solicitud.

  • setRequestHeader( label, value )

    Agrega un par de etiqueta / valor al encabezado HTTP que se enviará.

Propiedades de XMLHttpRequest

  • onreadystatechange

    Un controlador de eventos para un evento que se activa en cada cambio de estado.

  • readyState

    La propiedad readyState define el estado actual del objeto XMLHttpRequest.

    La siguiente tabla proporciona una lista de los posibles valores para la propiedad readyState:

Estado Descripción
0 La solicitud no se inicializa.
1 Se ha configurado la solicitud.
2 La solicitud ha sido enviada.
3 La solicitud está en proceso.
4 La solicitud está completa.

readyState = 0 Después de haber creado el objeto XMLHttpRequest, pero antes de haber llamado al método open ().

readyState = 1 Después de haber llamado al método open (), pero antes de haber llamado a send ().

readyState = 2 Después de haber llamado a send ().

readyState = 3 Después de que el navegador haya establecido una comunicación con el servidor, pero antes de que el servidor haya completado la respuesta.

readyState = 4 Una vez que se haya completado la solicitud y los datos de respuesta se hayan recibido completamente del servidor.

  • responseText

    Devuelve la respuesta como una cadena.

  • responseXML

    Devuelve la respuesta como XML. Esta propiedad devuelve un objeto de documento XML, que puede examinarse y analizarse mediante los métodos y propiedades del árbol de nodos DOM de W3C.

  • status

    Devuelve el estado como un número (por ejemplo, 404 para "No encontrado" y 200 para "Aceptar").

  • statusText

    Devuelve el estado como una cadena (por ejemplo, "No encontrado" o "OK").

Para ilustrar claramente lo fácil que es acceder a la información de una base de datos usando AJAX, vamos a construir consultas MySQL sobre la marcha y mostrar los resultados en "ajax.html". Pero antes de continuar, hagamos el trabajo de base. Crea una tabla usando el siguiente comando.

NOTE - Suponemos que tiene privilegios suficientes para realizar las siguientes operaciones de MySQL.

CREATE TABLE 'ajax_example' (
   'name' varchar(50) NOT NULL,
   'age' int(11) NOT NULL,
   'sex' varchar(1) NOT NULL,
   'wpm' int(11) NOT NULL,
   PRIMARY KEY  ('name')
)

Ahora descargue los siguientes datos en esta tabla utilizando las siguientes declaraciones SQL:

INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);

Archivo HTML del lado del cliente

Ahora tengamos nuestro archivo HTML del lado del cliente, que es ajax.html, y tendrá el siguiente código:

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!
            
            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;
                  }
               }
            }
            
            // Create a function that will receive data
            // sent from the server and will update
            // div section in the same page.
            ajaxRequest.onreadystatechange = function() {
            
               if(ajaxRequest.readyState == 4) {
                  var ajaxDisplay = document.getElementById('ajaxDiv');
                  ajaxDisplay.innerHTML = ajaxRequest.responseText;
               }
            }
            
            // Now get the value from user and pass it to
            // server script.
            var age = document.getElementById('age').value;
            var wpm = document.getElementById('wpm').value;
            var sex = document.getElementById('sex').value;
            var queryString = "?age = " + age ;
            
            queryString +=  "&wpm = " + wpm + "&sex = " + sex;
            ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
            ajaxRequest.send(null); 
         }
         //-->
      </script>

      <form name = 'myForm'>
         Max Age: <input type = 'text' id = 'age' /> <br />
         Max WPM: <input type = 'text' id = 'wpm' /> <br />
         Sex: 
         
         <select id = 'sex'>
            <option value = "m">m</option>
            <option value = "f">f</option>
         </select>
         
         <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
      </form>
      
      <div id = 'ajaxDiv'>Your result will display here</div>
   </body>
</html>

NOTE - La forma de pasar variables en la consulta es según el estándar HTTP y tienen formA.

URL?variable1 = value1;&variable2 = value2;

El código anterior le dará una pantalla como se muestra a continuación:

Su resultado se mostrará aquí en esta sección después de que haya realizado su entrada.

NOTE - Esta es una pantalla ficticia.

Archivo PHP del lado del servidor

Su script del lado del cliente está listo. Ahora, tenemos que escribir nuestro script del lado del servidor, que obtendrá la edad, las palabras por minuto y el sexo de la base de datos y lo enviará de vuelta al cliente. Coloque el siguiente código en el archivo "ajax-example.php".

<?php
$dbhost = "localhost"; $dbuser = "dbusername";
$dbpass = "dbpassword"; $dbname = "dbname";
	
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error());
	
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
	
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
	
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";

if(is_numeric($age)) $query .= " AND age <= $age"; if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
	
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());

//Build Result String
$display_string = "<table>"; $display_string .= "<tr>";
$display_string .= "<th>Name</th>"; $display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>"; $display_string .= "<th>WPM</th>";
$display_string .= "</tr>"; // Insert a new row in the table for each person returned while($row = mysql_fetch_array($qry_result)) { $display_string .= "<tr>";
   $display_string .= "<td>$row[name]</td>";
   $display_string .= "<td>$row[age]</td>";
   $display_string .= "<td>$row[sex]</td>";
   $display_string .= "<td>$row[wpm]</td>";
   $display_string .= "</tr>"; } echo "Query: " . $query . "<br />";
$display_string .= "</table>"; echo $display_string;
?>

Ahora intente ingresando un valor válido (por ejemplo, 120) en Max Age o en cualquier otro cuadro y luego haga clic en el botón Consultar MySQL.

Su resultado se mostrará aquí en esta sección después de que haya realizado su entrada.

Si ha completado con éxito esta lección, entonces sabrá cómo usar MySQL, PHP, HTML y Javascript en conjunto para escribir aplicaciones AJAX.

Seguridad AJAX: lado del servidor

  • Las aplicaciones web basadas en AJAX utilizan los mismos esquemas de seguridad del lado del servidor que las aplicaciones web normales.

  • Usted especifica los requisitos de autenticación, autorización y protección de datos en su archivo web.xml (declarativo) o en su programa (programático).

  • Las aplicaciones web basadas en AJAX están sujetas a las mismas amenazas de seguridad que las aplicaciones web normales.

Seguridad AJAX: lado del cliente

  • El código JavaScript es visible para un usuario / pirata informático. El hacker puede usar código JavaScript para inferir debilidades del lado del servidor.

  • El código JavaScript se descarga del servidor y se ejecuta ("eval") en el cliente y puede comprometer al cliente mediante un código mal intencionado.

  • El código JavaScript descargado está restringido por el modelo de seguridad de la caja de arena y se puede relajar para JavaScript firmado.

AJAX está creciendo muy rápido y esa es la razón por la que contiene muchos problemas. Esperamos que con el paso del tiempo se vayan resolviendo y AJAX se convierta en el ideal para aplicaciones web. Enumeramos algunos problemas que AJAX padece actualmente.

Complexity is increased

  • Los desarrolladores del lado del servidor deberán comprender que la lógica de presentación será necesaria en las páginas del cliente HTML, así como en la lógica del lado del servidor.

  • Los desarrolladores de páginas deben tener conocimientos de tecnología JavaScript.

AJAX-based applications can be difficult to debug, test, and maintain

  • JavaScript es difícil de probar, las pruebas automáticas son difíciles.
  • Débil modularidad en JavaScript.
  • Falta todavía de patrones de diseño o pautas de mejores prácticas.

Toolkits/Frameworks are not mature yet

  • La mayoría de ellos se encuentran en fase beta.

No standardization of the XMLHttpRequest yet

  • La versión futura de IE abordará esto.

No support of XMLHttpRequest in old browsers

  • Iframe ayudará.

JavaScript technology dependency and incompatibility

  • Debe estar habilitado para que funcionen las aplicaciones.
  • Aún existen algunas incompatibilidades de navegador.

JavaScript code is visible to a hacker

  • El código JavaScript mal diseñado puede provocar problemas de seguridad.