Ajax permite mandar y recibir datos de manera asincrona
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 26
Visitas el mes pasado: 53
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
Esta página es continuación de la página anterior donde hemos creado un objeto (ObjetoAjax) para trabajar con ajax.
En la página anterior hemos creado el objeto ObjetoAjax, el cual de momento no tiene más que la propiedad .objeto que nos devuelve el objeto XMLHttpRequest.
En esta página vamos a crear un método para este objeto que nos devuelva un archivo de texto ya insertado en la página.
A este método le pasaremos dos parámetros: la ruta del archivo o url y el "id" de la página donde debe ser insertado el archivo.
Para crear el método en primer lugar abrimos el archivo objetoAjax.js en el editor de textos, y en la función constructora le añadimos la siguiente línea:
function ObjetoAjax () {
var nuevoajax=creaObjetoAjax()
this.objeto=nuevoajax;
this.pedirTexto=pedirTextoAjax;
}
El nuevo código insertado está resaltado en negrita y color azul oscuro, mientras que el código antiguo sigue en su forma habitual. A partir de ahora lo haremos así cuando insertemos nuevo código en un archivo ya existente.
Ahora necesitamos crear la función que define lo que tiene que hacer el nuevo método que hemos puesto. Por lo tanto al final del archivo objetoAjax.js incluiremos la siguiente función:
//función para el método objeto.pedirTexto(url,id) function pedirTextoAjax(url,id) { //Crear objeto XMLHttpRequest var nuevoajax=this.objeto; //Lugar de la página donde se inserta el objeto. var idajax=id; //preparar el envio: método open nuevoajax.open("GET",url,true); //Devolver el archivo cuando éste se haya cargado nuevoajax.onreadystatechange=function () { if (nuevoajax.readyState==4 && nuevoajax.status==200) { var textoAjax=nuevoajax.responseText; document.getElementById(idajax).innerHTML=textoAjax; } } nuevoajax.send(); //enviar }
Vamos a comentar algunos aspectos del código anterior:
Para crear el objeto XMLHttpRequest llamamos a la propiedad del mismo objeto que lo crea (this.objeto). Esta la guardamos en una variable, ya que si no es así, no podemos pasarlo luego a la función anónima que creamos más tarde.
El parámetro id también lo guardamos en una variable para poder pasarlo a la función anónima.
El evento onreadystatechange que en ocasiones anteriores lo igualabamos al nombre de una función, lo igualamos aquí a la función en sí misma, es decir a una función anónima que nos resuelve lo que se debe hacer al cargarse el archivo; lo cual no es otra cosa que recoger la respuesta con responseText y mostrarla en el "id" indicado.
Por último enviamos la petición mediante el método send()
Una vez que hemos acabado el archivo, en la página, pondremos un link hacia el mismo, y después no tenemos más que instanciar el objeto y llamar al nuevo método para que nos devuelva el archivo de texto mediante ajax.
archivo=new ObjetoAjax()
archivo.pedirTexto("ejemplo2.txt","contenedor")
Tras instanciar el objeto escribimos el nuevo método al que le pasamos como parámetros la URL del archivo de texto, y el id en el que éste debe visualizarse.
Por si hubiera aguna duda vemos ahora cómo queda el archivo objetoAjax.js tras las últimas modificaciones.
//crear objeto XMLHttpRequest function creaObjetoAjax () { var obj; //variable que recogerá el objeto if (window.XMLHttpRequest) { //código para mayoría de navegadores obj=new XMLHttpRequest(); } else { //para IE 5 y IE 6 obj=new ActiveXObject(Microsoft.XMLHTTP); } return obj; //devolvemos objeto } //función constructora del objeto: function ObjetoAjax () { var nuevoajax=creaObjetoAjax() this.objeto=nuevoajax; this.pedirTexto=pedirTextoAjax; } //función para el método objeto.pedirTexto(url,id) function pedirTextoAjax(url,id) { var nuevoajax=this.objeto; var idajax=id; nuevoajax.open("GET",url,true); nuevoajax.onreadystatechange=function () { if (nuevoajax.readyState==4 && nuevoajax.status==200) { var textoAjax=nuevoajax.responseText; document.getElementById(idajax).innerHTML=textoAjax; } } nuevoajax.send(); }
Hemos variado un poco el archivo respecto al que teníamos en la página anterior. Aquí la función constructora ObjetoAjax la hemos puesto después de la función que crea el XMLHttpRequest. Esto es algo que no afecta al funcionamiento de Ajax, pero así damos más claridad al código.
Vamos a ver ahora un ejemplo en el que veremos lo fácil que resulta insertar archivos de texto utilizando el objeto ObjetoAjax. En Este ejemplo vamos poner dos archivos de texto, los cuales podrán verse u ocultarse mediante botones. Utilizamos aquí los archivos que ya tenemos de ejemplos anteriores de este manual.
El primer archivo de texto es ejemplo1.txt:
Archivo de texto de prueba, para insertarlo con ajax.
El segundo archivo de texto es ejemplo2.txt:
Este es otro archivo de texto que podemos subir tambien con ajax.
Ahora crearemos el archivo HTML con el código javascript que inserta los archivos de texto anteriores:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ejemplo 3</title>
<script type="text/javascript" src="objetoAjax.js"></script>
<script type="text/javascript">
function verarchivo1() { //función para ver archivo 1
pagina =new ObjetoAjax(); //instanciamos el objeto
pagina.pedirTexto("ejemplo1.txt","cont1") //metodo para visualizar archivo
}
function ocultararchivo1(){ //volver al estado inicial
document.getElementById("cont1").innerHTML="Archivo 1 oculto";
}
function verarchivo2() { //función para ver archivo 2
pagina =new ObjetoAjax();
pagina.pedirTexto("ejemplo2.txt","cont2")
}
function ocultararchivo2(){
document.getElementById("cont2").innerHTML="Archivo 2 oculto";
}
</script>
</head>
<body>
<h1>Crear y utilizar objetoAjax para cargar archivos</h1>
<h3><input type="button" onclick="verarchivo1()" value="Ver Archivo 1">
<input type="button" onclick="ocultararchivo1()" value="Ocultar Archivo 1"></h3>
<h3><input type="button" onclick="verarchivo2()" value="Ver Archivo 2">
<input type="button" onclick="ocultararchivo2()" value="Ocultar Archivo 2"></h3>
<p id="cont1">Archivo 1 oculto</p>
<p id="cont2">Archivo 2 oculto</p>
</body>
</html>
Comprobamos el resultado en el navegador, y el archivo nos quedará como en el siguiente enlace.
Observa el código javascript, y ves que simplemente con instanciar el objeto y llamar al método pedirTexto() insertamos los archivos en el lugar indicado.
En la siguiente página crearemos un método en el objeto ObjetoAjax para insertar archivos XML con ajax.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com