Hola a todos, el problema anterior presentó cómo probar la interfaz API a través de herramientas, y este problema demostrará cómo escribir una solicitud de Ajax a mano.
¿Qué es XHR? El nombre completo es XMLHttpRequest, que es un objeto integrado en el navegador que permite que JavaScript envíe solicitudes HTTP.
Qué es Ajax Ajax es una tecnología utilizada para crear páginas web dinámicas y rápidas, en las que se utilizan objetos XMLHttpRequest para interactuar con los servidores. Envíe una solicitud asincrónica al servidor a través del objeto XmlHttpRequest y obtenga datos del servidor. Luego actualice la página manipulando el DOM a través de JavaScript. Es decir, JavaScript puede realizar solicitudes al servidor y procesar las respuestas de manera oportuna sin bloquear la ejecución del programa, logrando el efecto de no actualización. JavaScript es de subproceso único y bloqueará la ejecución del código, por lo que se introduce XmlHttpRequest para procesar datos asincrónicos. La combinación de tecnología XHR y AJAX puede hacer que la página web actualice parcialmente el contenido de la página sin actualizar y acelerar la visualización de la página web.
1. Para crear un objeto xhr, existen principalmente dos modos, el modo de compatibilidad y el modo estándar.
(1) Modo estándar: xhr = new XMLHttpRequest()
(2) Modo de compatibilidad: agregando condiciones de juicio
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
//for IE6, IE5 兼容
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
2. Establezca una conexión: llame al método xhr.open (parámetro 1, parámetro 2, parámetro 3) para conectarse al servidor.
Parámetro 1: el método de solicitud, que incluye principalmente "GET" y "POST".
Parámetro 2: URL de la solicitud.
Parámetro 3: valor booleano para enviar la solicitud de forma asíncrona, generalmente no completada. El valor predeterminado es "VERDADERO", lo que significa envío asíncrono. , en general, no se recomienda el envío síncrono.
Para abrir VIP esta API cargada XHR
Abra esta API, normalmente devuelve {"resultado": 1}
3. Envíe la solicitud: xhr.send();
4. Cree un evento readyStateChange para monitorear la solicitud
Entre las condiciones de juicio, cuando xhr.readyState es 4, significa que la operación de descarga se completó, cuando
xhr.status es 200, significa que el código de estado de respuesta es normal.
// 发送请求
xhr.send();
// 创建监听请求的readyStateChange事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
alert(xhr.responseText);
} else {
alert('出错了，Err:' + xhr.status);
}
}
};
El resultado de la solicitud se muestra normalmente y se devuelve el contenido de la respuesta de la interfaz.
Luego use "GET" como método de solicitud para probar.
De manera similar, el resultado de la solicitud se muestra normalmente y se devuelve el contenido de la respuesta de la interfaz.
xhr.open("GET","https://guangzhou.zbj.com/cgyx/api/getServiceBycate?categories%5B%5D=18077&categories%5B%5D=18078&categories%5B%5D=18079&categories%5B%5D=18081&categories%5B%5D=18082&sign=P20221222101&localCityId=3493&query%5Bsize%5D=5");