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

Visitas el mes pasado: 368

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

Otros archivos

imagen ajax

Mas archivos de texto

Esta página es continuación de la anterior dentro del manual de Ajax, por lo que es conveniente para poder entenderla haber leído las páginas anteriores y seguir el manual.

Hasta ahora hemos tratado los archivos de texto para insertarlos en la página directamente; o archivos con trozos de código HTML, para insertarlos mediante un innerHTML. Sin embargo es posible que queramos guardar texto (o un trozo de código en formato de texto), para poder utilizarlo de otra forma. Es decir puede que lo que queramos es obtener el archivo en una variable, para poder modificarlo o utilizarlo de otra manera.

Para ello utilizaremos también el ObjetoAjax creado en páginas anteriores, al que le añadiremos un nuevo método que nos devuelva el archivo de texto en una variable. Haremos también dos ejemplos que utilicen este nuevo método.


Nuevo método para el objeto ObjetoAjax

El nuevo método para obtener el archivo de texto en una variable será muy similar al utilizado para obtener el DOM de los archivos XML. De hecho lo único que cambiamos es el método responseXML por el método responseText.

Para crear el nuevo método abrimos el archivo objetoAjax.js con el editor de textos, y en la función constructora añadimos una nueva línea:

//función constructora del objeto:			 
function ObjetoAjax () {
     var nuevoajax=creaObjetoAjax()
     this.objeto=nuevoajax;
     this.pedirTexto=pedirTextoAjax;
     this.cargaXML=cargarXML;
     this.cargaTexto=cargarTexto;
     }

En negrita y azul oscuro viene indicada la nueva línea que insertamos, que indica cómo se llamará el método.

Ahora en el mismo archivo creamos la función cargarTexto() que indica qué es lo que tiene que hacer el programa cuando se llame a este método.

function cargarTexto(url,funcion) {
     var nuevoajax=this.objeto; 
     var funcionTexto=funcion;
     nuevoajax.open("GET",url,true);
     nuevoajax.onreadystatechange=function() { 
        if (nuevoajax.readyState==4 && nuevoajax.status==200) {
           var nuevoTexto=nuevoajax.responseText; 
           funcionTexto(nuevoTexto);
           }
        }	
     nuevoajax.send();
     }

Para que el método funcione en la página, después de instanciar el objeto se llama al método cargaTexto, al cual le pasamos como parámetros la url del archivo y el nombre de una función que creamos luego.

Creamos a continuación la función indicada, a la cual le pondremos un parámetro, en el que recibiremos el texto del archivo.

ajax=new ObjetoAjax

ajax.cargaTexto("archivo.txt",funcionTexto);

function funcionTexto(miTexto) { ... }

El funcionamiento es similar al usado para los archivos XML. Instanciamos el objeto, llamamos al método, y creamos la función en la que recibimos como parámetro el archivo de texto. Para trabajar con el texto recibido debemos hacerlo dentro de la función (funcionTexto(miTexto)), ya que ésta se activa al recibir el texto del archivo.

Por si queremos ver cómo queda ahora el archivo objetoAjax.js tras esta modificación en el siguiente enlace se puede ver el código:

Código de objetoAjax.js (4)



Archivos javascript

Como un ejemplo de utilización del método anterior veremos cómo insertar un archivo con código javascript al ser llamado por ajax. Empezaremos por crear un archivo con código javascript al que llamaremos ejemplo7.js.

var mensajeAjax="Mensaje Javascript con Ajax";
alert(mensajeAjax);

Como ves es un archivo muy simple, pero para comprobar que el método funciona, y ver cómo podemos insertar javascript en la página es más que suficiente.

Ahora creamos la página HTML principal, en la que aparte del link al archivo objetoAjax.js, debemos poner el código javascript que inserte el archivo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ejemplo 7</title>
<script type="text/javascript" src="objetoAjax.js"></script>
<script type="text/javascript">
function ver() { //activar archivo javascript
    ajax=new ObjetoAjax(); //Instanciar el objeto
    ajax.cargaTexto("ejemplo7.js",recogeTexto); //aplicar nuevo método
    }
function recogeTexto(miarchivo) { //función que recoge archivo de texto.
    //el método eval convierte el texto en código javascript.
    eval(miarchivo);
    }
</script>
</head>
<body>
<h1>Insertar archivo javascript</h1>
<p><input type="button" value="Ver Alerta" onclick="ver()" /></p>
</body>
</html>

El resultado de este ejemplo puede verse en el siguiente enlace:

Ejemplo 7

Observa cómo la clave para introducir archivos javascript está en utilizar el método eval() que convierte el texto recibido en código javascript.


Cambiar imágenes

Si bien podemos introducir imágenes al introducir código HTML, aquí se trata de cambiar el contenido de una imagen por otra, es decir, lo que cambiamos es el valor del atributo src de la imagen.

Introduciremos en la página las dos imágenes que tenemos a la derecha. Después de guardarlas en una carpeta objetos, crearemos dos archivos de texto que contengan la ruta de cada una de ellas:

Archivo ejemplo8_1.txt :

objetos/mortadelo.gif

Archivo ejemplo8_2.txt :

objetos/Filemon.gif

A continuación creamos la página HTML donde podremos indicar mediante unos botones qué imagen desean ver nuestros visitantes. El archivo se llamará ejemplo8.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ejemplo 8</title>
<script type="text/javascript" src="objetoAjax4.js"></script>
<script type="text/javascript">
function imagen1() { //Ver imagen de mortadelo
    img1=new ObjetoAjax();
    img1.cargaTexto("ejemplo8_1.txt",cargaImagen);
    }
function imagen2() { //ver imagen de filemon
    img2=new ObjetoAjax();
    img2.cargaTexto("ejemplo8_2.txt",cargaImagen);
    }
function sinimagen() { //ocultar imágenes
    document.getElementById("cuadro").src="";
    }	
function cargaImagen(ruta) { //función que carga la imagen
    document.getElementById("cuadro").src=ruta;
    }
</script>
</head>
<body>
<h1>Diferentes imágenes con ajax</h1>
<p><input type="button" value="Mortadelo" onclick="imagen1()" />
   <input type="button" value="Filemon" onclick="imagen2()" />
   <input type="button" value="Sin Imagen" onclick="sinimagen()" /> </p>
<img id="cuadro" src="" alt="Sin Imagen" width="100" height="160" border="2">
</body>
</html>

El resultado de este ejemplo puede verse en el siguiente enlace:

Ejemplo 8


En este ejemplo haremos las siguientes observaciones:


Utilidad de este método

Lo hecho hasta aquí son sólo ejemplos para ver cómo insertar archivos con ajax. Puede que no sean muy prácticos, pero se trata de ver cómo podemos insertar archivos.

Podríamos haber insertado las imágenes directamente con javascript, sin usar archivos externos. Sin embargo imagina que tenemos un gran número de imágenes, y tenemos sus rutas guardadas en una base de datos. Debemos crear un archivo que busque la ruta de la imagen requerida y pueda enviarla. Esto podemos hacerlo usando un lenguaje de servidor como PHP. En este caso la utilidad de este método es evidente. Veremos esto en páginas posteriores.

Por otra parte no sólo podemos recoger datos como la ruta de una imagen sino otro tipo de datos que pueden emplearse para variar la página, como por ejemplo rutas de enlaces, estilo CSS de un elemento, etc. Sabiéndolo manejar un poco Ajax, las posibilidades que tenemos de modificar elementos dependen ya de nuestra imaginación.






Ajax no sólo puede recibir datos, sino también mandar datos al servidor. Para ello necesitamos utilizar el lenguaje del servidor para recibir datos (PHP en nuestro caso). Veremos cómo mandar y recibir datos mediante PHP.

Enviar datos con GET



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