Ajax
Páginas: 17 (4056 palabras)
Publicado: 14 de agosto de 2010
5 - Objeto XMLHttpRequest
El objeto XMLHttpRequest es un elemento fundamental para la comunicación asincrónica con el servidor. Este objeto nos permite enviar y recibir información en formato XML y en general en cualquier formato (como vimos en el ejercicio anterior retornando un trozo de archivo HTML)
La creación de un objeto de esta clase varía si se trata del Internet Explorer deMicrosoft, ya que este no lo incorpora en JavaScript sino que se trata de una ActiveX:
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
En cambio en FireFox y otros navegadores lo incorpora JavaScript y procedemos para su creación de la siguiente manera:
if (window.XMLHttpRequest)
xmlHttp =new XMLHttpRequest();
Como hemos visto en el problema anterior siempre implementaremos una función que nos retorne un objeto XMLHttpRequest haciendo transparente el proceso en cuanto a navegador donde se esté ejecutando:
function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
Es decir la función crearXMLHttpRequest se encargará de retornarnos un objeto de la clase XMLHttpRequest.
Las propiedades principales del objeto XMLHttpRequest son:* onreadystatechange Almacena el nombre de la función que se ejecutará cuando el objeto XMLHttpRequest cambie de estado.
* readyState Almacena el estado del requerimiento hecho al servidor, pudiendo ser:
* 0 No inicializado (el método open no a sido llamado)
* 1 Cargando (se llamó al método open)
* 2 Cargado (se llamó al método send y ya tenemos la cabecera de lapetición HTTP y el status)
* 3 Interactivo (la propiedad responseText tiene datos parciales)
* 4 Completado (la propiedad responseText tiene todos los datos pedidos al servidor)
* responseText Almacena el string devuelto por el servidor, luego de haber hecho una petición.
* responseXML Similar a la anterior (responseText) con la diferencia que el string devuelto por elservidor se encuentra en formato XML.
Los métodos principales del objeto XMLHttpRequest son:
* open Abre un requerimiento HTTP al servidor.
* send Envía el requerimiento al servidor.
Confeccionaremos otro problema para fijar conceptos vistos hasta el momento.
Confeccionar una página que muestre una imagen y permita calificarla con un valor entre 1 y 10. Permitir ingresar el nombre delvisitante. Disponer de un control de tipo select para seleccionar el valor. Luego al presionar un botón enviar el valor seleccionado utilizando el objeto XMLHttpRequest al servidor donde almacenaremos en un archivo de texto el nombre del visitante y el puntaje. Retornar luego todos los votos hasta el momento. Actualizaremos la página HTML con todos los nombres y votos hasta el momento.
Elarchivo HTML es:
pagina1.html
-------------------------------------------------
<html>
-------------------------------------------------
<head>
-------------------------------------------------
<title>Problema</title>
-------------------------------------------------
<scriptsrc="funciones.js" language="JavaScript"></script>
-------------------------------------------------
</head>
-------------------------------------------------
<body>
-------------------------------------------------
<h1>Vote esta foto</h1>
-------------------------------------------------
<p>...
El objeto XMLHttpRequest es un elemento fundamental para la comunicación asincrónica con el servidor. Este objeto nos permite enviar y recibir información en formato XML y en general en cualquier formato (como vimos en el ejercicio anterior retornando un trozo de archivo HTML)
La creación de un objeto de esta clase varía si se trata del Internet Explorer deMicrosoft, ya que este no lo incorpora en JavaScript sino que se trata de una ActiveX:
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
En cambio en FireFox y otros navegadores lo incorpora JavaScript y procedemos para su creación de la siguiente manera:
if (window.XMLHttpRequest)
xmlHttp =new XMLHttpRequest();
Como hemos visto en el problema anterior siempre implementaremos una función que nos retorne un objeto XMLHttpRequest haciendo transparente el proceso en cuanto a navegador donde se esté ejecutando:
function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
Es decir la función crearXMLHttpRequest se encargará de retornarnos un objeto de la clase XMLHttpRequest.
Las propiedades principales del objeto XMLHttpRequest son:* onreadystatechange Almacena el nombre de la función que se ejecutará cuando el objeto XMLHttpRequest cambie de estado.
* readyState Almacena el estado del requerimiento hecho al servidor, pudiendo ser:
* 0 No inicializado (el método open no a sido llamado)
* 1 Cargando (se llamó al método open)
* 2 Cargado (se llamó al método send y ya tenemos la cabecera de lapetición HTTP y el status)
* 3 Interactivo (la propiedad responseText tiene datos parciales)
* 4 Completado (la propiedad responseText tiene todos los datos pedidos al servidor)
* responseText Almacena el string devuelto por el servidor, luego de haber hecho una petición.
* responseXML Similar a la anterior (responseText) con la diferencia que el string devuelto por elservidor se encuentra en formato XML.
Los métodos principales del objeto XMLHttpRequest son:
* open Abre un requerimiento HTTP al servidor.
* send Envía el requerimiento al servidor.
Confeccionaremos otro problema para fijar conceptos vistos hasta el momento.
Confeccionar una página que muestre una imagen y permita calificarla con un valor entre 1 y 10. Permitir ingresar el nombre delvisitante. Disponer de un control de tipo select para seleccionar el valor. Luego al presionar un botón enviar el valor seleccionado utilizando el objeto XMLHttpRequest al servidor donde almacenaremos en un archivo de texto el nombre del visitante y el puntaje. Retornar luego todos los votos hasta el momento. Actualizaremos la página HTML con todos los nombres y votos hasta el momento.
Elarchivo HTML es:
pagina1.html
-------------------------------------------------
<html>
-------------------------------------------------
<head>
-------------------------------------------------
<title>Problema</title>
-------------------------------------------------
<scriptsrc="funciones.js" language="JavaScript"></script>
-------------------------------------------------
</head>
-------------------------------------------------
<body>
-------------------------------------------------
<h1>Vote esta foto</h1>
-------------------------------------------------
<p>...
Leer documento completo
Regístrate para leer el documento completo.