XMLHTTPREQUEST es una interfaz de navegador que permite a JavaScript realizar la comunicación HTTP (s).
Al principio, Microsoft introdujo esta interfaz en IE 5. Debido a que es muy útil, otros navegadores han imitado y desplegado, por lo que nacieron las operaciones de Ajax.
Sin embargo, esta interfaz no se ha estandarizado, y la implementación de cada navegador es más o menos diferente. Después de que se formó el concepto de HTML 5, W3C comenzó a considerar estandarizar esta interfaz. En febrero de 2008, se propuso el borrador de XMLHTTPREQUEST Nivel 2.
Esta nueva versión de XMLHTTPREQUEST propone muchas características nuevas útiles que promoverán en gran medida la innovación en Internet. Este artículo presenta esta nueva versión en detalle.
1. Versión antigua del objeto xmlhttprequest
Antes de presentar la nueva versión, revisemos el uso de la versión anterior.
Primero, cree una nueva instancia de xmlhttprequest.
var xhr = new xmlhttprequest ();
Luego, se emite una solicitud HTTP al host remoto.
La copia del código es la siguiente:
xhr.open ('get', 'ejemplo.php');
xhr.send ();
Luego, espere a que el host remoto responda. En este momento, debe monitorear los cambios de estado del objeto xmlhttprequest y especificar la función de devolución de llamada.
xhr.onreadyStateChange = function () {if (xhr.readyState == 4 && xhr.status == 200) {alerta (xhr.ResponseText); } else {alert (xhr.statusText); }};El código anterior contiene las propiedades principales de la versión anterior del objeto xmlhttprequest:
La copia del código es la siguiente:
* XHR.ReadyState: el estado del objeto xmlhttprequest, igual a 4 significa que se han recibido los datos.
* xhr.status: el código de estado devuelto por el servidor, igual a 200 significa que todo es normal.
* XHR.APONSEJEXTO: Datos de texto devueltos por el servidor
* XHR.RESPONSEXML: Datos de formato XML devueltos por el servidor
* XHR.StatusText: el texto de estado devuelto por el servidor.
2. Desventajas de la versión anterior
La versión anterior del objeto xmlhttprequest tiene las siguientes desventajas:
* Solo se admite la transmisión de datos de texto y no se puede usar para leer y cargar archivos binarios.
* Al transmitir y recibir datos, no hay información de progreso, por lo que solo puede solicitar si se ha completado.
* Debido a la "misma política de origen", solo puede solicitar datos de servidores con el mismo nombre de dominio.
3. Funciones de la nueva versión
La nueva versión del objeto xmlhttprequest ha realizado mejoras significativas en las deficiencias de la versión anterior.
La copia del código es la siguiente:
* Puede establecer el límite de tiempo para las solicitudes HTTP.
* Los objetos de FormData se pueden usar para administrar datos de formulario.
* Los archivos se pueden cargar.
* Puede solicitar datos bajo diferentes nombres de dominio (solicitud de dominio cruzado).
* Puede obtener datos binarios en el lado del servidor.
* Puede obtener la información de progreso de la transmisión de datos.
A continuación, presentaré estas nuevas características una por una.
4. Límite de tiempo para solicitudes HTTP
A veces, las operaciones de AJAX requieren mucho tiempo y es imposible predecir cuánto tiempo llevará. Si la velocidad de Internet es muy lenta, los usuarios pueden tener que esperar mucho tiempo.
La nueva versión del objeto XMLHTTPRequest ha agregado un atributo de tiempo de espera, que puede establecer el límite de tiempo para las solicitudes HTTP.
xhr.timeout = 3000;
La declaración anterior establece el tiempo de espera máximo a 3000 milisegundos. Después de que se apruebe este límite de tiempo, la solicitud HTTP se detendrá automáticamente. También hay un evento de tiempo de espera que especifica la función de devolución de llamada.
La copia del código es la siguiente:
xhr.ontimeOut = function (evento) {
alerta ('¡Tiempo de espera de solicitud!');
}
Actualmente, Opera, Firefox e IE 10 admiten esta propiedad. Esta propiedad de IE 8 e IE 9 pertenece al objeto XdomainRequest, mientras que Chrome y Safari no lo admiten.
5. Objeto FormData
Las operaciones de AJAX a menudo se usan para aprobar datos de formulario. Para facilitar el procesamiento de formulario, HTML 5 ha agregado un objeto FormData a formularios simulados.
Primero, cree un nuevo objeto FormData.
var formData = new FormData ();
Luego, agregue un elemento de formulario.
formdata.append ('nombre de usuario', 'zhang san');
formdata.append ('id', 123456);
Finalmente, transmita directamente este objeto FormData. Esto es exactamente lo mismo que enviar un formulario web.
XHR.SEND (FormData);
El objeto FormData también se puede usar para obtener el valor de un formulario web.
La copia del código es la siguiente:
var form = document.getElementById ('myForm');
var FormData = new FormData (Form);
formdata.append ('secreto', '123456'); // Agregar un elemento de formulario
xhr.open ('post', form.action);
XHR.SEND (FormData);
6. Cargar archivos
La nueva versión del objeto xmlhttprequest no solo puede enviar información de texto, sino también cargar archivos.
Suponiendo que los archivos son un elemento de formulario (input [type = "file"]) de "Seleccionar archivo", lo cargamos en el objeto FormData.
La copia del código es la siguiente:
var formData = new FormData ();
for (var i = 0; i <files.length; i ++) {
formdata.append ('files []', archivos [i]);
}
Luego, envíe este objeto FormData.
XHR.SEND (FormData);
7. Compartir recursos de dominio cruzado (CORS)
La nueva versión del objeto xmlhttprequest puede emitir solicitudes HTTP a servidores con diferentes nombres de dominio. Esto se llama "compartir recursos de origen cruzado" (CORS).
El requisito previo para usar "recursos de dominio cruzado" es que el navegador debe admitir esta función, y el servidor debe aceptar este "dominio cruzado". Si se pueden cumplir las condiciones anteriores, el código se escribe exactamente igual que el de las solicitudes de dominio no cruzado.
xhr.open ('get', 'http: //other.server/and/path/to/script');
Actualmente, además de IE 8 e IE 9, los navegadores convencionales admiten CORS, e IE 10 también admitirán esta función. Para la configuración del lado del servidor, consulte "Control de acceso del lado del servidor".
8. Reciba datos binarios (Método A: Reescribir MIMETYPE)
La versión anterior del objeto XMLHTTPREQUEST solo puede recuperar datos de texto del servidor (de lo contrario, su nombre no comenzará con XML), mientras que la nueva versión puede recuperar datos binarios.
Aquí hay dos formas diferentes. El enfoque anterior es anular el tipo de mima de los datos, disfrazar los datos binarios devueltos por el servidor como datos de texto y decirle al navegador que este es un conjunto de caracteres definido por el usuario.
xhr.overridEMeType ("Text/Plain; Charset = X-User definido");
Luego, use la propiedad ResponseText para recibir los datos binarios devueltos por el servidor.
var binstr = xhr.esponsetext;
Dado que el navegador lo trata como datos de texto en este momento, debe restaurarse a los datos binarios uno por uno.
La copia del código es la siguiente:
para (var i = 0, len = binstr.length; i <len; ++ i) {
var c = binstr.charcodeat (i);
var byte = c & 0xff;
}
La operación de bit "C & 0xff" de la última línea significa que entre los dos bytes de cada personaje, solo se retiene el siguiente byte y se tira el byte anterior. La razón es que cuando el navegador interpreta los caracteres, interpretará automáticamente los caracteres en la sección 0xf700-0xf7ff de Unicode.
8. Reciba datos binarios (método B: propiedad ResponseType)
La nueva forma de recuperar datos binarios del servidor es utilizar la propiedad ResponseType recientemente agregada. Si el servidor devuelve datos de texto, el valor de esta propiedad es "texto", que es el valor predeterminado. Los navegadores más nuevos también admiten otros valores, es decir, pueden recibir datos en otros formatos.
Puede establecer el tipo de respuesta en Blob, lo que significa que el servidor está enviando un objeto binario.
La copia del código es la siguiente:
var xhr = new xmlhttprequest ();
xhr.open ('get', '/path/to/image.png');
xhr.responseType = 'blob';
Al recibir datos, solo use el objeto Blob que viene con su navegador.
var blob = new blob ([xhr. y], {type: 'image/png'});
Tenga en cuenta que es leer XHR.Response, no XHR.Sponsetext.
También puede establecer el tipo de respuesta en ArrayBuffer e instalar los datos binarios en una matriz.
La copia del código es la siguiente:
var xhr = new xmlhttprequest ();
xhr.open ('get', '/path/to/image.png');
xhr.ResponseType = "ArrayBuffer";
Al recibir datos, debe atravesar esta matriz.
La copia del código es la siguiente:
var arrayBuffer = xhr.Response;
if (arraybuffer) {
var byteArray = new Uint8Array (ArrayBuffer);
para (var i = 0; i <bytearray.bytelength; i ++) {
// Haz algo
}
}
Para una discusión más detallada, consulte Enviar y recibir datos binarios.
9. Información de progreso
La nueva versión del objeto XMLHTTPREQUEST tiene un evento de progreso al transmitir datos, que se utiliza para devolver la información de progreso.
Se divide en dos situaciones: cargar y descargar. El evento de progreso descargado pertenece al objeto xmlhttprequest, y el evento de progreso cargado pertenece al objeto xmlhttprequest.upload.
Primero definamos la función de devolución de llamada del evento de progreso.
La copia del código es la siguiente:
XHR.OnProgress = updateProgress;
xhr.upload.onProgress = updateProgress;
Luego, en la función de devolución de llamada, use algunas propiedades de este evento.
La copia del código es la siguiente:
Función UpdateProgress (evento) {
if (event.lengthComputable) {
var porcentcomplete = event.loaded / event.total;
}
}
En el código anterior, Event.total es el total de bytes que deben transferirse, y Event.Loaded es los bytes que se han transferido. Si event.lengthComputable no es verdadero, Event.total es igual a 0.
Hay otros cinco eventos relacionados con el evento de progreso, que pueden especificar la función de devolución de llamada por separado:
* Evento de carga: la transferencia se completó correctamente.
* Evento de abort: la transmisión fue cancelada por el usuario.
* Evento de error: se produjo un error durante la transmisión.
* Evento de carga de carga: la transferencia comienza.
* Evento de carga: la transmisión termina, pero no sé si tiene éxito o falla.
10. Materiales de lectura
1. Introducción a XMLHTTPREQUEST Nivel 2: una introducción integral a las nuevas características.
2. Nuevos trucos en xmlhttprequest 2: algunas presentaciones de uso.
3. Uso de xmlhttprequest: algunos usos avanzados, principalmente dirigidos a los navegadores Firefox.
4. Control de acceso HTTP: Descripción general de CORS.
5. Control de acceso DOM utilizando el intercambio de recursos de origen cruzado: 9 tipos de información de encabezado HTTP de CORS
6. Control de acceso del lado del servidor: Configuración del CORS del lado del servidor.
7. Habilitar CORS: Configuración del servidor CORS.