No se olvide que para el manejo de lo que yo llamaría ingenieria AJAX toda la información que llega se actualiza dentro de la pagina que utiliza la ingenieria AJAX en este caso, el que utiliza el javascript ajax.js, "ahi es donde se actualizará toda esta información que trabajamos aqui".
este variable contendra la informacion a la que haremos la petición para que nos entregue datos,
esto es en realidad la direccion de una pagina.
var DireccionRecibir = "listador_ajax1.fautapo";
Con esta funcion estamos llamando a esa pagina que se cargue de forma asincrona.
FUNCION NECESARIA PARA QUE LA HERRAMIENTA AJAX HAGA SU TRABAJO DE PETICIÓN(ES RECURSIVA)
function cargarTexto() {
if (httpTextoRecibido.readyState == 4 || httpTextoRecibido.readyState == 0) {
httpTextoRecibido.open("GET",DireccionRecibir + '?id_pais=' + pais.value, true);
httpTextoRecibido.onreadystatechange = manejoTextoRecibido;
httpTextoRecibido.send(null);
}
}
Una vez llamado al procedimiento que hace mas que todo traer TODA LA ACTUALIZACION NECESARIA solo queda armarla para mostrar dentro de la pagina ese metodo se encuentra aqui.
esto lo que hace es recoger datos que estan en un formato XML bueno es una forma de decir que uno da sus propios nombres a sus "tags" y sabe como reconocerlos con esta funcion
en este caso los tag del xml se llaman:
con esta funcion hacemos, rescatamos los datos que pedimos a esa pagina listador_ajax1.fautapo de acuerdo a los GET(parametro id_pais) que enviamos.
ESTO RESCATA LOS DATOS DE LA PAGINA DE LA QUE HACE LA PETICION
function manejoTextoRecibido() {
httpTextoRecibido.overrideMimeType('text/xml');
if (httpTextoRecibido.readyState == 4) {
oDocumento = httpTextoRecibido.responseXML.documentElement;
for (i=0;i< oDocumento.getElementsByTagName('id_pais').length;i++) {
var id_pais = oDocumento.getElementsByTagName('id_pais').item(i).firstChild.data;
var id_departamento = oDocumento.getElementsByTagName('id_departamento').item(i).firstChild.data;
var departamento = oDocumento.getElementsByTagName('departamento').item(i).firstChild.data;
insertarContenido(id_pais,id_departamento,departamento);
}
}
}
Y finalmente diseñarlo para mostrar con la siguiente funcion, en la que se muestra que se arma una tabla. bueno no piense que se necesitaria mucho diseño si no se tiene practica. asi que si desean solo llamen a un objeto y pongan toda esa informacion.
ESTO HACE EL DISEÑO DE LOS DATOS PARA LA PRESENTACIÓN
function insertarContenido(id_pais,id_departamento,departamento) {
insertO = document.getElementById("pais");
fililla = document.createElement("tr");
celdilla = document.createElement("td");
textillo = document.createTextNode(id_pais);
celdilla.appendChild(textillo);
fililla.appendChild(celdilla);
celdilla = document.createElement("td");
textillo = document.createTextNode(id_departamento);
celdilla.appendChild(textillo);
fililla.appendChild(celdilla);
celdilla = document.createElement("td");
textillo = document.createTextNode(departamento);
celdilla.appendChild(textillo);
fililla.appendChild(celdilla);
insertO.appendChild(fililla);
}
bueno espero haberme hecho comprender.
esito nomas seria :D
