Etiquetas

, ,

speed

Este objeto hoy presente en la mayoría de los exploradores fue creado originalmente por Microsoft y es la base de la tecnología que conocemos como AJAX y la característica principal de este objeto es que nos permite a través de javascript realizar peticiones Get y Post por medio del http y https de esta manera  podemos recibir y enviar información a un servidor sin necesidad de refrescar la pagina y también podríamos consumir información desde distintos Web Services sin tener que enviar la pagina entera al servidor lo cual aumenta el consumo de ancho de banda y los tiempos de respuesta de nuestras aplicaciones Web.

Veamos un ejemplo de cómo utilizar este objeto:

–          Como crear una instancia del objeto XMLHttpRquest

function CreaXmlHttp()

{

var MiXmlHttp;

// si no es IE

if (window.XMLHttpRequest)

{

MiXmlHttp = new XMLHttpRequest();

}

Else{

//IE usa un control activex

MiXmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

}

return MiXmlHttp;

}

-Como enviar información usando el Objeto XmlHttpRequest

function EnviandoInformacion(datos)

{

miHttp= CreaXmlHttp (); //crea la instancia de mi objeto XmlHttpRequest

// indico la función que se va encargar de procesar la respuesta

miHttp.onreadystatechange = ProcesoResultado;

miHttp.open(“GET”,’http://www.miweb.com/mipagina.aspx?variable=’ + datos, true);

//usamos GET cuando solo vamos a enviar parámetros por query string

//o no se van enviar parámetros

//El tercer parámetro indica si la llamada será asincrónica

miHttp.send(null);//envio el request, se le pasa null porque no enviamos datos extras

}

function EnviandoInformacionXML(miXML)

{

miHttp= CreaXmlHttp (); //crea la instancia de mi objeto XmlHttpRequest

// indico la funcio que se va encargar de procesar la respuesta

miHttp.onreadystatechange = ProcesoResultado;

miHttp.open(“POST”,’http://www.miweb.com/mipagina.aspx’, true);

//usamos POST porque enviaremos datos XML

// indicando que los datos a enviarse están codificados como un formulario.

miHttp.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded; charset=ISO-8859-1’);

miHttp.send(miXML);//envío el request con mis datos

}

-Recogiendo la petición del lado del servidor

private void ProcesoPeticion()

{

string datos = Request.QueryString[“datos”];

//si los datos son XML

//        string datosXML = Request.Form[0];

HttpResponse response = HttpContext.Current.Response;

response.Clear();

response.ContentType = “text/plain”;

// si la respuesta es XML

//response.ContentType = “text/xml”;

response.Write(s);

response.Flush();

response.End();

}

-Recogiendo la respuesta del lado del cliente

function ProcesoResultado ()

{

if(xmlHttp.readyState == 4 && xmlHttp.status == 200)

{

var resultado= xmlHttp.responseText;

//var resultado= xmlHttp.responseXML;

}

}

Si en lugar de hacer llamado a una pagina quisiéramos llamar a servicio Web nuestra URL debería ser algo así:

http://www.miweb/miservicio.asmx/mimetodod?misdatos=”;

O

http://www.miweb/miservicio.svc/mimetodod?misdatos=”;

Si enviamos los datos en JSON debemos añadir además

miHttp.setRequestHeader(‘Content-Type’, ‘application/json’);

A continuación le dejo unas tablas donde se indican el resto de los eventos, métodos y atributos que posee el objeto XmlHttpRerquest.

Eventos

Propiedad

Descripción

onreadystatechange Evento que se dispara con cada cambio de estado.
onabort (Level 2) Evento que se dispara al abortar la operación.
onload (Level 2) Evento que se dispara al completar la carga.
onloadstart (Level 2) Evento que se dispara al iniciar la carga.
onprogress (Level 2) Evento que se dispara periódicamente con información de estado.

Métodos

Método

Descripción

abort() Cancela la petición en curso
getAllResponseHeaders() Devuelve el conjunto de cabeceras HTTP como una cadena.
getResponseHeader( nombreCabecera ) Devuelve el valor de la cabecera HTTP especificada.
open

( método, URL [, asíncrono
[, nombreUsuario [, clave]]] )

Especifica el método, URL y otros atributos opcionales de una petición.

El parámetro de método puede tomar los valores “GET”, “POST”, o “PUT” (“GET” y “POST” son dos formas para solicitar datos, con “GET” los parámetros de la petición se codifican en la URL y con “POST” en las cabeceras de HTTP).

El parámetro URL puede ser una URL relativa o completa.

El parámetro asíncrono especifica si la petición será gestionada asíncronamente o no. Un valor true indica que el proceso del script continúa después del método send(), sin esperar a la respuesta, y false indica que el script se detiene hasta que se complete la operación, tras lo cual se reanuda la ejecución.

En el caso asíncrono se especifican manejadores de eventos, que se ejecutan ante cada cambio de estado y permiten tratar los resultados de la consulta una vez que se reciben, o bien gestionar eventuales errores.

send([datos]) Envía la petición
setRequestHeader( etiqueta, valor ) Añade un par etiqueta/valor a la cabecera HTTP a enviar.

Atributos

Atributo

Descripción

readyState Devuelve el estado del objeto como sigue:

0 = sin inicializar, 1 = abierto, 2 = cabeceras recibidas, 3 = cargando y 4 = completado.

responseBody (Level 2) Devuelve la respuesta como un array de bytes
responseText Devuelve la respuesta como una cadena
responseXML Devuelve la respuesta como XML. Esta propiedad devuelve un objeto documento XML, que puede ser examinado usando las propiedades y métodos del árbol del DOM.
status Devuelve el estado como un número (p. ej. 404 para “Not Found” y 200 para “OK”).
statusText Devuelve el estado como una cadena (p. ej. “Not Found” o “OK”).