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.



AJAX (III)

Objeto XMLHttpRequest

Definición

Este objeto es fundamental para la programación con ajax. Podríamos decir que ajax consiste sobre todo en aprovechar, mediante varios lenguajes de programación, todas las posibilidades que tiene este objeto.

La wikipedia define este objeto como "una interfaz empleada para realizar peticiones HTTP y HTTPS a servidores Web", es decir el objeto nos permite la transferecia de datos desde la página al servidor y viceversa.

Por tanto nos sirve tanto para incorporar datos en la página que tengamos en otros archivos del servidor, como para mandar datos de la página al servidor, y todo esto de forma asíncrona.

La diferencia entre utilizar XMLHttpRequest o simplemente utilizar PHP es que XMLHttpRequest permite mandar los datos en segundo plano, sin tener que parar el flujo de la página mientras se envian o reciben los datos.

XMLHttpRequest es creado por Microsoft y aparece por primera vez como un objeto ActiveX (Microsoft.XMLHTTP), en Internet Explorer 5. posteriormente se incorpora al resto de navegadores como XMLHttpRequest. Internet Explorer también usa esta forma a partir de la version 7.

El objeto XMLHttpRequest está incorporado de forma nativa a la mayoría de navegadores, por lo que en javascript depende directamente del objeto window.

En la página anterior vimos un ejemplo de cómo usar este objeto para obtener información de un archivo de texto del servidor. Sin embargo quedaron bastantes cosas por explicar. Vamos a ver a continuación las propiedades, métodos y eventos de este objeto.

Propiedades de XMLHttpRequest

• readyState : Esta propiedad devuelve un número que indica el estado de la carga del documento. según sea el estado de la carga nos devolverá los siguientes números: 0.- Sin inicializar, 1.- inicializado, 2.- Cabeceras recibidas, 3.- Cargando 4.- Completado.
• responseBody : Devuelve la respuesta como un array de bytes.
• responseText : Devuelve la respuesta como una cadena de texto.
• responseXML : Devuelve la respuesta como un archivo XML que puede ser examinado mediante los métodos y propiedades del DOM.
• status : Devuelve el código de estado de la URL solicitada. Los valores más comunes son los siguientes: 200.- Acceso correcto a la página; 404.- Solicitud incorrecta, no se puede encontrar la página. 500.- Error interno que no permite ver la página. La lista completa de valores para el código de estado la puedes consultar en Wikipedia--Códigos de estado HTTP.
• statusText : Al igual que el anterior devuelve el código de estado de la URL solicitada, pero no con un número sino con una cadena de texto (en inglés), "OK", "Not Found", "Internal Server Error", etc.

métodos de XMLHttpRequest

• abort() : Detiene la petición actual.
• getAllResponseHeaders() : Devuelve una cadena de texto con todas las cabeceras de la respuesta del servidor. Para usarlo el valor del estado de carga (readyState) debe ser 3 ó 4.
• getResponseHeader(nombreCabecera) : Devuelve en una cadena de texto la cabecera de la respuesta del servidor indicada en el parámetro. Para usarlo el valor del estado de carga (readyState) debe ser 3 ó 4.
• open("método","url",["sincronia","usuario","contraseña"]) : Este método es el que indica cual y cómo es la petición que debe hacerse al servidor, para ello dispone de hasta cinco parámetros. Sólo los dos primeros son obligatorios. Estos son:
• "método" : Es la forma en la que se transmiten los datos. Esta puede tener los valores "GET" o "POST". El método "GET" permite al navegador guardar los datos tal como los recibe, mientras que "POST" permite modificar los datos o descargarlos más adelante. Lo escribiremos entre comillas.
• "url" : es la ruta en la que está el archivo con el que intercambiamos datos. Debemos ponerla entre comillas como una cadena de texto o pasarlo por una variable. El archivo de datos y la página de respuesta deben estar dentro del mismo servidor.

• "sincronia" : Indica mediante un valor booleano si la transmisión de datos se realiza de forma asincrona (true) o sincrona (false). Por definición en ajax debemos usar la forma asincrona (true), que es el valor por defecto.
• "usuario" : Opcionalmente podemos poner un nombre de usuario para la autentificación.
• "contraseña" : Opcionalmente podemos poner también una contraseña para la autentificación.
• send("datos") : Envia la petición al servidor. En el parámetro enviaremos los datos al servidor cuando usemos el metodo de transmisión "POST". El método send() debe ir después del metodo open(). Si no se enviá ningún dato con "POST" se recomienda usar el valor null. como parámetro. Con "GET" no se deben enviar parámetros.
• setRequestHeader( etiqueta, valor) : Añade una nueva cabecera a la página. Esta consta de una etiqueta y un valor. La etiqueta no puede contener espacios, puntos o saltos de línea, ni ser alguna de las palabras clave para otras etiquetas. El valor no puede contener saltos de línea. Este método sólo puede usarse cuando el valor de readyState sea 0 ó 1.

Eventos en XMLHttpRequest

Los eventos son elementos que indican qué debe hacer la página al producirse un cambio en la petición de XMLHttpRequest. El evento indica el cambio que se produce. Lo que debe hacer la página se lo indicamos mediante una función que se asocia al evento.

Para asociar la función al evento podemos escribir el nombre de dicha función como el valor del mismo, o crear una función anónima dependiente del evento. por ejemplo:

doc.onabort=funcionCancelado

donde funcionCancelado es una función que indica los cambios que se harán cuando se produzca el evento. O podemos usar también una función anónima:

doc.onabort=function() { .. }

creamos directamente la función que indica lo que debe hacer la página al producirse el evento.

Los eventos de XMLHttpRequest son:

• onreadystatechange : Se produce cada vez que hay un cambio en el estado de carga del documento. de ahí que se use para saber cuándo se ha cargado el documento completamente, entre otras cosas.
• onabort : se produce cuando se interrumpe la carga del documento, normalmente mediante el método abort().
• onload : se produce cuando el documento se ha cargado completamente.
• onloadstart : se produce cuando comienza la carga del documento.
• onprogress : se produce mientras el documento se está cargando.

---

En la siguiente página veremos cómo crear un archivo javascript para iniciar el objeto XMLHttpRequest

Archivo estándar

Página creada por ANYELGUTI.

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