Una introducción a Ajax

La historia y la práctica actual de un patrón dominante de programación web

Reciba una introducción técnica a la programación Ajax, y descubra el código central JavaScript e implementaciones de bibliotecas populares. Este artículo presenta una breve historia sobre la tecnología y luego describe los fundamentos técnicos de las interacciones Ajax usando codificación central JavaScript y tres bibliotecas JavaScript populares.

Rob Larsen, Interface Architect, Isobar

Rob Larsen photoRob Larsen tiene más de 11 años de experiencia construyendo y diseñando sitios web y aplicaciones web. Actualmente, es arquitecto de interfaz en Isobar, y trabaja con HTML5, CSS3, y otras tecnologías emergentes para algunas de las principales marcas del mundo. Rob escribe sobre la web y las tecnologías web en su blog, HTML + CSS + JavaScript.



22-08-2011

Durante los últimos años JavaScript ha pasado de ser algo ocasional o una idea secundaria objeto de burla, a ser el lenguaje individual más importante en la Web. Si algún factor puede afirmar ser el instigador de ese crecimiento destacado es el aumento en el desarrollo de aplicaciones basadas en Ajax.

Ajax, definido de forma simple, es un patrón de desarrollo y de diseño que permite a los sitios web o a las aplicaciones, actualizar la pantalla con datos en vivo sin necesidad de una renovación de página. Esta funcionalidad crea una experiencia fluida y tipo escritorio.

Breve historia de Ajax

La historia de Ajax es similar a la de muchas otras maravillas aparentes de la noche a la mañana. Aunque Ajax pareció salir de la nada, en realidad se estuvo gestando durante algún tiempo. Muchos años de trabajo diseminados en toda la web llevaron a la creación de herramientas y patrones que se reunieron bajo el banner Ajax. Durante toda la era dHTML de la burbuja original de Internet y durante los años difíciles siguientes al colapso de las punto-com, los desarrolladores de todo el mundo estuvieron desencadenando el poder inesperado de JavaScript para llevar a la web nuevas y emocionantes patrones de aplicación.

XMLHttpRequest

La primera y más importante pieza del rompecabezas Ajax fue la API XMLHttpRequest (XHR). XHR es una API JavaScript usada para transferir mensajes de datos entre un navegador web y un servidor web. Permite al navegador usar un HTTP POST (para pasar datos hacia el servidor) o una solicitud GET (para acceder a datos desde el servidor en segundo plano). Esta API es el centro de la mayoría de interacciones Ajax y es una de las tecnologías base del desarrollo web moderno.

También es el mejor regalo que el equipo Microsoft® Internet Explorer® dio jamás a Internet.

Es cierto. El XHR apareció por primera vez en Internet Explorer versión 5 en el año 2000. Escrito originalmente por Alex Hopmann como un control® ActiveX® de Microsoft, el XHR fue creado para usarse con Web Access de Microsoft Outlook® , diseñado para facilitar las interacciones entre la avanzada (para su tiempo) interfaz de primer plano y Microsoft Exchange Server.

Aunque el paquete de software de Microsoft no cuenta exactamente como un "humilde comienzo", el XHR realmente ha crecido más allá del alcance limitado de ese producto inicial. Desde entonces ha sido implementado en cada uno de los principales navegadores y ha sido adoptado como un estándar W3C.


Los pioneros

Además de la implementación de Microsoft, muchas otras compañías incursionaron en el dominio proto-Ajax. Aunque muchas estaban experimentando con estas tecnologías, hay dos especialmente que vale la pena señalar —una porque es un pie de página interesante y citada con frecuencia en cuanto al desarrollo de Ajax, y la otra porque es un gigante de Internet que verdaderamente llevó estas tecnologías a las masas.

Oddpost

Oddpost fue un cliente de e-mail premium basado en web que se lanzó en el 2002. Este aprovechó muchos patrones que ahora son conocidos. En términos de diseño e interacción, era una reminiscencia de un cliente de e-mail de escritorio. En su interior, utilizaba un concepto que los desarrolladores llamaron DataPacks para transferir pequeñas porciones de datos del servidor hacia el navegador. Fue una experiencia novedosa.

Eventualmente, Oddpost fue adquirida por Yahoo! y se convirtió en la base para un Yahoo! Mail modernizado.

Google Maps, Google Suggest, Gmail, y un artículo importante

El cambio real comenzó un par de años después con los servicios Gmail, Google Suggest y Google Maps. Los tres aprovecharon fuertemente las técnicas Ajax y en general, prendieron fuego al mundo del desarrollo web. La capacidad de respuesta e interacción fueron una novedad para el público en general. Los rumores crecieron rápidamente en torno a las nuevas aplicaciones de Google.

No muchas personas lo saben, pero no obstante, las cosas estaban a punto de ponerse más emocionantes en el mundo del desarrollo web. Para ese entonces, las personas sabían que algo nuevo y excitante estaba sucediendo en el desarrollo de aplicaciones web. Durante algún tiempo, a ese "algo" le faltaba un norte.

Todo lo que se necesitó fue un solo artículo para poner todo en movimiento.

El 18 de febrero del 2005, Jesse James Garrett, co-fundador y presidente de Adaptive Path, escribió un artículo titulado"Ajax: A New Approach to Web Applications" (vea Recursos). En él, describió la tendencia en el desarrollo del diseño de aplicaciones web que las personas habían estado viendo en aplicaciones como Gmail y Google Maps. Él la llamó "un cambio fundamental en lo que es posible hacer en la Web".

También le dio al patrón su nombre — un momento importante dado que enfocó la atención en esta nueva tendencia y porque dio a todos, incluso a quienes no eran técnicos, algo para aferrarse cuando discutían sobre lo último y lo mejor en el mundo del desarrollo web. En el artículo, él describió a Ajax — la tecnología — así:

Definiendo Ajax
Ajax no es una tecnología. En realidad son varias tecnologías, cada una floreciendo a su propia manera y reuniéndose de formas nuevas y poderosas. Ajax incorpora:
  • Presentación basada en estándares usando XHTML y CSS
  • Presentación dinámica en pantalla e interacción usando el Document Object Model
  • Intercambio y manipulación de datos usando XML y XSLT
  • Recuperación asíncrona de datos usando XMLHttpRequest
  • JavaScript enlazándolo todo

Aunque esta descripción técnica está desactualizada en cierta forma, el patrón básico permanece intacto: HTML y CSS representan los datos y el estilo, el método DOM y otros métodos asociados permiten que la página se actualice en tiempo real, XHR permite la comunicación con el servidor y JavaScript orquesta todo el espectáculo.

El efecto general del artículo ha sido monumental. Representa una ocasión singular en donde una inmensa expectativa encontró un yacimiento de creatividad y energía que estaba expectante, desencadenando una revolución. Adoptado por la nueva generación de iniciadores que comenzaron a emerger en todo el mundo, Ajax fue llevado rápidamente a la línea de frente de los paradigmas de desarrollo web. Ajax pasó de ser una tendencia vaga en busca de una estrategia de mercado, a ser un componente clave del diseño y el desarrollo web modernos.


Bibliotecas

Uno de los motores clave del desarrollo basado en Ajax fue la evolución y adopción de bastantes bibliotecas JavaScript llenas de recursos. Con excepción de los desarrolladores JavaScript experimentados, pocas personas entendían realmente la tecnología que subyacía en Ajax. Así que incluso cuando gran parte de la interacción y animación dentro del navegador había sido llevada a los excesos frívolos en la era dHTML, esta agrupación limitada de ingenieros experimentados en JavaScript condujo a una brecha considerable entre la demanda de sitios basados en Ajax y la oferta de personas que podían codificar tal interfaz desde cero. Bibliotecas como Prototype, Dojo y jQuery ayudaron a reducir bastante esa brecha al proporcionar interacciones y animaciones listas para usar y también al poner parches a las diferencias entre navegadores y al mejorar las deficiencias esenciales de la API JavaScript.


JavaScript Asíncrono e incluso más JavaScript (notación de objetos)

Uno de los mayores cambios en el panorama Ajax desde la publicación original hasta hoy es la introducción de JSON, un transporte de datos basado en JavaScript. Al ofrecer tamaños de archivo más pequeños y la conveniencia del acceso nativo JavaScript (al contrario de los pesados métodos y propiedades basados en DOM usados en XML), JSON fue adoptado rápidamente por los desarrolladores como el transporte de datos de su elección. Desde entonces JSON ha sido integrado en la recientemente acuñada 5a Edición de la especificación ECMAScript.

JSON+Padding

Una notable mejora a la propuesta original JSON es JSON+Padding (JSONP). Como verá, el objeto XMLHttpRequest tiene un estricto modelo de seguridad que permite la comunicación únicamente con el mismo dominio y protocolo que la página solicitante. JSONP crea una inteligente vía alterna a esta restricción inter-dominios al empaquetar la respuesta JSON en una función o variable de devolución de llamado, definida por el usuario. Después de que usted agrega el script JSON al documento, este método proporciona acceso instantáneo a los datos que contiene. Este patrón es común actualmente, y hay muchos servicios web grandes que están adoptando la práctica para permitir mash-ups y otra sindicación de contenido.

No obstante y a pesar de su popularidad, el JSONP presenta una vulnerabilidad obvia frente a código malicioso. Como la inyección de una etiqueta de script de un tercero permite que potencialmente suceda cualquier cosa en la página que hace el hosting, hay un potencial increíble para causar daños si se pone en riesgo a un proveedor de datos o si el sitio que hace el hosting no es cuidadoso en cuanto a los recursos introducidos a la página.

Ahora que usted conoce algo de la historia, explore la tecnología que permite que suceda toda esta magia. Como la API JavaScript genérica está cubierta por bibliotecas, incluso para los desarrolladores experimentados es revelador dar un vistazo a lo que hay en el interior.


La API y los recursos XMLHttpRequest

Aunque hay técnicas alternativas para obtener datos del servidor, el XHR permanece en el corazón de la mayoría de interacciones Ajax. Una interacción XHR tiene dos componentes: la solicitud y la respuesta. Describiré ambas en su momento.

El modelo de seguridad

Como se mencionó, el objeto XMLHttpRequest original tiene un estricto modelo de seguridad. Esta política de mismo-origen permite comunicaciones únicamente con exactamente el mismo host, protocolo y puerto de la página solicitante. Esto significa que la comunicación entre diferentes dominios (example.com y example2.com), hosts diferentes (my.example.com y www.example.com) y protocolos diferentes (http://example.com y https://example.com) y todas arrojan los errores respectivos.

Con el desarrollo de la segunda versión del objeto XHR, comenzó a trabajarse en el nuevo Cross-origin Request Protocol en elW3C, y comenzó también a trabajarse fuertemente en la implementación por parte de los proveedores de navegadores, mecanismo para solicitudes inter-dominios que ahora está disponible en Internet Explorer 8+, Mozilla Firefox 3.5+, Apple Safari 4+ y en Google Chrome. La generación de impulso para esto ha sido lenta, pero con un encabezado "Origin" específico enviado en la solicitud

Origin: http://example.com

y con el servidor configurado para enviar de regreso un encabezado "Access-Control-Allow-Origin" que coincida,

Access-Control-Allow-Origin: :
http://example.com

ahora es posible la comunicación en doble vía usando el objeto XHR entre dominios.

La solicitud

Hay cuatro métodos del lado de la solicitud:

  • open() inicia la conexión con el servidor. Necesita de varios argumentos:
    • .. El método HTTP a utilizar (esté será o POST o GET)
    • url. El URL solicitado
    • async. Un parámetro de operador booleano opcional que indica si la solicitud es asíncrona (este argumento está predeterminado como True)
    • user. Un nombre de usuario opcional para utilizar para autenticación
    • password. Una contraseña opcional para utilizar como autenticación
  • setRequestHeader() establece encabezados para la solicitud. Requiere de dos argumentos: un encabezado y su valor asociado
  • send() envía la solicitud. Este método puede tomar un argumento opcional que contenga el cuerpo de una solicitud POST
  • abort() aborta la solicitud

La respuesta

La respuesta también tiene varios atributos y métodos:

  • status. El estado HTTP estándar de la solicitud (por ejemplo, 200 podría retornarse como una solicitud exitosa)
  • statusText. Incluye la cadena de caracteres de respuesta completa retornada por el servidor web, incluyendo el texto de respuesta (por ejemplo, 304 Not Modified)
  • getResponseHeader() Retorna el texto de un encabezado específico; toma el nombre del encabezado deseado como un argumento individual
  • getAllResponseHeaders(). Retorna el texto de todos los encabezados de respuesta
  • responseText Una representación de cadena de caracteres del cuerpo de respuesta
  • responseXML Una representación XML del cuerpo de respuesta — un fragmento de documento con un DOM y todos los métodos DOM asociados

readyState

En cuanto se ha creado la instancia, el objeto XMLHttpRequest tiene cualquiera de cinco estados, representados por los siguientes valores:

  • 0: UNSENT. Indica que el objeto se ha creado
  • 1: OPENED. Indica que el método open() ha sido invocado exitosamente
  • 2: HEADERS_RECEIVED. Indica que se han recibido los encabezados de la solicitud
  • 3: LOADING. Indica que el cuerpo de la respuesta está siendo descargado
  • 4: DONE. Indica que la solicitud se ha completado pero no indica si la solicitud fue exitosa o si retornó un valor esperado (Consulte la respuesta y los encabezados HTTP estándar para medir la salud de la solicitud)

Un ejemplo JavaScript genérico

Antes de observar a algunas bibliotecas populares, observe algunos ejemplos básicos de JavaScript para observar la tecnología central en operación. Todos los ejemplos a continuación están disponibles para descarga (vea Descargas) y pueden ejecutarse en cualquier servidor web que ejecute PHP. Todos los ejemplos manipulan el documento simple presentado en el Listado 1.

Listado 1. Documento HTML de muestra
<!doctype html>
<html lang="en"> 
<head>
  <meta charset="utf-8">
  <title>Simple Ajax Example</title>
  <meta name="author" content="Rob Larsen">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="_assets/css/style.css">
</head>
<body>
    <div id="main">
        <h1>Simple Ajax Example</h1>
        <p><strong id="activate">Click here</strong> 
            and content will be appended after this paragraph</p>
    </div>
	<script src="_assets/js/ajax.js"></script>
</body>
</html>

El Listado 2 ilustra una solicitud GET simple, la cual procesa el responseXML. Esta es una interacción Ajax prototípica de los primeros días de la tecnología. Funciona en todos los navegadores modernos, así como en Internet Explorer versiones 7 y 8.

Listado 2. Una función Ajax básica
/*
Here's a basic Ajax function
*/
var ajax = function( opts ) {
/*
We have an options argument. 
In addition, we want to have some smart defaults.
*/
  opts = {
      //Is it a Get or Post
      type: opts.type || "POST",
      //What URL are we going to hit?
      url: opts.url || "",
      //What do we do with the data
      onSuccess: opts.onSuccess || function(){},
      //what kind of data do we expect?
      data: opts.data || "xml"
  };
//create a new XMLHttpRequest	
  var xhr = new XMLHttpRequest();
//Open the connection to the server	
  xhr.open(opts.type, opts.url, true);
/*
When the ready state changes
fire this function
*/
  xhr.onreadystatechange = function(){
  //readyState 4 is "done"		
    if ( xhr.readyState == 4 ) {
  /*
  do some simple data processing
  There are two components to the returned object-
  responseXML and responseText. 
  Depending on what we're doing we'll need one or the other.
  */
    switch (opts.data){
        case "json":
            //json is text
            opts.onSuccess(xhr.responseText);
            break;
        case "xml":
            //XML retains the structure/DOM 
            //It's passed in whole. 
            opts.onSuccess(xhr.responseXML);
            break;
        default : 
            //Everything else will get TXT
            opts.onSuccess(xhr.responseText);;
      }          
    }
  };
  //close the connection
  xhr.send(null);
}
//here's our simple function
var ajaxSample = function(e){
//Simple callback adds some text to the page	
  var callback = function( data ) {
    document.getElementById("main").innerHTML += 
      "<p>"
      +data.getElementsByTagName("data")[0].getAttribute("value")
      +"</p>";
}
//And here's our Ajax call	
  ajax({
      type: "GET",
      url: "_assets/data/ajax-1.xml",
      onSuccess: callback,
      data : "xml"
   })
//prevent the default action	
  e.preventDefault();
}
//Wire everything up
document.getElementById("activate").addEventListener("click", ajaxSample, false);

Es posible ver un objeto ActiveX original en acción en el Listado 3. Si no existe la implementación nativa, usted utiliza un bloque Try... Catch para hacer un bucle a través de las referencias potenciales a l objeto en diferentes versiones de Internet Explorer. Esta implementación completa e inter-navegadores es compatible con versiones de Internet Explorer tan antiguas como la 5.

Listado 3. Script Ajax inter-navegadores
var ajax = function( opts ) {
  opts = {
    type: opts.type || "POST",
    url: opts.url || "",
    onSuccess: opts.onSuccess || function(){},
    data: opts.data || "xml"
  };
/*
Support for the original ActiveX object in older versions of Internet Explorer
This works all the way back to IE5.
*/
  if ( typeof XMLHttpRequest == "undefined" ) {
    XMLHttpRequest = function () {
      try { 
          return new ActiveXObject("Msxml2.XMLHTTP.6.0"); 
      }
      catch (e) {}
      try { 
          return new ActiveXObject("Msxml2.XMLHTTP.3.0"); 
      }
      catch (e) {}
      try { 
          return new ActiveXObject("Msxml2.XMLHTTP"); 
      }
      catch (e) {}
      throw new Error("No XMLHttpRequest.");
    };
  }
  var xhr = new XMLHttpRequest();
  xhr.open(opts.type, opts.url, true);
  xhr.onreadystatechange = function(){
    if ( xhr.readyState == 4 ) {
      switch (opts.data){
    	case "json":
          opts.onSuccess(xhr.responseText);
          break;
        case "xml":
          opts.onSuccess(xhr.responseXML);
          break;
        default : 
          opts.onSuccess(xhr.responseText);;
      }          
    }
  };
  xhr.send(null);
}
var ajaxSample = function(e){
  var callback = function( data ) {
    document.getElementById("main").innerHTML += "<p>"
      +data.getElementsByTagName("data")[0].getAttribute("value")
      +"</p>";
  }
  ajax({
    type: "GET",
    url: "_assets/data/ajax-1.xml",
    onSuccess: callback,
    data: "xml"
   })
  e.preventDefault();
}
document.getElementById("activate").addEventListener("click", ajaxSample, false);

El Listado 4 muestra un patrón que es más común hoy: tomar el responseText formateado en JSON y analizarlo en un objeto JavaScript nativo. Este código ilustra la simplicidad relativa de manejar datos JSON. Cuando se compara este listado con los métodos indirectos y minuciosos necesarios ocasionalmente para manipular datos XML, es claro por qué JSON es el transporte de datos seleccionado por tantos desarrolladores.

Listado 4. Usando JSON
var ajax = function( opts ) {
  opts = {
    type: opts.type || "POST",
    url: opts.url || "",
    onSuccess: opts.onSuccess || function(){},
    data: opts.data || "xml"
  };
  var xhr = new XMLHttpRequest();
  xhr.open(opts.type, opts.url, true);
  xhr.onreadystatechange = function(){
    if ( xhr.readyState == 4 ) {
      switch (opt.sdata){
        case "json":
          opt.onSuccess(xhr.responseText);
          break;
        case "xml":
          opt.onSuccess(xhr.responseXML);
          break;
        default : 
          opt.onSuccess(xhr.responseText);;
      }          
    }
  };
  xhr.send(null);
}
var jsonSample = function(e){
  var callback = function( data ) {
    //here, the data is actually a string
    //we use JSON.parse to turn it into an object
    data = JSON.parse(data);
    /*
    we can then use regular JavaScript object references
    to get at our data. 
    */
    document.getElementById("main").innerHTML += "<p>"
      + data.sample.txt 
      +"</p>";
  }
  ajax({
    type: "GET",
    url: "_assets/data/json-1.json",
    onSuccess: callback,
    data : "json"
   })
  e.preventDefault();
}
document.getElementById("activate").addEventListener("click", jsonSample, false);

Todos los demás listados (Listados 5 a 11) usan datos JSON.

El Listado 5 muestra un ejemplo JSONP simple. Como puede ver, este evita completamente el XHR y simplemente adiciona un script con un argumento de devolución de llamada. Se retorna la devolución de llamada, empaquetando el objeto de datos en código JavaScript ejecutable.

Listado 5. Datos JSONP
var callback = function( data ) {
  document.getElementById("main").innerHTML += "<p>"+ data.sample.txt +"</p>";
}
var jsonpSample = function(e){
//create a script element
  var jsonp = document.createElement("script");
//give it a source with the callback name appended in the query string
  jsonp.src= "_assets/data/jsonp.php?callback=callback";
//add it to the doc
  document.body.appendChild(jsonp);
  e.preventDefault();
}
//wire up the event
document.getElementById("activate").addEventListener("click", jsonpSample, false);

Ejemplos de bibliotecas

Para la mayoría de desarrolladores, los pormenores de una solicitud Ajax son interesantes únicamente desde una perspectiva académica. La mayoría de su trabajo real se hace dentro del contexto de una o más bibliotecas JavaScript. Además de poner parches sobre cualquier incompatibilidad inter-navegador, las bibliotecas ofrecen recursos construidos sobre la API básica. El siguiente ejemplo muestra ejemplos GET y POST desde tres bibliotecas populares para ilustrar las diferentes APIs.

jQuery

Vamos a comenzar con ejemplos de la popular biblioteca jQuery. La función Ajax de jQuery's fue reescrita recientemente para incluir varios recursos avanzados que están más allá del alcance de este artículo, pero el recurso común de todas las solicitudes Ajax jQuery es la presencia de un objeto de configuración pasado a la función como un argumento. Note además que jQuery tiene varios métodos convenientes, como $.post y $.get, que son atajos a configuraciones de solicitud comunes.

El Listado 6 muestra el código conciso requerido para obtener datos usando jQuery.

Listado 6. Solicitud jQuery GET
/*
callback is a simple function that will be run
when the data is returned from the server
*/
var callback = function( data ) {
/*	
it just adds a little bit of text to the document
data is the JSON object returned by the server. 
*/
  $("#main").append($("<p />").text(data.sample.txt));
}
/*
Wire up the ajax call to this click event
*/
$("#activate").click(
  function(){
//call $.ajax with a configuration object		
	$.ajax({
//it's just a get request
      type: 'get',
//we're looking for this URL			
      url: '_assets/data/json-1.json',
//Our cool callback function
      success: callback,
//it's going to be JSON			
      dataType: "json"
    })
  }	
)

El Listado 7 ilustra la publicación y recuperación de un objeto JSON simple. Se puede notar el uso del objeto nativo JSON para analizar los datos entrantes. La documentación jQuery habla sobre la necesidad explícita de aumentarse hacia navegadores que no lo soportan, con el script JSON2.js.

La inclusión de un manejador explícito de errores permite la manipulación elegante de solicitudes exitosas y no exitosas. El estado de error de jQuery toma tres argumentos, incluyendo el objeto XHR en sí, lo cual permite el manejo sólido de errores.

Listado 7. POST jQuery
/*
this is the object we're going to post
*/
var myMessages = {
  positive : "Today is a good day",
  negative : "Today stinks",
  meh : "meh"
}
var callback = function( data ) {
  $("#main").append($("<p />").text(data.positive));
}
/*
Setting up a simple error handler.
It doesn't do much. 
It's just nice to illustrate error handling.
*/
var errorHandler = function( xhr, textStatus, errorThrown ){
  throw new Error("There was an error. The error status was " + textStatus );
}
/*
Here's where the action happens.
Attach an event to out simple button.
*/
$("#activate").click(
  function(){
//call $.ajax with a configuration object		
    $.ajax({
      //we're sending data to the server   
      type: 'POST',
      //this is our URL
      url: '_assets/data/post-responder.php',
      /*
      This is our data, JSON stringified
      jQuery expects to use native JSON
      or JSON2.js in unsupported browsers
      */
      data: JSON.stringify(myMessages),
      //Here's where we set up our callback function
      success: callback,
      //The data expected from the server
      dataType: "json",
      //And our simple error handler
      error : errorHandler
      }
    )
  }
);

Dojo

Dojo es mucho más que una solicitud Ajax/manipulación DOM ilustrada en los ejemplos que siguen. Realmente está construida para el desarrollo de aplicaciones robustas. Dicho esto, aún es interesante observar la API de esta forma.

Note las dos funciones "Ajax" separadas: xhrGet y xhrPost. Preste también atención al uso de la herramienta Dojo JSON para analizar los datos entrantes. El Listado 8 muestra un ejemploGET.

Listado 8. Solicitud GET Dojo
var callback = function( data ) {
//note the document.getelementById alias
  dojo.byId("main").innerHTML += "<p>"+ data.sample.txt +"</p>";
}
var getData  = function(){
//xhrGet is for get requests
dojo.xhrGet({
  //the URL of the request
  url: "_assets/data/json-1.json",
  //Handle the result as JSON data
  handleAs: "json",
  //The success handler
  load: callback
});
}
// Use connect to attach events
dojo.connect( dojo.byId("activate"), "onclick", getData );

El Listado 9 muestra un POST Dojo, incluyendo la configuración de un manejador de errores.

Listado 9. POST Dojo
var myMessages = {
  positive : "Today is a good day",
  negative : "Today stinks",
  meh : "meh"
}
var callback = function( data ) {
  dojo.byId("main").innerHTML += "<p>"+ data.positive +"</p>";
}
var errorHandler = function(){
  throw new Error("We dun goofed.")
}
var postData  = function(){
 //not surprisingly xhrPost is for POST
  dojo.xhrPost({
    // The URL of the request
    url: "_assets/data/post-responder.php",
    //This will be JSON
    handleAs: "json",
    //Set the headers properly
    headers: { "Content-Type": "application/json; charset=uft-8"},
    //Use Dojo's JSON utility
    postData: dojo.toJson(myMessages),
    // The success handler
    load: callback,
    // The error handler
    error: errorHandler
  });
}
// Use connect to attach events
dojo.connect( dojo.byId("activate"), "onclick", postData );

Interfaz de Usuario Yahoo! (YUI)

La biblioteca YUI presenta un patrón ligeramente diferente a los dos anteriores. Para un elemento, la YUI retorna todo el objeto XHR, no solo los datos analizados, lo cual permite una manipulación más precisa de los datos retornados y visibilidad de toda la solicitud. Esto también significa que el desarrollador es responsable por conocer las entradas y las salidas del objeto XHR mismo. Adicionalmente, también muestra el uso del cargador de módulo YUI use(), el cual vale la pena destacar incluso aunque no está directamente relacionado con Ajax (excepto por cargar el módulo io ). El Listado 10 toma como argumentos una lista de módulos YUI y luego una devolución de llamada. Una vez ejecutados, crea un paquete de descarga desde la Yahoo! Content Delivery Network (CDN) que contiene todos los módulos requeridos, en una descarga única basada en CDN.

Listado 10. Solicitud GET YUI
// Create a new YUI instance and populate it with the required modules.
YUI().use('node','event', 'json', 'io', function (Y) {
  var callback = function( id, xhr ) {
    var data = Y.JSON.parse(xhr.responseText);
    Y.one('#main').append("<p>" 
      + data.sample.txt 
      +"</p>");
  }
  Y.one("#activate").on('click',
    function(){
      Y.io( '_assets/data/json-1.json', {
    	//This is actually the default
    	method: 'get',
    	on:   {success: callback}
      })
    }	
  )
});

Una opción de estilo interesante presentada en el ejemplo POST del Listado 11 es la separación adicional de todas las funciones de respuesta en el objeto on .

Listado 11. POST YUI
YUI().use('node','event', 'json', 'io', function (Y) {
  var myMessages = {
    positive : "Today is a good day",
    negative : "Today stinks",
    meh : "meh"
  }	
  var callback = function( id, xhr ) {
    var data = Y.JSON.parse(xhr.responseText);
    Y.one('#main').append("<p>" 
      + data.positive 
      +"</p>");
  }
  var errorHandler = function( id, xhr){
    throw new Error("There was an error. The error status was " 
      + xhr.statusText 
      +".")
  }
  Y.one("#activate").on('click',
    function(){
      Y.io( '_assets/data/post-responder.php', {
    	method: 'post',
    	//Use the Y.JSON utility to convert messages to a string
    	data : Y.JSON.stringify(myMessages),
    	//All response methods are encapsulated in
    	//the on object
    	on:   {success: callback,
    		failure: errorHandler }
      })
    }	
  )
});

Como puede ver, los patrones básicos son los mismos a lo largo de la mayoría de los listados. Con excepción del soporte de controles ActiveX en el ejemplo JSONP, todos cubren básicamente las mismas bases, con diferentes variaciones de API puestas en la parte superior de la interacción JavaScript central.

Note que todas las bibliotecas ofrecen un gran número de recursos que van más allá de las interacciones básicas descritas aquí. Aunque la mayoría del trabajo Ajax que usted vaya a realizar puede manejarse con solicitudes GET y POST directas, le será útil familiarizarse con algunos de los recursos avanzados en la biblioteca de su elección.


Conclusión

Posiblemente, con los fundamentos a mano y tras una pequeña ojeada al funcionamiento interno, usted tendrá la confianza necesaria para implementar interacciones Ajax en sus propios sitios o aplicaciones. Como con cualquier tecnología, la mejor forma de aprender sobre algo es jugar un poco, así que tome las muestras de código, profundice y ponga manos a la obra. Como la han comprobado los años recientes, el esfuerzo bien vale la pena.


Descargar

DescripciónNombretamaño
Sample Ajax code for this articlesample-ajax-code.zip18KB

Recursos

Aprender

Obtener los productos y tecnologías

Comentar

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=tecnologia Java
ArticleID=751807
ArticleTitle=Una introducción a Ajax
publish-date=08222011