Entendido.

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

Logo

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

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 70

Visitas el mes pasado: 69

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Curso de ajax
ProgramacionWeb.net
Ajax Tutorial
w3schools.com
Manual de Ajax, Juan Mariano Fuentes (en PDF)
elrincondeajax.com
Taller Ajax
Desarrollo Web
Turorial de Ajax
cristalab.com
Introduccción a Ajax - Javier Eguíluz Pérez
librosweb.es
mini tutorial de Ajax
Bog de Ale Muñoz en Sofa Naranja.
Using POST method in XMLHTTPRequest
Artículo de openjs.com
Tip Para Solucionar Problema con Acentos al Utilizar AJAX
webadictos.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




AJAX (V)

Petición de texto

imagen ajax

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.

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.

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 de Ajax

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com