Skip to main content

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano.

AJAX es una técnica para realizar una solicitud a un recurso web. Por ejemplo, leer una página web.

Lo principal de AJAX es que se realiza de forma asincrónica. Y es esta característica la que permite hacer una solicitud una vez que la página ya fue cargada.

Las dos capacidades en cuestión son:

  • La posibilidad de hacer peticiones al servidor sin tener que volver a cargar la página.
  • La posibilidad de analizar y trabajar con documentos XML.



Ejemplo de Código JavaScript

function solicitudAJAX(url){

    //Enviar con AJAX
    var http_request = false;

    //Crear el objeto
    if (window.XMLHttpRequest)
        http_request = new XMLHttpRequest();
    else if (window.ActiveXObject)
        http_request = new ActiveXObject("Microsoft.XMLHTTP"); //para IE6-
    else
        return false; //Error al crear el request

    //asignamos una función que se llamará (asincrónicamente) 
    //  cuando cambie el estado de la petición
    http_request.onreadystatechange = cambiaEstadoDelRequest;

    //hacemos el request
    http_request.open("GET", url, true);
    http_request.send(null);
    return true;
}

function cambiaEstadoDelRequest() {
    console.log(this);
    return;
    if (http_request.readyState == 4) { // 4 significa que terminó
        if (http_request.status == 200) { //200 es la respuesta "OK" del server
            //acá leemos la respuesta (la página devuelta)
            var respuesta = http_request.responseText;

            //Acá el código que parsee a la respuesta <------

        } else {
            //El server tuvo otra respuesta (Por ej: 404 not found)
        }
    }

}

Ejemplo de llamada

solicitudAJAX("http://www.midominio.com/datos.html?buscar=algo");



Ejemplo de Código jQuery

$.ajax({
    url: "url",
    context: document.body
}).done(function() {
    //procesar la respuesta
});



Frameworks con AJAX:

  1. jQuery UI
  2. MooTools
  3. Prototype
  4. YUI Library
  5. ASP.NET AJAX
  6. Spry framework
  7. Dojo Toolkit
  8. Ext JS
  9. Backbone.js
  10. AngularJS
  11. Unified.JS

Referencias:

Lenguaje de código (utilizado para resaltar la sintaxis): default