Hello everyone, the previous issue introduced how to test the API interface through tools, and this issue will demonstrate how to write an Ajax request by hand.
What is XHR? The full name is XMLHttpRequest, which is a browser built-in object that enables JavaScript to send HTTP requests.
What is Ajax? Ajax is a technology used to create fast dynamic web pages, in which XMLHttpRequest objects are used to interact with servers. Send an asynchronous request to the server through the XmlHttpRequest object, and obtain data from the server. Then update the page by manipulating the DOM through JavaScript. That is to say, JavaScript can make requests to the server and process responses in a timely manner without blocking the running of the program, achieving the effect of no refresh. JavaScript is single-threaded and will block code execution, so XmlHttpRequest is introduced to process asynchronous data. The combination of XHR and AJAX technology can make the web page partially update the content of the page without refreshing, and speed up the display of the web page.
1. To create an xhr object, there are mainly two modes, compatibility mode and standard mode.
(1) Standard mode: xhr = new XMLHttpRequest()
(2) Compatibility mode: by adding judgment conditions
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
//for IE6, IE5 兼容
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
2. Establish a connection: Call the xhr.open(parameter 1, parameter 2, parameter 3) method to connect to the server.
Parameter 1: The method of request, mainly including "GET" and "POST"
Parameter 2: URL of the request
Parameter 3: Boolean whether to send the request asynchronously, usually not filled, the default is "TRUE", which means asynchronous sending, in general, Synchronous sending is not recommended.
To open VIP this XHR loaded API
Open this API, normally returns {"result": 1}
3. Send the request: xhr.send();
4. Create a readyStateChange event to monitor the request
Among the judgment conditions, when xhr.readyState is 4, it means that the download operation is completed; when
xhr.status is 200, it means that the response status code is normal.
// 发送请求
xhr.send();
// 创建监听请求的readyStateChange事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
alert(xhr.responseText);
} else {
alert('出错了，Err:' + xhr.status);
}
}
};
The request result is displayed normally, and the response content of the interface is returned.
Then use "GET" as the request method to test.
Similarly, the request result is displayed normally, and the response content of the interface is returned.
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");