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

Visitas el mes pasado: 238

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

crear el ObjetoAjax

imagen ajax

Crear un archivo estandar

El objeto XMLHttpRequest es parte fundamental de ajax. En cualquier página con ajax debemos crear este objeto y hacer una serie de operaciones para la transferencia de información.

Al crear el objeto y transferir la información hay un cierto código que se repite siempre en cualquier página con ajax. Para no tener que repetir este código innecesariamente crearemos un archivo estándar, que pueda realizar una serie de tareas comunes con ajax. El archivo consistirá en crear un objeto con una serie de propiedades y métodos que nos libren del trabajo repetitivo.


Planteamiento

Guardaremos el objeto en un archivo aparte de forma que con un link al archivo y una llamada a los métodos o propiedades del objeto tengamos ya, no sólo el objeto XMLHttpRequest disponible, sino también podamos tener transferido el archivo.

El funcionamiento en la página será el siguiente: primero insertamos el link al archivo que crea el objeto. Luego en el javascript de la página instanciamos el objeto y llamamos a los métodos o propiedades que necesitemos.

Utilizaremos Ajax como un nuevo objeto de javascript, en donde sus propiedades y métodos son los que nos permitirán hacer las operaciones que se hacen con Ajax simplemente instanciando un nuevo objeto para llamar a Ajax y llevarlo a la página con los métodos y propiedades.

Sobre la forma de crear nuevos objetos con Javascript, viene explicado mas detalladamente en el manual de jávascript, página 12.2 Crear objetos. Puedes mirar esta página si no entiendes bien lo que vamos a hacer aquí. El procedimiento es el mismo que viene ahí explicado.


Función constructora.

Crearemos primero el archivo objetoAjax.js que contendrá la función que crea el objeto XMLHttpRequest y la función constructora que nos lo devuelve como una propiedad del objeto "ObjetoAjax".

El archivo objetoAjax.js será el siguiente:

//Creamos un nuevo objeto javascript llamado ObjetoAjax
//función constructora.
function ObjetoAjax () {
     //recogemos el objeto XMLHttpRequest en una variable
     var nuevoajax=creaObjetoAjax();
     //devolvemos el XMLHttpRequest como una propiedad del objeto.
     this.objeto=nuevoajax;
     }
//Función para crear el objeto XMLHpptRequest.
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
     }

El código viene comentado para una mayor comprensión. Guardamos el código anterior en un archivo aparte llamado objetoAjax.js .

La primera función ObjetoAjax es la función constructora, y crea una nueva clase de objetos en Javascript. Iremos a lo largo de este manual añadiendo nuevos métodos y propiedades a este objeto.

Aquí hemos añadido la propiedad nuevoajax que nos devuelve el XMLHttpRequest.

La segunda función que ponemos en el código es la que crea el XMLHttpRequest, la cual es llamada en el código de la primera función para poder incorporarla como una propiedad del nuevo objeto.


Instanciar el objeto

Ahora al crear una página, para insertar un archivo mediante ajax, lo primero que haremos será poner en la cabecera del documento el link al archivo javascript que hemos creado anteriormente:

<script type="text/javascript" src="objetoAjax.js">

Y luego en el código javascript instanciamos el objeto y llamamos a su propiedad .objeto, en la cual recogemos el XMLHttpRequest.

pagina= new objetoAjax();

objetoRequest=pagina.objeto;

En el ejemplo la variable objetoRequest recoge el objeto XMLHttpRequest. Una vez recogido el objeto procedemos a transferir los datos mediante los métodos y propiedades de XMLHttpRequest. Veamos un ejemplo:

Creamos primero un archivo de texto con el siguiente contenido, que guardaremos con el nombre de ejemplo2.txt.

Este es otro archivo de texto que podemos subir tambien con ajax.

Y éste es el archivo HTML con código javascript donde insertamos el archivo de texto anterior al que llamaremos ejemplo2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ejemplo 2</title>
<script type="text/javascript" src="objetoAjax.js"></script>
<script type="text/javascript">
function verarchivo() { //al puusar el botón ...
    pagina =new ObjetoAjax(); //instanciamos el objeto
    ajax=pagina.objeto; //devolvemos el XMLHttpRequest
    ajax.open("GET","ejemplo2.txt",true); //preparamos envio
    //devolver texto al cargarse el archivo
    ajax.onreadystatechange=function() {  
       if (ajax.readyState==4 && ajax.status==200) {
          texto=ajax.responseText;
          document.getElementById("cont").innerHTML=texto;
          } 
       }
    ajax.send(); //enviar.
    }
</script>
</head>
<body>
<h1>Cargar un archivo mediante objetoAjax</h1>
<h3><input type="button" onclick="verarchivo()" value="Ver Archivo"></h3>
<!-- insertamos en el siguiente id el archivo de texto: -->
<p id="cont">insertar archivo:</p>
</body>
</html>

Comprobamos el archivo anterior en el navegador, el cual nos quedará como en el siguiente enlace:

Ejemplo 2


Ampliar el ObjetoAjax

Hasta ahora lo que hemos hecho es lo mismo que en la página anterior, pero en lugar de utilizar una función utilizamos un nuevo objeto. En principio puede parecer más complicado, ya que trabajar con objetos es más complicado que trabajar con funciones, pero veremos más adelante cómo el uso de un objeto para utilizar ajax puede simplificarnos bastante el trabajo.

Al trabajar con Ajax hay una serie de tareas repetitivas como pueden ser insertar un archivo de texto, subir archivos al servidor, etc. Estas pueden simplificarse bastante utilizando propiedades y métodos del objeto que hemos creado, de manera que el código javascript en el archivo sea mínimo.

Veremos esto en las siguientes páginas de este manual.


Nota: Si estás siguiendo el manual conviene guardar el archivo ObjetoAjax.js ya que lo iremos ampliando en las siguientes páginas.





En la siguiente página veremos cómo crear un método con el ObjetoAjax para insertar archivos de texto

Método para archivos de texto.



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