Ajax no es una herramienta para la comunicación entre el navegador y el servidor, sino que utiliza XMLHttpRequest como núcleo , incluidos HTML/XHTML, CSS, JavaScript, DOM, XML y XSLT, una tecnología de recopilación para la actualización parcial de páginas web .
La x en Ajax significa XML, que es la forma de recibir datos de respuesta en los primeros días de Ajax, pero debido a la popularidad de JSON, XML básicamente ha sido reemplazado por JSON.
1. Proceso básico de Ajax
- Crear un objeto XMLHttpRequest a través de JavaScript
- Use el objeto XMLHttpRequest para enviar una solicitud al servidor web
- Leer y procesar los datos respondidos por el servidor a través de JavaScript
- Manipule el DOM para actualizar el área correspondiente de la página de acuerdo con el resultado del procesamiento
2. Núcleo: objeto XMLHttpRequest
XMLHttpRequestUtilizado para interactuar con el servidor, es una herramienta para que el navegador se comunique con el servidor. A través XMLHttpRequestdel objeto, puede solicitar una URL específica y obtener datos sin actualizar la página.
Para usar XMLHttpRequestel objeto para interactuar con el servidor, primero debe crear un xhrobjeto
// 通过构造函数创建 xhr 对象
// 所有现代浏览器都内置了该构造函数
let xhr = new XMLHttpRequest();
Luego llame al método xhrdel objeto open()para iniciar una solicitud
// open() 方法最多可接收五个参数
// 其中最常用的是前两个，分别表示请求方式和请求地址
const method = 'GET';
const url = 'https://www.bilibili.com/index/ding.json';
// 第三个参数表示是否异步请求，默认为 true，一般不用这个参数
const async = true;
// 初始化一个请求
xhr.open(method, url);
Después de inicializar la solicitud, se puede llamar al método xhr.send()para enviar la solicitud, pero en este momento también debemos xhrvincular algunos controladores de eventos al objeto para procesar la respuesta del servidor. readystatechangeEl método de procesamiento de la respuesta puede vincularse a loadendu otros eventos según sea necesario .
Hay dos formas de vincular, una es xhr.addEventListener()vincular la función de procesamiento de eventos a través del método, como
// 这种方式可以为同一事件绑定多个事件处理函数
xhr.addEventListener('readystatechange', function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response);
} else {
console.log(xhr.status)
}
}
})
El segundo es vincular la función de procesamiento de eventos configurando xhrlas propiedades correspondientes del objeto, como
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response);
} else {
console.log(xhr.status)
}
}
}
El controlador de eventos no tiene que estar xhr.send()vinculado antes de que se llame al método, también puede ser después xhr.send()de la llamada o xhr.open()antes de la llamada, según los hábitos personales.
xhrLos objetos necesitan llamar send()para iniciar una solicitud. xhr.send()El método recibe un parámetro opcional como cuerpo de la solicitud, pero cuando el método de solicitud es GETo HEAD, se ignorará el cuerpo de la solicitud.
xhr.send();
xhr.send('foo=bar&lorem=ipsum');
xhr.send(new Blob());
// 不支持 Object、Array 类型的参数，需转化为 JSON 字符串
xhr.send({
name: '六月初六'}); // 错误的方式
xhr.send(JSON.stringify{
name: '六月初六'}); // 正确的方式
Además de lo mencionado anteriormente, xhrel objeto tiene muchos otros atributos y métodos; consulte Objeto XMLHttpRequest para obtener más información .