Ajax is not a tool for communication between the browser and the server, but uses XMLHttpRequest as the core , including HTML/XHTML, CSS, JavaScript, DOM, XML and XSLT, a collection technology for partial refresh of web pages .
The x in Ajax means XML, which is the form of receiving response data in the early days of Ajax, but due to the popularity of JSON, XML has been basically replaced by JSON.
1. Ajax basic process
- Create an XMLHttpRequest object through JavaScript
- Use the XMLHttpRequest object to send requests to the web server
- Read and process the data responded by the server through JavaScript
- Manipulate the DOM to refresh the corresponding area of the page according to the processing result
2. Core: XMLHttpRequest object
XMLHttpRequestUsed to interact with the server, it is a tool for the browser to communicate with the server. Through XMLHttpRequestthe object, you can request a specific URL and get data without refreshing the page.
To use XMLHttpRequestthe object to interact with the server, you first need to create an xhrobject
// 通过构造函数创建 xhr 对象
// 所有现代浏览器都内置了该构造函数
let xhr = new XMLHttpRequest();
Then call the xhrobject's open()method to initiate a request
// open() 方法最多可接收五个参数
// 其中最常用的是前两个，分别表示请求方式和请求地址
const method = 'GET';
const url = 'https://www.bilibili.com/index/ding.json';
// 第三个参数表示是否异步请求，默认为 true，一般不用这个参数
const async = true;
// 初始化一个请求
xhr.open(method, url);
After the request is initialized, the method can be called xhr.send()to send the request, but at this time we should also xhrbind some event handlers to the object to process the response from the server. readystatechangeThe method of processing the response can be bound to , loadendor other events as required .
There are two ways to bind, one is xhr.addEventListener()to bind the event processing function through the method, such as
// 这种方式可以为同一事件绑定多个事件处理函数
xhr.addEventListener('readystatechange', function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response);
} else {
console.log(xhr.status)
}
}
})
The second is to bind the event processing function by setting xhrthe corresponding properties of the object, such as
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response);
} else {
console.log(xhr.status)
}
}
}
The event handler does not have to be xhr.send()bound before the method is called, it can also be after xhr.send()the call, or xhr.open()before the call, depending on personal habits.
xhrObjects need to call send()to initiate a request. xhr.send()The method receives an optional parameter as the request body, but when the request method is GETor HEAD, the request body will be ignored.
xhr.send();
xhr.send('foo=bar&lorem=ipsum');
xhr.send(new Blob());
// 不支持 Object、Array 类型的参数，需转化为 JSON 字符串
xhr.send({
name: '六月初六'}); // 错误的方式
xhr.send(JSON.stringify{
name: '六月初六'}); // 正确的方式
In addition to the above mentioned, xhrthe object has many other attributes and methods, see XMLHttpRequest object for details .