AJAX, Ajax (Asynchronous JavaScript And XML) es una técnica para cargar datos o fragmentos de HTML sin refrescar la ventana del navegador. Fue diseñado a finales de los 90 por Microsoft como una API que daba soporte a su servicio de Outlook Web Access (Outlook a través de navegador).

    Esencialmente ésta tecnología permite que el cliente javascript se comunique con el servidor utilizando el objeto XMLHttpRequest, presente en la mayoría de los navegadores modernos.

    Para crear un objeto XMLHttpRequest, en cualquier navegador es:

    var requester = new XMLHttpRequest();


    Excepto en Internet Explorer, el cual lo implementa como un objeto ActiveX, por lo cual es:

    var requester = new ActiveXObject("Microsoft.XMLHTTP");


    Las diferencias terminan ahí, las siguientes llamadas al objeto XMLHttpRequest son independientes del navegador utilizado.

    Para transportar datos en un objeto XMLHttpRequest, primero debe crearse una conexión , y luego enviar para obtener los datos desde el servidor.

    Lo primero que se debe hacer es establecer una conexión con el servidor, para ello se utiliza el método open(), éste método toma 2 argumentos, el primero es el tipo de petición que deseamos enviar y el segundo indica la localización del recurso al  cual se desea acceder, dicha localización puede ser absoluta o relativa.

    requester.open("GET", "/feed.xml");


    En el ejemplo, se ve que se desea acceder al documento feed.xml utilizando GET.

    Éste método también recibe un tercer argumento, el cual es booleano, que especifica si la petición va a ser sincrónica (false) o asincrónica (true, ésta es la opción por defecto), una petición sincrónica obliga al navegador a esperar a que llegue la respuesta rechazando cualquier interacción que realice el usuario, por otro lado, una operación asincrónica ocurre de fondo, permitiendo que se ejecuten otros scripts y que el usuario tenga acceso a su navegador. Es recomendable usar peticiones asincrónicas. Open(), también puede recibir 2 argumentos mas, los cuales son nombre de usuario y contraseña, los cuales se usan para acceder a URLs que están protegidas por contraseña.

    Luego que se inició la conexión, el método send() activará la conexión y hará la petición. Send() tomará un argumento permitiendo que se envíen datos extra, como variables CGI.

    requester.send();


    Debido a que Internet Explorer los trata como opcional a los parámetros, pero firefox (por ejemplo) no, si no se le pasa ningún parámetro lanzará un error, es conveniente hacer

    requester.send(null);


    Por ejemplo, si queremos enviar variables por el método GET, se puede usar:

               requester.open("GET", "/query.cgi?name=Bob&email=bob@example.com");

    requester.send(null);

    En cambio, si se quiere hacer por POST, se puede usar:

                           requester.open("POST", "/query.cgi");

    requester.send(name=Bob&email=bob@example.com);


    Luego de la llamada a send(), el XMLHttpRequest contactará al servidor y traerá los datos de vuelta, como éste proceso puede tomar un tiempo indefinido, debemos usar un método listener. En caso de XMLHttpRequest necesitamos escuchar los cambios de las variables readyState. Ésta variable especifica el estado de la conexión  y puede tomar cualquiera de éstos valores:

    0.      Sin iniciar

    1.      Cargando

    2.      Cargado

    3.      Interactivo

    4.      Terminado

    Los cambios en la variable readyState, pueden ser monitorizados mediante un listener especial onreadystatechange, por lo que necesitamos una función que maneje cuando readyState cambie:

    requester.onreadystatechange = stateHandler;


                  Una vez que la petición es respondida con éxito, 2 características del objeto XMLHttpRequest pueden tener datos:

    p   responseXML: almacena un objeto DOM-estructurado de cualquier dato XML que fuera recuperado por el objeto. Este objeto es navegable usando el estándar JavaScript DOM para acceder a los atributos y métodos, por ejemplo getElementsByTagName(), childNodes[ ] y parentNode.

    p   responseText: almacena los datos como un string completo. Si el tipo contenido de los datos provistos por el servidor son texto plano o texto html, entonces ésta es la única propiedad que contendrá datos. Una copia de cualquier dato de text/xml será aplanada y puesta aquí como alternativa a responseXML.

    Dependiendo de la complejidad de los datos pedidos, uno puede usar uno u otro.


Tema: Programación

'AJAX' aparece también en las siguientes entradas:


¿Mejoramos la definición?
Puntos: 0( 0 votos)



Publicado el 7/07/2018.