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: 234

Visitas el mes pasado: 408

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 (II)

Insertar texto

imagen ajax

Tipos de archivo

Con ajax podemos obtener datos de dos tipos de archivos: de archivos de texto, o de archivos XML. Obtener datos de un archivo de texto es en realidad obtener el texto entero del archivo. Como veremos más adelante podemos aplicar la forma de obtener datos como archivo de texto para otro tipo de archivos, los cuales se insertarán en la página como si se insertara un texto.


Ejemplo de archivo

Para ver el funcionamiento de ajax empezaremos por un ejemplo sencillo, en el cual creamos un archivo de texto plano, tipo .txt; por ejemplo tenemos el archivo de texto:

Archivo de texto de prueba, 
para insertarlo con ajax.

Este archivo lo guardamos con el nombre ejemplo1.txt .

A continuación creamos la página HTML. Creamos una página entera exceptuando el código javascript. El código javascript lo pondremos a medida que lo vayamos explicando. La página de momento la tendremos así:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ejemplo1</title>
<script type="text/javascript">
//...codigo javascript que incorporaremos mas tarde ... 
</script>
</head>
<body>
<h1>Ver archivo con ajax</h1>
<form action="#">
<p><input type="button" value="Ver texto" onclick="verTexto()" />
   <input type="button" value="Ocultar texto" onclick="ocultarTexto()" />  
</p>
</form>
<div id="respuesta"></div>
</body>
</html>

Dejamos el código javascript sin poner, ya que lo iremos explicando más adelante. En el body ponemos dos botones de formulario, que mediante el evento onclick nos permitirán ver u ocultar el texto del archivo de texto. Más adelante crearemos las funciones javascript verTexto y ocultarTexto() asociadas a estos eventos. el div id="respuesta" que de momento está vacío, será donde visualizaremos el archivo de texto.


Crear el objeto XMLHttpRequest

El primer paso para poder incorporar el archivo de texto (.txt) en la página, es crear mediante javascript el objeto XMLHttpRequest. Si has seguido el manual de DOM, en su página Acceso al DOM en XML hemos utilizado este objeto. Su uso aquí es prácticamente igual. Aquí el código para crear el objeto lo pondremos dentro de una función:

function creaObjetoAjax () {
         var obj;
         if (window.XMLHttpRequest) {
            obj=new XMLHttpRequest();
            }
         else {
            obj=new ActiveXObject(Microsoft.XMLHTTP);
            }
         return obj;
         }

La función devuelve un objeto XMLHttpRequest. Veamos los pasos que hemos dado para crear esta función:

La función anterior crea el objeto XMLHttpRequest. El siguiente paso será incorporarlo a la página para lo cual sólo tenemos que llamar a la función con la siguiente línea javascript:

docTxt=creaObjetoAjax();


Petición y respuesta

Una vez obtenido el objeto (en este caso docTxt) realizamos una petición al servidor mediante el método open:

docTxt.open("GET","ejemplo1.txt",true);

Este método tiene varios parámetros, sólo los dos primeros son obligatorios.

El primero indica el modo en que se realiza la petición. Existen dos modos, éstos son "GET" y "POST". "GET" es el más sencillo, y recoge el archivo sin modificaciones, si bien para archivos de gran tamaño o que precisan modificación, es mejor usar el método "POST".

El segúndo parámetro también obligatorio indica la ruta o URL donde está el archivo. Este debe estar en el mismo servidor que la página HTML de salida, es decir, no podemos coger archivos de otros sitios que no sean el nuestro.

El tercer parámetro es opcional, y es un valor booleano que indica si la transmisión de datos se hára de forma asincrona (true) o de forma sincrona (false), su valor por defecto es true. Como ajax por definición trabaja de forma asincrona su valor debe ser siempre true.

El segundo paso es indicar la función de respuesta, es decir se indica a qué función debe devolverse el objeto una vez que ya esté cargado el archivo de texto. Para ello utilizamos el evento onreadystatechange al que le asignamos como valor el nombre de la función.

Este evento es propio del objeto XMLHttpRequest y activa la función indicada cada vez que cambia el estado de carga del objeto. Veremos esto más adelante.

Indicaremos como función de respuesta la función leerArchivo() la cual crearemos más adelante. De momento incorporamos la siguiente línea al código:

docTxt.onreadystatechange=leerArchivo;

La función (leerArchivo) se escribe sin paréntesis, ya que de otro modo se interpretaría que queremos obtener el valor de retorno de la función.

Enviar la petición : Éste es el siguiente paso. para ello utilizamos el método send(). Como hemos usado "GET" en el método open, lo pondremos sin parámetros.

docTxt.send();

El código escrito hasta ahora después de la función creaObjetoAjax() será el siguiente:

docTxt=creaObjetoAjax();
docTxt.open("GET","ejemplo1.txt",true);
docTxt.onreadystatechange=leerArchivo;
docTxt.send();


Recibir la petición

El evento onreadystatechange envía el objeto XMLHttpRequest a la función leerArchivo cada vez que se produce un cambio en la carga del archivo de texto. Para recoger el archivo cuando éste esté cargado, la función será la siguiente:

function leerArchivo() { 
         if (docTxt.readyState == 4 && docTxt.status == 200) {
             texto=docTxt.responseText;
             }
         }

En esta función utilizamos otras propiedades del objeto XMLHttpRequest, las dos primeras comprueban que el objeto se ha cargado completamente de forma correcta:

Mediante docTxt.readyState == 4 comprobamos que la página se ha cargado completamente.

Mediante docTxt.readyStatus == 200 comprobamos que se ha encontrado la ruta URL hacia la página.

Poe último mediante texto=docTxt.responseText almacenamos el contenido del archivo de texto (es decir, el texto en sí) en la variable texto.

En páginas posteriores veremos más a fondo los métodos y propiedades de XMLHttpRequest, de momento para crear la página nos vale con esto.


Visualizar los datos en la página.

Tenemos el archivo de texto en la variable texto, y ya sólo nos falta sacar estos datos en la página. En el código HTML hemos puesto dos botones de formulario con unos eventos onclick para poder ver u ocultar el texto del archivo. Tambièn hemos puesto un div id="respuesta" donde poder visualizarlo. Ya sólo nos queda escribir el código de las funciones asociadas a los eventos para mostrar u ocultar el texto. Este será el siguiente:

function verTexto() {
         ver=document.getElementById("respuesta");
         ver.innerHTML=texto;
         }
function ocultarTexto() {
         nover=document.getElementById("respuesta");
         nover.innerHTML="";
         }


Resumen del ejemplo

Tenemos ya la página completa en la que mostramos mediante ajax el contenido de un archivo de texto. Por si nos hemos dejado algo mostramos aquí el código javascript completo con comentarios:

//Creamos el objeto XMLHttpRequest mediante una función:
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
         }
docTxt=creaObjetoAjax(); //llamar a funcion crear objeto.
docTxt.open("GET","ejemplo1.txt",true); //preparar petición del objeto
docTxt.onreadystatechange=leerArchivo; //indicar dónde recoger la respuesta
docTxt.send() //enviar petición
//función que recoge la respuesta para poder utilizarla
function leerArchivo() {  
         if (docTxt.readyState == 4) { //Comprobar carga página
            if (docTxt.status == 200) { //Comprobar URL
               texto=docTxt.responseText; //Recoger texto
               }
            }
         }
//función para botón "Ver texto"
function verTexto() {
         ver=document.getElementById("respuesta");
         ver.innerHTML=texto;
         }
//función para botón "Ocultar texto"			 
function ocultarTexto() {
         nover=document.getElementById("respuesta");
         nover.innerHTML="";
         }

La página HTML de ejemplo quedará como en el siguiente enlace:

ejemplo ajax 1.





En la siguiente página veremos más detenidamente el objeto XMLHttpRequest

Objeto XMLHttpRequest



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