JavaScript Tutorial: Learn How to Get HTTP Status Codes from Scratch

Start from scratch: JavaScript teaches you how to get the HTTP status code

In web development, we often need to communicate with the server, and understanding the HTTP status code is very important important part. HTTP status code is an identifier of the server's response to an HTTP request. The server uses the status code to tell the client the processing result of the request.

This article will use JavaScript to write code examples to teach you how to obtain the HTTP status code on the front end.

1. Use the XMLHttpRequest object to obtain the HTTP status code

The XMLHttpRequest object is the core of data exchange between the front end and the server. We can use it to send HTTP requests and obtain the response status code.

First, we create an XMLHttpRequest object:

var xhr = new XMLHttpRequest();

Next, we can use the open() method of the XMLHttpRequest object to specify the requested URL and request method (GET, POST, PUT, etc. ):

xhr.open('GET', 'http://www.example.com', true);

We can also use the setRequestHeader() method to set the request header, which is very useful when specific request headers need to be passed:

xhr.setRequestHeader('Content-Type', 'application/json');

Then, we use the send() method to Send a request:

xhr.send();

We need to listen to the readystatechange event of the XMLHttpRequest object, which is triggered when the request state changes. In the listening function, we can obtain the HTTP status code through the status attribute:

xhr.onreadystatechange = function() {
   if(xhr.readyState === 4) {
      console.log('HTTP状态码：', xhr.status);
   }
};

2. Use the fetch API to obtain the HTTP status code

fetch API is a modern network request in JavaScript method, we can also use it to get the HTTP status code.

Use the fetch method to send a GET request and obtain the HTTP status code as follows:

fetch('http://www.example.com')
   .then(response => {
      console.log('HTTP状态码：', response.status);
   });

It should be noted that the fetch method returns a Promise object, and we need to use .then() to process it Response to asynchronous requests.

3. Use the Axios library to obtain the HTTP status code

Axios is a very popular JavaScript library that can send network requests more concisely and provides a more friendly API. We can also use Axios to get HTTP status codes.

First, we need to introduce the Axios library:

<script src="https://cdn.jsdelivr.net/npm/axios"></script>

Then, the code to send a GET request and get the HTTP status code is as follows:

axios.get('http://www.example.com')
   .then(response => {
      console.log('HTTP状态码：', response.status);
   });

Axios’s concise API and elegant Chained calls allow us to send network requests more conveniently.

Through the above three methods, we can easily obtain the HTTP status code on the front end. Understanding HTTP status codes can help us better debug and handle network requests and improve user experience. Hope this article can be helpful to you!

The above is the detailed content of JavaScript Tutorial: Learn How to Get HTTP Status Codes from Scratch. For more information, please follow other related articles on the PHP Chinese website!