How to set the timeout for Ajax requests?

How to set the expiration time of Ajax request? Need specific code examples

With the development of Internet applications, Ajax has become an indispensable part of Web development. When sending an Ajax request, sometimes we need to limit the expiration time of the request to prevent the request from being too long, resulting in poor user experience or browser freezes. This article will introduce in detail how to set the expiration time of Ajax requests and give specific code examples.

Setting the expiration time of Ajax requests mainly needs to be achieved through the timeout attribute of the XMLHttpRequest object. This property is used to set the maximum waiting time for the request (in milliseconds). After this time, the request will be cancelled. We can follow the following steps to set the expiration time of Ajax requests:

Step 1: Create an XMLHttpRequest object
To send an Ajax request, you first need to create an XMLHttpRequest object. You can use the following code to create an XMLHttpRequest object that is compatible with major browsers:

var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

Step 2: Set request parameters and expiration time
Before sending an Ajax request, we need to set the request parameters and expiration time. . The following code shows how to set the parameters and expiration time of the Ajax request:

xhr.open("GET", "your_url_here", true);
xhr.timeout = 5000; // 设置请求的过期时间为5秒（5000毫秒）

In the above code, we use the open() method to set the request type (GET) and address (your_url_here), and set the third Each parameter is set to true to indicate an asynchronous request. Next, we use the timeout attribute to set the request's expiration time to 5000 milliseconds (i.e. 5 seconds).

Step 3: Monitor request status changes
After sending the Ajax request, we need to monitor the request status changes so that we can handle it accordingly when the request is completed or times out. The following is a code example for monitoring request status changes:

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // 请求成功，执行相应的操作
        } else {
            // 请求失败，执行相应的操作
        }
    }
};

xhr.ontimeout = function() {
    // 请求超时，执行相应的操作
};

In the above code, we use the onreadystatechange attribute to listen for request status changes. When readyState equals 4, it indicates that the request has been completed. If status is equal to 200, it means that the request is successful and the corresponding operation is performed; otherwise, it means that the request fails and the corresponding operation is performed. If the request times out, the ontimeout event will be triggered, and we can handle the timeout in the corresponding callback function.

Step 4: Send an Ajax request
The last step is to send an Ajax request. The following code shows how to send Ajax requests and perform corresponding operations:

xhr.send();

In the above code, we use the send() method to send Ajax requests.

In summary, through the above steps, we can easily set the expiration time of Ajax requests. The following is a complete code example:

var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // 请求成功，执行相应的操作
        } else {
            // 请求失败，执行相应的操作
        }
    }
};

xhr.ontimeout = function() {
    // 请求超时，执行相应的操作
};

xhr.open("GET", "your_url_here", true);
xhr.timeout = 5000; // 设置请求的过期时间为5秒（5000毫秒）
xhr.send();

Through the above example code, you can set the expiration time of the Ajax request according to actual needs, and perform corresponding operations when the request is completed or times out. I hope this article can help you understand and use the expiration time setting of Ajax requests.

The above is the detailed content of How to set the timeout for Ajax requests?. For more information, please follow other related articles on the PHP Chinese website!