Rafael Barzanallana. Universidad de Murcia    Informática, Ciencia, Escepticismo

Desarrollo de Aplicaciones Web.   
AJAX

AJAX significa Asynchronous JavaScript y XML. AJAX no es un nuevo lenguaje de programación, sino una nueva forma de utilizar las normas existentes. Es el "arte" de intercambiar datos con el servidor y actualizar partes de una página web sin tener que recargar toda la página.

Antes de continuar, debes tener un conocimiento básico de lo siguiente:

- HTML / XHTML
- CSS
- JavaScript / DOM

Si quieres estudiar estos temas previamente, encontrarás documentación desde la página de inicio de la asignatura

AJAX es una técnica para la creación de páginas web de forma rápida y dinámica. Permite que las páginas web se actualicen de forma asincróna mediante el intercambio de pequeñas cantidades de datos con el servidor en segundo plano. Esto significa que es posible actualizar partes de una página web, sin volver a cargar la página entera. Una páginas web clásica (que no utiliza AJAX) debe volver a cargar toda la página si ha de cambiarse el contenido. Las aplicaciones AJAX son independientes de la plataforma y navegador. Ejemplos de aplicaciones que utilizan AJAX: Google Maps, Gmail, Youtube, Facebook.

AJAX se hizo popular en 2005 por Google, con Google Suggest. Utiliza AJAX para crear una interfaz web muy dinámica: cuando se empieza a escribir en el cuadro de búsqueda de Google, una rutina en JavaScript envía lo escrito a un servidor y éste devuelve una lista de sugerencias.

AJAX se basa en estándares de internet, y utiliza una combinación de:

- Objeto XMLHttpRequest (para intercambiar datos de forma asíncrona con el servidor)
- JavaScript / DOM (para mostrar / interactuar con la información)
- CSS (estilo de los datos)
- XML (utilizado a menudo como el formato de transferencia de datos)

Ejemplo sencillo

Para entender cómo funciona AJAX, vamos a crear una pequeña aplicación AJAX:

La aplicación AJAX de ejemplo contiene una sección div y un button.

La sección div se utiliza para mostrar información devuelta desde un servidor. button llama a una función denominada loadXMLDoc (), si es pulsada:

<!DOCTYPE html>
<html>
<body>

<div id="myDiv"><h2>AJAX cambia este texto</h2></div>
<button type="button" onclick="loadXMLDoc()">Cambia contenido</button>

</body>
</html>

A continuación, agrega una etiqueta <script> a la sección head de la página. La sección script contiene la función loadXMLDoc ():

<head>
<script>
function loadXMLDoc()
{
.... AJAX script aquí ...
}
</script>
</head>

El programa completo se muestra a continuación (Accede l fichero ajax_info.txt para mostrar un texto):

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// para IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// para IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>AJAX cambia este texto</h2></div>
<button type="button" onclick="loadXMLDoc()">Cambia contenido</button>

</body>
</html>

Ejemplo ejecutable

El Objeto XMLHttpRequest

La piedra angular de AJAX es el objeto XMLHttpRequest. Todos los navegadores modernos soportan el objeto XMLHttpRequest (IE5 y IE6 utilizan un ActiveXObject).

El objeto XMLHttpRequest se utiliza para intercambiar datos con el servidor en segundo plano. Esto significa que es posible actualizar partes de una página web, sin volver a cargar la página entera.

- Crear un objeto XMLHttpRequest

Todos los navegadores modernos (Internet Explorer 7 +, Firefox, Chrome, Safari y Opera) tienen un objeto XMLHttpRequest incorporado.

Sintaxis para crear un objeto XMLHttpRequest:

variable = new XMLHttpRequest ();

Las versiones antiguas de Internet Explorer (IE5 y IE6) utilizan un objeto ActiveX:

variable = new ActiveXObject ("Microsoft.XMLHTTP");

Para hacer frente a todos los navegadores modernos, incluyendo IE5 y IE6, se ha de comprobar si el navegador es compatible con el objeto XMLHttpRequest. Si es así, crear un objeto XMLHttpRequest, si no, crear un ActiveXObject:

var xmlhttp;
if (window.XMLHttpRequest)
  {// código para IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// código para IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

Enviar una solicitud a un servidor

Para enviar una solicitud a un servidor, se utilizan los métodos open () y send () del objeto XMLHttpRequest:

Xmlhttp.open ("GET", "ajax_info.txt", true);
xmlhttp.send ();

Método Descripción
open (method, URL, async) send(cadena)
method: el tipo de petición: GET o POST
url: la ubicación del archivo en el servidor
async: true (asíncrono) o falso (sincrono)
Envía la solicitud de apagado al servidor.
send Sólo se utiliza para peticiones POST

¿GET o POST?

GET es más simple y más rápido que POST, y se puede utilizar en la mayoría de los casos.

Sin embargo, siempre se han de usar las peticiones POST cuando:

- Un archivo de caché no es una opción (actualizar un archivo o base de datos en el servidor)
- Envío de una gran cantidad de datos en el servidor (POST no tiene limitaciones de tamaño)
- Envío de una entrada del usuario (que puede contener caracteres desconocidos), POST es más robusto y seguro que GET

- Peticiones GET

Una petición GET simple:

Ejemplo
Xmlhttp.open ("GET", "demo_get.asp", true);
xmlhttp.send ();
Seguidamente se muestra un ejemplo

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// código para IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// código para IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Petición datos</button>
<div id="myDiv"></div>

</body>
</html>

En el ejemplo anterior, puedes conseguir un resultado en caché.

Para evitar esto, agrega un identificador único a la URL:

Ejemplo:
Xmlhttp.open ("GET", "demo_get.asp t =?" + Math.random (), true);
xmlhttp.send ();
Si se desea enviar información con el método GET, añadir la información a la dirección URL:

Ejemplo:
Xmlhttp.open ("GET", "demo_get2.asp fname = Henry & lname = Ford?", true);
xmlhttp.send ();

- Peticiones POST

Petición POST simple:

Ejemplo:
Xmlhttp.open ("POST", "demo_post.asp", true);
xmlhttp.send ();

Accede para probarlo

Para enviar datos como un formulario HTML, añade una cabecera HTTP con setRequestHeader (). Especifica los datos que deseas enviar en el método send ():

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

Accede para probarlo

Método Descripción
setRequestHeader (header, value) Añade cabeceras HTTP a la petición.
header: especifica el nombre de la cabecera
value: Especifica el valor del encabezado


url - Un archivo en el servidor

El parámetro url del método open (), es una dirección a un archivo en un servidor:
Xmlhttp.open ("GET", "ajax_test.asp", true);
El archivo puede ser cualquier tipo de archivo, como .txt y .xml o archivos del servidor de secuencias de comandos como.asp y .php (que pueden llevar a cabo acciones en el servidor antes de enviar la respuesta de vuelta).

Asíncrono - ¿Verdadero o Falso?

AJAX significa Asynchronous JavaScript and XML, y para que el objeto XMLHttpRequest se comporte como AJAX, el parámetro asíncrono del método open () se debe establecer como true:
Xmlhttp.open ("GET", "ajax_test.asp", true);

El envío de peticiones asíncronas es una gran mejora para los desarrolladores web. Muchas de las tareas llevadas a cabo en el servidor están consumiendo mucho tiempo. Antes de AJAX, esta operación podría causar que la aplicación se bloquee o se detenga.

Con AJAX, JavaScript no tiene que esperar la respuesta del servidor, sino que puede:

- ejecutar otros scripts a la espera de respuesta del servidor,
- tratar la respuesta cuando la respuesta esté lista.

Async = true

Cuando se utiliza async = true, especifica una función que se ejecutará cuando la respuesta esté lista en el evento onreadystatechange:

Ejemplo:
xmlhttp.onreadystatechange = function ()
   {
   if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
     {
     . document.getElementById ("myDiv") innerHTML = xmlhttp.responseText;
     }
   }
Xmlhttp.open ("GET", "ajax_info.txt", true);
xmlhttp.send ();

Accede para probarlo

Async = false

Para utilizar async = false, cambia el tercer parámetro en el método open () a false:
Xmlhttp.open ("GET", "ajax_info.txt", false);

Usar async = false no es recomendable, pero para unos requerimientos pequeños esto puede ser aceptable.

Recuerda que javascript no continuará con la ejecución, hasta que la respuesta del servidor está lista. Si el servidor está ocupado o lento, la aplicación se bloquea o se detiene.

Nota: Cuando se utiliza async = false, no escribas una función onreadystatechange - sólo hay que poner el código después de la declaración send ():

Ejemplo:

Xmlhttp.open ("GET", "ajax_info.txt", false);
xmlhttp.send ();
document.getElementById ("myDiv") innerHTML = xmlhttp.responseText;

Accede para probarlo

AJAX - Respuesta del servidor

Respuesta del Servidor

Para obtener la respuesta de un servidor, utiliza la propiedad responseText o responseXML del objeto XMLHttpRequest.

Propiedad Descripción
responseText obtiene los datos de respuesta como una cadena
responseXML obtiene los datos de respuesta como datos XML

Propiedad responseText

Si la respuesta del servidor no es XML, utiliza la propiedad responseText.

La propiedad responseText devuelve la respuesta como una cadena, y se puede utilizar en consecuencia:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Accede para probarlo

Propiedad responseXML

Si la respuesta del servidor es XML y deseas analizarla como un objeto XML, utiliza la propiedad responseXML:

Ejemplo:

Solicitar el fichero cd_catalog.xml y analiza la respuesta:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName ("ARTIST");
for (i = 0; i "..;
   }
. document.getElementById ("myDiv") innerHTML = txt;
Accede para probarlo

AJAX - Evento onreadystatechange

El evento onreadystatechange

Cuando una petición a un servidor se envía, queremos realizar algunas acciones en base a la respuesta.

El evento onreadystatechange se dispara cada vez que cambia el readyState.

La propiedad readyState tiene el estatus de XMLHttpRequest.

Tres importantes propiedades del objeto XMLHttpRequest:

Propiedad Descripción
onreadystatechange Almacena una función (o el nombre de una función) que se llamará automáticamente cada vez que cambia la propiedad readyState
readyState Mantiene el estado de XMLHttpRequest. Cambia de 0 a 4:
0: petición no inicializada
1: conexión establecida
2: petición recibida
3: procesamiento solicitudes
4: solicitud terminada y la respuesta está lista
status 200: "OK"
404: Page not found

En onreadystatechange, se especifica lo que sucederá cuando la respuesta del servidor está lista para ser procesado.

Cuando readyState es 4 y el estado es 200, la respuesta es fácil.

Ejemplo:
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

Accede para probarlo

Nota: El evento onreadystatechange se desencadena cinco veces (0-4), una vez para cada cambio en readyState.

Usando una función Callback

Una función Callback es una función que se pasa como parámetro a otra función.

Si tienes más de una tarea AJAX en el sitio web, debes crear una función estándar para crear el objeto XMLHttpRequest, y llamarla para cada tarea AJAX.

La función debe contener la URL y qué hacer en onreadystatechange (que es probablemente diferente para cada llamada):

Ejemplo:
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

Accede para probarlo

Buscar en mis sitios

Google Plus asignatura DAWeb

Google Plus asignatura IAT II