Ajax permite mandar y recibir datos de manera asincrona
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 43
Visitas el mes pasado: 123
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
Mediante la propiedad responseText del objeto XMLHttpRequest podemos recoger texto no sólo de archivos de texto plano (.txt), sino de cualquier tipo de archivo que se escriba en texto. Por tanto podemos recoger archivos, ya sean de texto en sí o con un código de un lenguaje utilizado por los navegadores. Una vez obtenido el archivo se procederá a insertarlo tal cómo se inserta el tipo de archivo recogido.
En esta página veremos cómo insertar archivos con HTML y CSS. Utilizaremos el objeto ObjetoAjax creado en páginas anteriores, y en concreto el método pedirTexto() de este objeto.
Recuerda que en este método pasábamos como parámetros la url del archivo y el id donde debe insertarse. Y nos lo devolvía ya insertado mediante la propiedad innerHTML
Como la propiedad innerHTML interpreta el texto recibido como código HTML, podemos insertar archivos con trozos de código html dentro de la página utilizando esta propiedad. Veamos un ejemplo:
Este es el archivo que insertaremos al que llamaremos ejemplo5_doc.html:
<h2>Pagina oficial de Mortadelo</h2> <p><img src="objetos/mortadelo.gif" alt="Imagen de Mortadelo"> <p><a href="http://www.mortadeloyfilemon.com" target="_blank">Ver pagina.</a></p>
En el código HTML podemos poner cualquier cosa que se pueda poner con HTML, aquí hemos puesto una imagen y un enlace. Si quieres seguir el ejemplo y no tienes esta imagen puedes poner cualquier otra.
Como el código del archivo se inserta en la página no debemos ponerle cabeceras (etiquetas html, ni head ni body), sino simplemente el trozo de código HTML que queremos insertar.
Debemos poner también en el mismo directorio el archivo objetoAjax.js creado en páginas anteriores, y donde guardamos el ObjetoAjax.
A continuación creamos la página principal en la que insertaremos el archivo HTML, la cual llamaremos ejemplo5.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ver Archivo HTML</title>
<script type="text/javascript" src="objetoAjax.js"></script>
<script type="text/javascript">
function ver() {
pagina=new ObjetoAjax();
pagina.pedirTexto("ejemplo5_doc.html","contenido");
}
function ocultar() {
document.getElementById("contenido").innerHTML="Oculto ...";
}
</script>
</head>
<body>
<h1>Pulsa en los botones para ver u ocultar el archivo.</h1>
<p><input type="button" value="ver Archivo" onclick="ver()"/>
<input type="button" value="Ocultar Archivo" onclick="ocultar()"/>
<div id="contenido">Oculto ...</div>
</body>
</html>
El resultado de este ejemplo puedes verlo en el siguiente enlace.
El código es sencillo y no creo que tenga ningun tipo de dificultad, ya que el objeto ObjetoAjax nos facilita mucho el trabajo.
Siguiendo el mismo esquema que en el ejemplo anterior podemos insertar también archivos CSS. La clave está en insertar el código dentro de una etiqueta de estilo, a la que le pondremos un id:
<style type="text/css" id="contenido"></style>
El código es similar al ejemplo anterior, sólo que lo que cambiamos es el contenido de la etiqueta de estilo. Veamos un ejemplo, en el que el usuario puede elegir entre dos tipos de estilo para una página.
Para ello utilizaremos dos archivos CSS con los dos estilos que podemos darle a la página. Al primero de estos archivos lo llamaremos ejemplo6_1.css.
body { background-color:#ccffff ; } h1 { font: bold 2em arial; text-align: center; color: olive; } p { font: italic 0.9em verdana; color: navy; padding: 0.3em 3em; }
El segundo archivo css será el siguiente y lo llamaremos ejemplo6_2.css.
body { background-color:#ffccff ; } h1 { font: bold italic 2em "times new roman"; text-align: left; color:fuchsia ; padding: 0.1em 7em; } p { font: bold 1.1em "comic sans ms"; color: #990066; padding: 0.3em 3em; }
Y ahora veremos el archivo principal en el que tendremos la opción de insertar los estilos anteriores. lo llamaremos ejemplo6.html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Ejemplo 6</title> <script type="text/javascript" src="objetoAjax.js"></script> <script type="text/javascript"> function estilo1() { est1=new ObjetoAjax(); est1.pedirTexto("ejemplo6_1.css","cont_estilo"); document.getElementById("info").innerHTML="Página con estilo en AZUL"; } function estilo2() { est2=new ObjetoAjax(); est2.pedirTexto("ejemplo6_2.css","cont_estilo"); document.getElementById("info").innerHTML="Página con estilo en ROJO"; } function sinestilo() { document.getElementById("cont_estilo").innerHTML=""; document.getElementById("info").innerHTML="Esta página no tiene ningún estilo CSS."; } </script> <style type="text/css" id="cont_estilo"></style> </head> <body> <h1>Cambio de estilos con Ajax</h1> <p>Cambia el estilo de esta página con los botones de estilo.</p> <p id="info">Esta página no tiene ningún estilo CSS.</p> <form action="#"> <p><input type="button" value="Estilo 1: Azul." onclick="estilo1()"/> <input type="button" value="Estilo 2: Rojo." onclick="estilo2()"/> <input type="button" value="Sin estilo" onclick="sinestilo()"/> </form> </body> </html>
El resultado de este ejemplo podemos verlo en la página del siguiente enlace:
El funcionamiento es similar al del ejemplo anterior. Insertamos un archivo CSS igual que los archivos de texto. La clave está en que lo insertamos dentro de la etiqueta de estilo, con lo que el archivo es leído por el navegador como un archivo de estilo CSS.
En la siguiente página seguiremos viendo como insertar otros tipos de archivos, en concreto arcjhivos javascript y PHP
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com