La idea de usar Ajax es realizar una petición asíncrona a un archivo en el lado del servidor y que esta nos devuelva una respuesta a dicha petición con la cual realizaremos determinadas acciones. Para empezar, debes de tener tu función Ajax aunque podrías hacer esto por cada vez que requieras hacer una petición asíncrona, pero teniendo todo el proceso en una función, puedes reutilizar el código.
Código Javascript
:
Ver originalvar ajax = function(url){
var xhr = window.XMLHttpRequest ?
new XMLHttpRequest() :
new ActiveXObject("Microsoft.XMLHTTP") ||
new ActiveXObject("Msxml2.XMLHTTP");
xhr.open("GET", url, true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
switch (xhr.status){
case 200:
var respuesta = xhr.responseText;
//Aquí realizarás las acciones que desees con la respuesta
break;
case 404:
alert("Error 404 not found");
break;
default:
alert("Se ha producido un error: " + xhr.status);
break;
}
}
};
xhr.send(null);
};
ajax("ejemplo.jsp");
Lo primero que hago es declarar a la función Ajax, la cual recibe como parámetro a la variable
url
que deberá de contener el nombre del archivo al que queremos realizar la petición. Dentro de la función, creo mi objeto XHR, abro la petición y cuando cambie el estado de la misma, realizo determinadas acciones. Como no estamos enviando datos para realizar la petición, al método
send
le damos
null
como argumento, aunque también podrías dejar en blanco el interior de los paréntesis. Cuando el estado de carga de la petición sea 4, sabremos que ya obtuvimos una respuesta del servidor (carga completa). Luego, esta respuesta puede tener uno de varios estados, el más importante es el estado 200 el cual indica que la respuesta ha sido satisfactoria, mientras que los otros estados indican errores que se produjeron. Cuando obtengamos dicho estado (200), ya podremos realizar las acciones que deseemos con dicha respuesta, para lo cual, en tu archivo JSP deberás de imprimir una respuesta a la petición, por ejemplo, listar los registros encontrados en la BD, luego, eso podrías colocarlo dentro de un
<div>
o en donde desees.
Saludos