work hard
Table of contents
1. Improve user experience and achieve partial refresh effect
2. Improve performance and reduce bandwidth consumption
The working process of Ajax is divided into the following steps:
The most basic Ajax code demonstration:
Parameter analysis in the open function:
The difference between readyState and state in Ajax
The difference between readyState and status in Ajax:
what is http response status code
Why do you need Ajax?
Ajax (Asynchronous JavaScript and XML) is a technology for asynchronous transmission of web pages through JavaScript and XML. Its appearance mainly solves the following two problems:
1. Improve user experience and achieve partial refresh effect
In a traditional web application, when the user interacts with the server, the page needs to be reloaded, which leads to poor user experience. However, using Ajax technology, part of the page content can be updated without refreshing the entire page, thereby improving the user experience.
For example, in an e-commerce website, when a user clicks the "Add to Cart" button, you can use Ajax to add items to the shopping cart, and dynamically display the number of items in the shopping cart on the page without refreshing the entire page.
2. Improve performance and reduce bandwidth consumption
In traditional web applications, every interaction with the server requires the entire page to be reloaded, resulting in wasted performance and bandwidth consumption. With Ajax technology, the required data can be obtained without refreshing the entire page, thereby improving performance and reducing bandwidth consumption.
For example, in a news website, when a user clicks on a certain category label, Ajax can be used to obtain the news list under this category, and only the required part of the list can be displayed without reloading the entire page.
In short, the traditional methods we use such as a tag (hyperlink) to access the server to obtain resources cannot achieve the partial refresh effect of the page, but Ajax can achieve the partial refresh effect of the page;
What is Ajax
Ajax: Asynchronous JavaScript and XML, Ajax is a technology for creating fast and dynamic web pages. Ajax enables web pages to be updated asynchronously by exchanging small amounts of data with the server in the background. This means that a certain part of the webpage can be updated without reloading the entire webpage, while traditional webpages that do not use Ajax must reload the entire webpage if the content needs to be updated.
How Ajax Works
The working principle of Ajax is quite about adding an intermediate layer (Ajax engine) between the user and the server, making user operations and server responses asynchronous, not all user requests are submitted to the server. Some data validation and data processing are handed over to the Ajax engine itself. Only when it is determined that new data needs to be read from the server will the Ajax engine submit a request to the server on its behalf.
The working process of Ajax is divided into the following steps:
The user interacts with the browser, triggering events (such as clicking a button).
The JavaScript code is executed, an XMLHttpRequest object is created, and a callback function is specified.
The XMLHttpRequest object initiates an asynchronous request to the server and sends data.
The server receives the request and processes the data, and returns the result to the XMLHttpRequest object.
The XMLHttpRequest object passes the server response to the callback function for processing.
The callback function updates the page content to display the latest data.
The most basic Ajax code demonstration:
//new XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//调用回调函数
xhr.onreadystatechange = function(){
if (this.readyState == 4) {
if (this.status == 200) {
var jsonobj = JSON.parse(this.responseText);
jsonstr.success(jsonobj)
} else {
alert(this.status)
}
}
}
//打开通道并传入必要参数（请求方式、url、是否支持异步）
xhr.open("method"," url"，async)
//发送数据
xhr.send()Parameter analysis in the open function:
1. The method parameter is the HTTP method used for the request. Values include GET, POST, HEAD, PUT, DELETE (case insensitive)
2. The url parameter is the body of the request. Most browsers implement a same-origin security policy and require that this URL have the same hostname and port as the text containing the script
3. The async parameter indicates that the request usage should be performed asynchronously. If this parameter is false, the request is synchronous and subsequent calls to send() will block until the response is fully accepted; if this parameter is true or omitted, the request is asynchronous and usually requires an onreadystatechange event handler.
The difference between readyState and state in Ajax
In Ajax, the correct terms are readyState and status not state. readyState refers to the current state of the XMLHttpRequest object, and its value varies from 0 to 4, indicating different stages of the request (initialization, loading data, processing data, and completing the request). The status is the status code of the HTTP response, indicating the status information returned by the server, for example, 200 means success, and 404 means the requested resource was not found.
Detailed difference:
The difference between readyState and status in Ajax:
| Attributes | describe |
|---|---|
| readyState | The current state of the XMLHttpRequest object, ranging from 0 to 4. |
| 0（UNSENT） | XMLHttpRequest was created, but not opened (open method not called). |
| 1（OPENED） | The open method has been called, but the send method has not been called. |
| 2（HEADERS_RECEIVED） | The send method has been called, and the header and status are available. |
| 3（LOADING） | Downloading; the responseText property already contains some data. |
| 4（DONE） | The requested operation has completed. This means that the response data has been fully received. |
| status | HTTP response status code, indicating the status information returned by the server. |
| 200 | "OK". The request was successful. |
| 404 | "Not Found". The requested resource does not exist. |
| 500 | "Internal Server Error". The server encountered an error. |
Note that "state" is not the correct term in Ajax, "status" should be used, which I corrected in the form.
what is http response status code
An HTTP response status code is a 3-digit code sent by a web server to a client (such as a browser) to indicate the result of a particular HTTP request. They are generated by web servers to indicate whether the request completed successfully and to tell the client what to do with the response data.
HTTP response status codes are divided into 5 categories:
1xx (Informational): The request has been accepted and needs to be processed further.
2xx (Successful): The request has been successfully received, understood, and accepted by the server.
3xx (Redirection): Further action by the client is required to complete the request.
4xx (Client Error): The client request contained syntax errors or could not complete the request.
5xx (Server Error): The server was unable to complete an apparently valid request.
Common HTTP response status codes include 200 OK, indicating a successful request, 404 Not Found, indicating that the requested resource does not exist, and 500 Internal Server Error, indicating an internal server error.