JavaScript Quick Start: Getting HTTP Status Codes

Quick Start: Using JavaScript to get HTTP status codes, specific code examples are required

Introduction:
When developing web applications, we often need to communicate with the server Interact and get HTTP status codes. HTTP status codes are three-digit numbers returned by the server in response to a request. They provide basic diagnostics and information about the status of the request. In this article, we will learn how to get HTTP status codes using JavaScript and provide some concrete code examples.

1. Use the XMLHttpRequest object to send an HTTP request
   To get the HTTP status code, we first need to use the XMLHttpRequest (XHR) object to send an HTTP request. XHR objects allow us to communicate asynchronously with the server and get response data in the background.

The following is a code example of using the XHR object to send a GET request:

let xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "http://example.com/api/data", true);
xmlhttp.send();

2. Monitoring the status changes of the XHR object
   When the XHR object sends a request and receives When responding, its readyState property changes. We can obtain the HTTP status code by listening for changes in this attribute.

The following is a code example of using the onreadystatechange event to monitor the status changes of an XHR object:

xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4) {
        console.log(this.status); // 输出HTTP状态码
    }
};

3. Get the HTTP status code
   Once the value of the readyState attribute of the XHR object is 4 , we can get the HTTP status code through the status attribute. HTTP status codes are usually returned in the form of numbers, such as 200 for "OK", 404 for "Not Found", 500 for "Internal Server Error", and so on.

The following is a code example to obtain the HTTP status code:

xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4) {
        console.log(this.status); // 输出HTTP状态码
    }
};

4. Handling different HTTP status codes
   According to different HTTP status codes, we can make different processing logic. The following are some common HTTP status codes and corresponding processing methods:

• 200: The request is successful and you can continue to process the data returned by the server.
• 404: The requested resource does not exist. You can display an error page or prompt the user to re-enter.
• 500: Internal server error. You can display an error page or report the problem to the server.

The following is a code example for processing according to different HTTP status codes:

xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4) {
        if (this.status === 200) {
            // 请求成功
            console.log("请求成功");
            console.log(this.responseText); // 输出服务器返回的数据
        } else if (this.status === 404) {
            // 请求的资源不存在
            console.log("请求的资源不存在");
        } else if (this.status === 500) {
            // 服务器内部错误
            console.log("服务器内部错误");
        }
    }
};

Conclusion:
In this article, we learned how to get HTTP status codes using JavaScript. We use the XMLHttpRequest object to send an HTTP request and obtain the status code by monitoring its status changes. According to different status codes, we can make different processing logic. These code examples can help us better understand and use JavaScript to handle HTTP status codes.

Although getting the HTTP status code is a simple task, it is very important for debugging and processing server responses. By understanding and using HTTP status codes, we can better handle problems in web applications and provide a better user experience.

The above is the detailed content of JavaScript Quick Start: Getting HTTP Status Codes. For more information, please follow other related articles on the PHP Chinese website!