XMLHTTPREQUEST hace que enviar una solicitud HTTP sea muy fácil. Solo necesita crear una instancia del objeto de solicitud, abrir una URL y luego enviar la solicitud. Una vez completada la transmisión, el estado HTTP resultante y el contenido de respuesta devuelto también se pueden obtener del objeto de solicitud.
Las solicitudes generadas por XMLHTTPRequest se pueden obtener de dos maneras, modo asíncrono o modo sincrónico. El tipo de solicitud está determinado por el valor de Async, el tercer parámetro del método Open () de este objeto xmlhttprequest. Si el valor de este parámetro es falso, la solicitud XMLHTTPRequest se realiza en modo sincrónico, de lo contrario, el proceso se completará en modo asíncrono.
Dos modos de comunicación: solicitudes síncronas y asincrónicas:
Solicitud de sincronización
Las solicitudes de sincronización en el subproceso principal bloquean la página, y debido a la mala experiencia del usuario, las solicitudes de sincronización en el hilo principal de algunos últimos navegadores se han desaprobado. En casos raros, los xmlhttpRequests utilizando el modo sincrónico serán más adecuados que usar el modo asíncrono.
1. Al usar XMLHTTPRequest en Worker, las solicitudes sincrónicas son más adecuadas que las solicitudes asíncronas.
Código en la página de inicio:
<script type = "text/javaScript"> var omyWorker = new Worker ("mytask.js"); omyworker.onmessage = function (oevent) {alerta ("El trabajador dijo:" + oevent.data); }; omyWorker.PostMessage ("Hello"); </script> myFile.txt (el archivo que sincroniza el objeto XMLHTPRequest solicitado): ¡Hola mundo!Incluye código de trabajador: mytask.js
self.onmessage = function (oevent) {if (oevent.data === "hello") {var oreq = new xmlhttprequest (); Oreq.open ("get", "myFile.txt", falso); // Solicitud sincrónica Oreq.send (nulo); self.postMessage (Oreq.ResponSetext); }};Nota: Dado que se usa el trabajador, la solicitud es en realidad asincrónica.
Se pueden usar métodos similares para permitir que los scripts interactúen con el servidor en segundo plano y precarga cierto contenido. Consulte el uso de trabajadores web para obtener más detalles
2. La situación en la que deben usarse las solicitudes sincrónicas
En casos raros, solo se pueden usar solicitudes de Modo Síncrono XMLHTTPREQUEST. Por ejemplo, en la ventana.onunload y la ventana. El uso de xmlhttprequest asíncrono en la función de controlador de eventos de descarga de la página causará el problema: cuando se devuelve la respuesta, la página ya no existe, y todas las variables y funciones de devolución de llamada se han destruido. El resultado solo puede causar un error, "la función no está definida". La solución es usar la solicitud en modo de sincronización aquí, para que la página no se cierre hasta que se complete la solicitud.
Window.onbeforeNoNLOAD = function () {var oreq = new XMLHTTPREQUEST (); Oreq.open ("Get", "logOut.php? Nick =" + Escape (myName), falso); // Solicitud sincrónica Oreq.send (NULL); if (Oreq.ResponsEtext.trim ()! == "Exitido"); {// "exitido" es la salida de retorno de datos devuelto ", ¿desea ejecutar manualmente la salida?"; }};Solicitud asíncrona
Si usa el modo asíncrono, cuando los datos se solicitan completamente, se ejecutará una función de devolución de llamada específica. Al ejecutar la solicitud, el navegador normalmente puede ejecutar otras transacciones.
3. Ejemplo: cree un método estándar para leer archivos externos
En algunos requisitos, se deben leer múltiples archivos externos. Esta es una función estándar. Esta función utiliza el objeto xmlhttprequest para solicitudes asíncronas. También le permite especificar una función de devolución de llamada diferente después de que se complete cada archivo.
Función LoadFile (Surl, Tiempo de espera, fcallback / *, Pase en el parámetro 1, pase en el parámetro 2, etc. * /) {var apassargs = array.prototype.slice.call (argumentos, 3), oreq = new xmlhttprequest (); Oreq.ontimeOut = function () {console.log ("Tiempo de espera de solicitud"); } Oreq.onreadyStateChange = function () {if (Oreq.readyState === 4) {if (Oreq.status === 200) {fcallback.apply (Oreq, apassargs); } else {console.log ("Error", Oreq.StatusText); }}}; Oreq.open ("Get", surl, verdadero); Oreq.TimeOut = Tiempo de espera; Oreq.send (nulo);}Uso de la función de archivo de carga:
function showMessage (smsg) {alert (smsg + this.ResponSetext);} LoadFile ("Message.txt", 200, ShowMessage, "¡Nuevo mensaje! // n");La línea 1 define una función. Después de leer el archivo, la función fcallback se llamará con todos los parámetros después del tercer parámetro como sus propios parámetros.
La línea 3 utiliza una configuración de tiempo de espera para evitar que su código ejecute la ejecución a largo plazo de los datos de retorno de la solicitud de lectura. Asignando un valor a la propiedad de tiempo de espera del objeto xmlhttprequest a la propiedad de tiempo de espera
El sexto comportamiento de OnreadyStateChange Event Handle especifica la función de devolución de llamada. Cada vez que la función se ejecuta, verifica si la solicitud finaliza (el estado de la solicitud es 4). Si es así, determina si la solicitud es exitosa (el estado HTTP es 200). Si es así, emite el código fuente de la página. Si se produce un error, emite el mensaje de error.
La línea 15 especifica que el tercer parámetro es verdadero, lo que indica que la solicitud debe ejecutarse en modo asíncrono.
4. Ejemplo: use solicitudes asincrónicas, no se utilizan cierres.
function switchXHrState () {switch (this.readyState) {case 0: console.log ("el método Open () aún no se ha llamado."); ruptura; caso 1: console.log ("El método send () aún no se ha llamado"); ruptura; caso 2: console.log ("se ha llamado el método send (), se ha devuelto el encabezado de respuesta y el estado de respuesta"); ruptura; caso 3: console.log ("Descargar, se ha obtenido parte de la entidad de respuesta"); ruptura; caso 4: console.log ("¡Solicitud completa!"); this.callback.apply (this, this.arguments); }}; function loadFile (Surl, fcallback / *, pasar en el parámetro 1, pasar en el parámetro 2, etc. * /) {var oreq = new xmlhttprequest (); Oreq.Callback = fCallback; Oreq.arguments = array.prototype.slice.call (argumentos, 2); Oreq.OnreadyStateChange = switchXHrState; Oreq.open ("Get", surl, verdadero); Oreq.send (nulo);}Use Bind:
function switchXHRState (fcallback, aarGuments) {switch (this.readyState) {case 0: console.log ("El método Open () no se ha llamado"); break; caso 1: console.log ("El método send () no se ha llamado"); ruptura; caso 2: console.log ("se ha llamado el método send (), se ha devuelto el encabezado de respuesta y el estado de respuesta"); Break; Case 3: Console.log ("La entidad de respuesta parcial se ha obtenido durante la descarga"); ruptura; caso 4: console.log ("¡Solicitud completa!"); fcallback.apply (this, aarguments); }}; function loadFile (Surl, fcallback / *, pasar en el parámetro 1, pasar en el parámetro 2, etc. * /) {var oreq = new xmlhttprequest (); Oreq.onreadyStateChange = switchXHrState.bind (Oreq, fcallback, array.prototype.slice.call (argumentos, 2)); Oreq.open ("Get", surl, verdadero); Oreq.send (nulo);}Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.