JQuery y Ajax

Cualquier librería actual que se precie debe tener un soporte completo de ajax, de la facilidad con la que maneje este importante y vital tarea vendrá buena parte de su éxito. Vamos a estudiar el soporte que tiene JQuery de ajax y como se desenvuelve en esta tarea.

Veamos como podemos lanzar una petición ajax directamente empleando sólo javascript

Para iniciar nuestro objeto ajax debemos emplear este código


var ajax;
if(window.XMLHttpRequest)
{
ajax = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
else
{
throw new Error("Este navegador no soporta ajax");
}

Es más complejo de lo que debería debido al soporte no estandar que le dio Microsoft es un navegador. A fin de cuentas Microsoft fue quien primero desarrollo esta tecnología.

Después de que la instancia ajax haya sido creada esta tiene una serie de métodos y propiedades que la dotan de funcionalidad. Todos los navegadores que soportan este objeto ajax tiene todos estos métodos/propiedades:

Métodos:

abort()
getAllResponseHeaders()
getResponseHeader(name)
open(method, url, async, username, password)
send(content)
setRequestHeader(name,value)

Propiedades:

onreadystatechange
readyState
reponseText
responseXML
status
statusText

Para lanzar una petición ajax debemos indicar el método a utilizar get o post, la URL a la que lanzar la petición, el cuerpo del mensaje si se trata de una petición POST (en el POST la información a enviar no viaja en la cabecera HTTP como con el método GET), si deseamos que la petición sea sincrona o no, autentificación si la URL lo precisa y una función callback para informar del progreso de la petición ajax.

el método open nos permite informar de la mayor parte de estos parámetros

ajax.open(‘GET’,’/url’);

Este método no lanza la petición, sólo la prepara

open(metodo,url,asincrono,usuario,password);

metodo – HTTP empleado, GET o POST, indica el tipo de formato empleado en la petición.
url – La url a solicitar.
asincrono – La petición debe ser asincrona, valor por defecto true, (no detiene la ejecución, básico en ajax) o sincrona (detiene ejecución hasta que se completa la tarea) valor a false.
usuario – Proporciona el usuario si es necesaria la autentificación.
password – Propociona un password si es necesaria la autentificación.

Ahora necesitamos informar cual será la función que se debe llamar cuando nuestra petición cambie de estado a través de la propiedad onreadystatechange. Debemos proporcionar una función para esta propiedad que será llamada varias veces después a medida que la petición ajax se vaya resolviendo para bien o para mal.

Podriamos definir esta función de esta manera

ajax.onreadystatechange = function ()
{
if(ajax.readyState == 4) //Estado terminado
{
if(ajax.status >= 200 && ajax.status < 300) //Sólo peticiones exitosas { // Código OK aquí } else //Peticiones que fallan { // Código de error aquí } } } Una cosa interesante, y muy desagradable, a tener en cuenta a la vista de este código es que la variable ajax es la del alcance global pero no es la variable pasada al controlador. Esto puede ser un problema si tenemos varias llamadas ajax activas simultáneamente. Tras hacer esto el último paso es lanzar la petición. Para ello llamamos al método send(content), cuyo parámetro es el contenido de la petición. Si es una petición GET no es preciso enviar nada
ajax.send(null);

En el caso de petición tipo POST debemos enviarle el contenido de la información que queremos enviar al servidor de manera debidamente formateada y URI-encoded, por ejemplo:

ajax.send(‘a=1&b=2&c=3’);

Como obtener la respuesta de la llamada

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *