Detailed explanation of how to use XMLHttpRequest in Vue

The way to get data using XMLHttpRequest (XHR) in Vue is the same as that of traditional HTML pages. The following is the detailed usage method of XMLHttpRequest in Vue:

1. Create XMLHttpRequest object

var xhr = new XMLHttpRequest();

2. Set request parameters

('GET/POST', url, true); //The third parameter is whether to request asynchronously，Default istrue

3. Monitoring status changes

 = function() {
    if ( ===  &&  === 200) {
        //Request succeeds    }
}

4. Send a request

(data); //dataYes the request parameter，Can be a string、FormDatawait

5. Get response data

//String type, the returned response data. If the response content type is json, it needs to be parsed
 //XMLDocument type, return the response data in XML format

In Vue, XHR can be encapsulated in methods in methods, and then this method is called in Vue instance to achieve data acquisition and rendering. Here is a simple example:

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="">{{}}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: []
      }
    },
    methods: {
      getList() {
        var xhr = new XMLHttpRequest();
        ('GET', '/todos', true);
         = function() {
          if ( ===  &&  === 200) {
             = ();
          }
        }.bind(this);
        ();
      }
    },
    mounted() {
      ();
    }
  }
</script>

What's going on with XMLHttpRequest

The underlying XMLHttpRequest (XHR) is implemented based on the HTTP protocol. The XMLHttpRequest object has a readyState property that represents the status of the XMLHttpRequest object.

• When readyState is 0, the XMLHttpRequest object has been created, but has not been initialized.
• When readyState is 1, the XMLHttpRequest object has called the open() method, but the request has not been sent yet.
• When readyState is 2, the XMLHttpRequest object has sent the request, but has not received the response.
• When readyState is 3, the XMLHttpRequest object has received part of the response data.
• When readyState is 4, the XMLHttpRequest object has received all the response data and has been parsed.

The XMLHttpRequest object also has a status attribute, indicating the HTTP response status code. Common HTTP status codes include 200 that indicates successful request, 404 that the requested resource is not found, 500 that indicates internal error on the server side, etc.

When the XMLHttpRequest object receives an HTTP response, the client script will determine the type of the response content based on the Content-Type field in the response header.

• If Content-Type is text/xml, the client script can use the responseXML attribute to get the response data in XML format.
• If Content-Type is text/plain or application/json, the client script can use the responseText property to get the response data in plain text format and then parse it into a JSON object.

This is the end of this article about the detailed explanation of how to use XMLHttpRequest in Vue. For more related content of Vue XMLHttpRequest, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!