How to make asynchronous requests via AJAX

#What I will share today is how to make asynchronous requests through AJAX. It has certain reference value and I hope it will be helpful to everyone.

AJAX definition

AJAX is the abbreviation of Asynchronous JavaScript XML, which allows us to directly obtain the latest content on the server through JavaScript without having to reload

page. Make the Web more user-friendly. In fact, AJAX is a set of APIs provided by browsers, which can be called through JavaScript to control requests and responses through code.

HTTP is a request-response protocol, which means that the browser makes a request to the web server, the web server then creates a response that it sends back to the browser, and the browser visually renders that text to user. However, if you only need to update a small portion of the page, you'll need to use AJAX and then use the browser's DOM model to dynamically insert the response into the page.

Four steps of AJAX asynchronous requests

(1) Create an XMLHttpRequest object for the browser

var xhr = new XMLHttpRequest();

(2) Create and send the request to Server functions:

xhr.open('GET', './demo.php');

(3) A request occurs through the connection

xhr.send(string);

(4) Specify the four xhr state change event processing functions

xhr.onreadystatechange = function () {
  // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
  if (this.readyState === 4) {
    // 通过 xhr 的 responseText 获取到响应的响应体
    console.log(this)

readyState Status

0: Indicates that xhr has been created but the open method has not been called.

1: The open() method has been called to establish the connection.

2: The send() method is called, and the status line and response header can be obtained.

3: While the response body is being loaded, the responseText attribute may already contain some data.

4: The response body is loaded and responseText can be used directly.

Example:

var xhr = new XMLHttpRequest()//0状态
xhr.open('GET', 'time.php')//1状态，open方法已经调用了，建立一个与服务端特定端口的连接
xhr.send()
xhr.addEventListener('readystatechange', function () {
})//里面包含了2，3，4三种状态，2分别为接受到了响应头但还没有接受到响应体；
正在下载响应报文；
报文下载下来处理响应体
xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
  }//处理函数

Summary: The above is the entire content of this article. I hope it will be helpful to everyone learning ajax.

The above is the detailed content of How to make asynchronous requests via AJAX. For more information, please follow other related articles on the PHP Chinese website!