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

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

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: 13-07-2018.

Visitas este mes: 43

Visitas el mes pasado: 123

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.

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

AJAX (VII)

Archivos HTML y CSS

Insertar archivos de distintos tipos

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

Archivos con código HTML

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.

Ejemplo 5

El código es sencillo y no creo que tenga ningun tipo de dificultad, ya que el objeto ObjetoAjax nos facilita mucho el trabajo.

Archivos CSS

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:

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:

Ejemplo 6

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

Insertar javascript y PHP

Manual de Ajax

Anterior siguiente ... Siguiente