Una tecnología (herramienta) importante utilizada al diseñar AJAX es el objeto XMLHTTPRequest. El objeto XMLHttpRequest es la base técnica de todas las aplicaciones AJAX y Web 2.0 actuales. Aunque los proveedores de software y las comunidades de código abierto ahora proporcionan varios marcos AJAX para simplificar aún más el uso del objeto XMLHttpRequest, todavía es necesario que comprendamos las propiedades y métodos de este objeto;
1. ¿Qué es el objeto XMLHTTPRequest?
La definición más común es: XmlHttp es un conjunto de API que pueden transmitir o recibir XML y otros datos a través del protocolo http en JavaScript, VbScript, Jscript y otros lenguajes de programación. El mayor uso de XmlHttp es que puede actualizar parte del contenido de una página web sin actualizar toda la página. (Esta función es una de las características principales de AJAX)
Explicación de MSDN: XmlHttp proporciona un protocolo para que el cliente se comunique con el servidor http. El cliente puede enviar una solicitud al servidor http a través del objeto XmlHttp (MSXML2.XMLHTTP.3.0) y utilizar el modelo de objetos de documento XML de Microsoft (DOM) para procesar la respuesta.
Permítanme hacer una digresión aquí. De hecho, esto apareció muy temprano. Sin embargo, el soporte del navegador no era suficiente. Solo era compatible con IE, por lo que la mayoría de los programadores WEB no lo usaron mucho. Cambió mucho, Mozilla y Safari lo adoptaron como un estándar de facto y los navegadores convencionales comenzaron a admitir el objeto XMLHTTPRequest. Pero lo que hay que destacar aquí es que XMLHTTPRequest aún no es un estándar W3C, por lo que el rendimiento en diferentes navegadores es ligeramente diferente.
2. Cree un objeto XMLHTTPRequest
Hablando de diferencias, echemos un vistazo a cómo declararlo (usarlo). Antes de usar el objeto XMLHTTPRequest para enviar solicitudes y procesar respuestas, debemos usar javascript para crear un objeto XMLHTTPRequest. (IE implementa XMLHTTPRequest como un objeto ActiveX, y otros navegadores [como Firefox/Safari/Opear] lo implementan como un objeto javascript nativo). Echemos un vistazo a cómo usar JavaScript para crearlo:
La siguiente es una cita:
<script idioma="javascript" tipo="texto/javascript">
<!--
var xmlhttp;
//Crear objeto XMLHTTPRequest
función crearXMLHTTPRequest(){
if(window.ActiveXObject){ // Determinar si se admite el control ActiveX
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // Crea un objeto XMLHTTPRequest creando una instancia de una nueva instancia de ActiveXObject.
}
else if(window.XMLHTTPRequest){ // Determinar si implementar XMLHTTPRequest como un objeto javascript local
xmlhttp = new XMLHTTPRequest(); // Crea una instancia de XMLHTTPRequest (objeto javascript local)
}
}
//-->
</script>3. Atributos y métodos. Dado que hay demasiadas cosas, usaré esta página para enumerar los métodos y atributos y daré ejemplos detallados más adelante (principalmente porque también estoy aprendiendo).
<html>
<cabeza>
<title>Descripción del objeto XMLHTTPRequest DEMO</title>
<script idioma="javascript" tipo="texto/javascript">
<!--
var xmlhttp;
//Crear un objeto XMLHTTPRequest
función crearXMLHTTPRequext(){
si (ventana.ActiveXObject) {
xmlhttp = nuevo ActiveXObject('Microsoft.XMLHTTP');
}
de lo contrario si (ventana.XMLHTTPRequest) {
xmlhttp = nueva XMLHTTPRequest();
}
}
función PostOrder (xmldoc)
{
crearXMLHTTPRequext();
// Método: abrir
//Crea una nueva solicitud http y especifica el método de solicitud, la URL y la información de verificación
// Sintaxis: oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
//parámetros
// método bstr
//métodos http, como: POST, GET, PUT y PROPFIND. Insensibilidad a mayúsculas y minúsculas.
// bstrUrl
//La dirección URL solicitada puede ser una dirección absoluta o relativa.
// varAsync[opcional]
// Tipo booleano, especifica si esta solicitud es asincrónica. El valor predeterminado es verdadero. Si es verdadero, se llamará a la función de devolución de llamada especificada por el atributo onreadystatechange cuando cambie el estado.
// bstrUsuario[opcional]
// Si el servidor requiere verificación, especifique el nombre de usuario aquí. Si no se especifica, aparecerá una ventana de verificación cuando el servidor requiera verificación.
// bstrContraseña[opcional]
// La parte de la contraseña de la información de verificación. Si el nombre de usuario está vacío, este valor se ignorará.
// Nota: después de llamar a este método, puede llamar al método de envío para enviar datos al servidor.
xmlhttp.Open("obtener", " http://localhost/example.htm ", falso);
// var libro = xmlhttp.responseXML.selectSingleNode("//libro[@id='bk101']");
// alerta(libro.xml);
// Atributo: onreadystatechange
//onreadystatechange: especifica el controlador de eventos cuando cambia la propiedad readyState
// Sintaxis: oXMLHttpRequest.onreadystatechange = funcMyHandler;
// El siguiente ejemplo demuestra cómo llamar a la función HandleStateChange cuando cambia la propiedad readyState del objeto XMLHTTPRequest.
// Cuando se reciban los datos (readystate == 4) se activará un botón en esta página
// Nota: esta propiedad es de solo escritura y es una extensión del modelo de objetos de documento del W3C.
xmlhttp.onreadystatechange=HandleStateChange;
// Método: enviar
//Enviar solicitud al servidor http y recibir respuesta
// Sintaxis: oXMLHttpRequest.send(varBody);
// Parámetros: varBody (Datos que se enviarán a través de esta solicitud).
// Nota: El modo sincrónico o asincrónico de este método depende del parámetro bAsync en el método abierto. Si bAsync == False, este método esperará a que se complete la solicitud o se agote el tiempo de espera antes de regresar. regresará inmediatamente.
// Este método toma un parámetro opcional, que es el requestBody a usar. Los tipos de entrada VARIANT aceptables son BSTR, SAFEARRAY de UI1 (bytes sin firmar), IDispatch a un objeto de modelo de objetos de documento (DOM) e IStream *. use solo codificación fragmentada (para enviar) cuando envíe tipos de entrada IStream *. El componente establece automáticamente el encabezado Content-Length para todos los tipos de entrada excepto IStream *.
// Si los datos enviados son BSTR, la respuesta se codifica como utf-8 y se debe establecer un encabezado de tipo de documento que contenga charset en la posición adecuada.
// Si el tipo de entrada es SAFEARRAY de UI1, la respuesta se envía tal cual sin codificación adicional. La persona que llama debe configurar un encabezado Content-Type con el tipo de contenido apropiado.
// Si los datos enviados son un objeto DOM XML, la respuesta se codificará con la codificación declarada en el documento xml. Si no se declara ninguna codificación en el documento xml, se utilizará el UTF-8 predeterminado.
// Si el tipo de entrada es IStream *, la respuesta se envía tal cual sin codificación adicional. La persona que llama debe configurar un encabezado Content-Type con el tipo de contenido apropiado.
xmlhttp.Enviar(xmldoc);
// Método: getAllResponseHeaders
// Obtener todos los encabezados http de la respuesta
// Sintaxis: strValue = oXMLHttpRequest.getAllResponseHeaders();
// Nota: Cada nombre y valor del encabezado http están separados por dos puntos y terminan con rn. Este método solo se puede llamar después de que se completa el método de envío.
alerta(xmlhttp.getAllResponseHeaders());
// Método: getResponseHeader
// Obtener el encabezado http especificado de la información de respuesta
// Sintaxis: strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);
// Nota: Este método solo se puede llamar después de que el método de envío sea exitoso. Si el tipo de documento devuelto por el servidor es "texto/xml", entonces esta oración
// xmlhttp.getResponseHeader("Tipo de contenido"); devolverá la cadena "texto/xml". Puede utilizar el método getAllResponseHeaders para obtener información completa del encabezado http.
alert(xmlhttp.getResponseHeader("Content-Type")); // Genera la columna Content-Type en el encabezado http: la versión y el nombre del servidor web actual.
document.frmTest.myButton.disabled = verdadero;
// Método: cancelar
//Cancelar solicitud actual
// Sintaxis: oXMLHttpRequest.abort();
// Nota: Después de llamar a este método, la solicitud actual devuelve el estado NO INITIALIZADO.
//xmlhttp.abort();
// Método: setRequestHeader
// Especifique por separado un determinado encabezado http de la solicitud
// Sintaxis: oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
// Parámetros: bstrHeader (Cadena, nombre del encabezado).
// bstrValue(Cadena, valor.)
// Nota: Si ya existe un encabezado http con este nombre, se sobrescribirá. Este método debe llamarse después del método abierto.
// xmlhttp.setRequestHeader(bstrHeader, bstrValue);
}
función HandleStateChange()
{
//Atributo: estado listo
// Devuelve el estado actual de la solicitud XMLHTTP
// Sintaxis: lValue = oXMLHttpRequest.readyState;
// Observaciones: Variable, este atributo es de solo lectura y el estado está representado por un número entero de longitud 4. La definición es la siguiente:
// 0 (no inicializado) El objeto ha sido creado, pero no ha sido inicializado (aún no se ha llamado al método open)
// 1 (inicialización) El objeto ha sido creado y aún no se ha llamado al método de envío.
// 2 (Enviar datos) Se ha llamado al método de envío, pero se desconocen el estado actual y el encabezado http
// 3 (Se están transmitiendo datos) Se han recibido parte de los datos debido a que la respuesta y los encabezados http están incompletos, se producirá un error al obtener parte de los datos a través de ResponseBody y ResponseText.
// 4 (Completo) Se completa la recepción de datos. En este momento, los datos de respuesta completos se pueden obtener a través de ResponseBody y ResponseText.
si (xmlhttp.readyState == 4){
document.frmTest.myButton.disabled = falso;
// Atributo: cuerpo de respuesta
// Devuelve los datos de respuesta del servidor en un formato determinado
// Sintaxis: strValue = oXMLHttpRequest.responseBody;
// Observaciones: Variable, esta propiedad es de solo lectura y representa los datos binarios no codificados devueltos directamente desde el servidor en formato de matriz sin firmar.
alerta(xmlhttp.responseBody);
//Propiedad: flujo de respuesta
//Devuelve información de respuesta en forma de objeto Ado Stream
// Sintaxis: strValue = oXMLHttpRequest.responseStream;
// Observaciones: Variable, esta propiedad es de solo lectura y devuelve información de respuesta en forma de un objeto Ado Stream.
alerta(xmlhttp.responseStream);
//Atributo: texto de respuesta
// Devuelve la información de respuesta como una cadena
// Sintaxis: strValue = oXMLHttpRequest.responseText;
// Observaciones: Variable, esta propiedad es de solo lectura y devuelve la información de respuesta como una cadena. XMLHTTP intenta decodificar la información de respuesta en una cadena Unicode,
// XMLHTTP establece la codificación de los datos de respuesta en UTF-8 de forma predeterminada. Si los datos devueltos por el servidor contienen BOM (marca de orden de bytes), XMLHTTP puede.
// Para decodificar cualquier dato UCS-2 (big o little endian) o UCS-4. Tenga en cuenta que si el servidor devuelve un documento xml, este atributo
// Las propiedades no manejan declaraciones de codificación en documentos xml. Necesitas usar ResponseXML para manejarlo.
alerta(xmlhttp.responseText);
//Atributo: respuestaXML
//Formatear la información de respuesta en un objeto de documento XML y devolverlo
// Sintaxis: var objDispatch = oXMLHttpRequest.responseXML;
// Observaciones: Variable, esta propiedad es de solo lectura, formatea la información de respuesta en un objeto de documento XML y la devuelve. Si los datos de la respuesta no son un documento XML válido,
// Esta propiedad en sí no devuelve XMLDOMParseError y la información de error se puede obtener a través del objeto DOMDocument procesado.
alerta("Resultado = " + xmlhttp.responseXML.xml);
//Atributo: estado
// Devuelve el código de estado http de la solicitud actual
// Sintaxis: lValue = oXMLHttpRequest.status;
// Valor de retorno: código de estado http estándar largo, definido de la siguiente manera:
//Número:Descripción
// 100:Continuar
// 101: protocolos de conmutación
// 200:OK
// 201:Creado
// 202:Aceptado
// 203: Información no autorizada
// 204:Sin contenido
// 205:Restablecer contenido
// 206: Contenido parcial
// 300: Múltiples opciones
// 301: Movido permanentemente
// 302:Encontrado
// 303: Ver Otros
// 304: No modificado
// 305:Usar proxy
// 307: Redirección temporal
// 400: Solicitud incorrecta
// 401: No autorizado
// 402: Pago requerido
// 403:Prohibido
// 404: No encontrado
// 405:Método no permitido
// 406: No aceptable
// 407: Se requiere autenticación de proxy
// 408: Solicitud de tiempo de espera
// 409:Conflicto
// 410: Se fue
// 411:Longitud requerida
// 412: Condición previa fallida
// 413: Entidad de solicitud demasiado grande
// 414: URI de solicitud demasiado larga
// 415: Tipo de medio no admitido
// 416: Rango solicitado no adecuado
// 417: Expectativa fallida
// 500: Error interno del servidor
// 501: No implementado
// 502 Puerta de enlace no válida
// 503: Servicio no disponible
// 504: Tiempo de espera de la puerta de enlace
// 505: Versión HTTP no compatible
// Nota: entero largo, esta propiedad es de solo lectura y devuelve el código de estado http de la solicitud actual. Esta propiedad solo se puede obtener después de enviar y recibir los datos.
alerta(xmlhttp.status);
//Atributo: texto de estado
// Devuelve el estado de la fila de respuesta de la solicitud actual
// Sintaxis: strValue = oXMLHttpRequest.statusText;
// Observaciones: Cadena, esta propiedad es de solo lectura. Devuelve el estado de la fila de respuesta de la solicitud actual en BSTR. Esta propiedad solo se puede obtener después de enviar y recibir los datos.
alerta(xmlhttp.statusText);
}
}
//-->
</script>
</cabeza>
<cuerpo>
<nombre del formulario="frmTest">
<input name="myButton" type="button" value="Haz clic en mí" onclick="Publicar pedido('http://localhost/example.htm');">
</formulario>
</cuerpo>
</html>