Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

AJAX V

Petición de texto

planteamiento

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.

Creación del método

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 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.

Archivo objetoAjax.js completo

Por si hubiera aguna duda vemos ahora cómo queda el archivo objetoAjax.js tras las últimas modificaciones.

//crear abjeto 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(); 
     }	

Ejemplo de peticion de archivos con ObjetoAjax

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.

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>Page title</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.

Ejemplo 3

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.

Archivos XML



Manual Ajax

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo