martes, 8 de enero de 2008

AJAX de forma simple

Es imposible negar la necesidad de utilizar AJAX para brindar mayor usabilidad a las aplicaciones, y es justamente AJAX lo que necesitamos para obtener o enviar datos al servidor sin necesitad de refrescar la pantalla.

Es muy simple, primero que nada se debe obtener una instancia del objeto XMLHttpRequest, con el cual se realizan las solicitudes al servidor, a continuación incluyo un fragmento de código que permite obtener esta instancia independientemente del browser que utilize el cliente:


if (window.XMLHttpRequest) {
// browser has native support for XMLHttpRequest object
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// try XMLHTTP ActiveX (Internet Explorer) version
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
http_request = null;
}
}
}

Una vez que tenemos el objeto XMLHttpRequest, ya podemos hacer la solicitud al servidor de la siguiente forma:

http_request.open('POST', "myServlet.do?action=getMoreData", false);
http_request.setRequestHeader("content-type","application/x-www-form-urlencoded");
http_request.send("parametro1=valor1¶metro2=valor2");

En la primer línea indicamos hacia donde hacemos el submit, con qué metodo, en este caso, POST y si es sincrónico o no.
En la segunda linea, se indica el tipo de contenido que enviaremos.
Y por último datos a pasar por el request.

Por último, solo se necesita procesar el resultado:

if (http_request.readyState == 4) {
if (http_request.status == 200) {
if(http_request.responseText != "ERROR"){
//Aqui se debe incluir el código para procesar el resultado
} else {
//OCURRIO UN ERROR
alert(http_request.responseText);
}
} else {
alert("Could not contact the server.");
}
}

Espero les sea útil.

No hay comentarios: