Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

AJAX IV

crear el ObjetoAjax

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.

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 .

Instanciar el objeto

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

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

Tenemos el siguiente archivo de texto, 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

El ObjetoAjax que hemos creado tiene de momento una sóla propiedad. la cual nos devuelve el objeto XMLHttpRequest. Sin embargo al trabajar con ajax hay una serie de tareas repetitivas como pueden ser insertar un archivo de texto, subir archivos al servidor, etc.

La mayoría de estas tareas podemos incluirlas como métodos o propiedades del ObjetoAjax, de manera que el código javascript en el archivo sea mínimo.

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







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 Ajax

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo