AJAX es el acrónimo de Asynchronous JavaScript and XML, actualmente este último término no hace mucho sentido para un desarrollador moderno porque básicamente XML ya no es tan popular como lo es JSON. No es un framework, mucho menos una librería. AJAX es una técnica utilizada para desarrollar aplicaciones interactivas utilizando tecnologías y herramientas ya existentes como JavaScript.
La apropiación del término se le atribuye a Jesse James Garrett quien publicó una entrada en su blog titulada “Ajax: A New Approach to Web Applications”. En ella detalla esta nueva técnica que permite actualizar una página web enviando y recibiendo datos desde un servidor sin necesidad de refrescar totalmente la página completa, todo esto en segundo plano.
AJAX con el objeto XMLHTTP Request
El objeto XMLHTTP Request, es la
forma original de hacer requests desde el navegador. Creado por Microsoft e
implementado en Internet Explorer 5.0 como un objeto ActiveX, que implicaba ser
utilizado en cualquier entorno de desarrollo de software compatible con esta
tecnología, no fue sino hasta el 2006 que fue implementada en Internet Explorer
7 y se comenzó a crear el primer draft para estandarizarlo en la W3C.
Ejemplo básico de una petición XMLHTTP Request a una API
Linea 1: se crea una instancia del objeto.
Lineas 3 – 7: el método onreadystatechange se ejecuta cada que se registra uno de los estados del cliente XHR, el método readyState change registra los 4 estados del cliente siendo 4 el estado correspondiente a done, cuando los datos han sido recuperados. XHR.status indica el código de status http, validamos que sea un HTTP 200 OK. En responseText se obtienen los datos recuperados de la API por el request.
Linea 9: Se crea la conexión especificando como parámetros el método (en este caso GET) y la url.
Lineas 3 – 7: el método onreadystatechange se ejecuta cada que se registra uno de los estados del cliente XHR, el método readyState change registra los 4 estados del cliente siendo 4 el estado correspondiente a done, cuando los datos han sido recuperados. XHR.status indica el código de status http, validamos que sea un HTTP 200 OK. En responseText se obtienen los datos recuperados de la API por el request.
Linea 9: Se crea la conexión especificando como parámetros el método (en este caso GET) y la url.
