Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Ajax

Ajax permite mandar y recibir datos de manera asincrona

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

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

Archivo objetoAjax.js completo

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.

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

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