Vue中使用XMLHttpRequest（XHR）來獲取數(shù)據(jù)的方式與傳統(tǒng)的HTML頁面相同。以下是Vue中XMLHttpRequest的詳細(xì)使用方法：

1.創(chuàng)建XMLHttpRequest對(duì)象

var xhr = new XMLHttpRequest();

2.設(shè)置請(qǐng)求參數(shù)

xhr.open('GET/POST', url, true); //第三個(gè)參數(shù)是是否異步請(qǐng)求，默認(rèn)為true

3.監(jiān)聽狀態(tài)變化

xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        //請(qǐng)求成功
    }
}

4.發(fā)送請(qǐng)求

xhr.send(data); //data是請(qǐng)求參數(shù)，可以是字符串、FormData等

5.獲取響應(yīng)數(shù)據(jù)

//String類型，返回的響應(yīng)數(shù)據(jù)，如果響應(yīng)內(nèi)容類型是json，則需要解析
xhr.responseText
 //XMLDocument類型，返回XML格式的響應(yīng)數(shù)據(jù)
xhr.responseXML

在Vue中，可以將XHR封裝在methods中的方法里，然后在Vue實(shí)例中調(diào)用該方法來實(shí)現(xiàn)數(shù)據(jù)的獲取和渲染。以下是一個(gè)簡(jiǎn)單的例子：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{item.title}}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: []
      }
    },
    methods: {
      getList() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos', true);
        xhr.onreadystatechange = function() {
          if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            this.list = JSON.parse(xhr.responseText);
          }
        }.bind(this);
        xhr.send();
      }
    },
    mounted() {
      this.getList();
    }
  }
</script>

XMLHttpRequest 是怎么回事

XMLHttpRequest（XHR）底層是基于HTTP協(xié)議實(shí)現(xiàn)的。 XMLHttpRequest對(duì)象有一個(gè)readyState屬性，表示XMLHttpRequest對(duì)象的狀態(tài)。

• 當(dāng)readyState為0時(shí)，XMLHttpRequest對(duì)象已經(jīng)創(chuàng)建，但還未初始化。
• 當(dāng)readyState為1時(shí)，XMLHttpRequest對(duì)象已經(jīng)調(diào)用open()方法，但還未發(fā)送請(qǐng)求。
• 當(dāng)readyState為2時(shí)，XMLHttpRequest對(duì)象已經(jīng)發(fā)送請(qǐng)求，但還未接收到響應(yīng)。
• 當(dāng)readyState為3時(shí)，XMLHttpRequest對(duì)象已經(jīng)接收到部分響應(yīng)數(shù)據(jù)。
• 當(dāng)readyState為4時(shí)，XMLHttpRequest對(duì)象已經(jīng)接收到全部響應(yīng)數(shù)據(jù)并解析完畢。

XMLHttpRequest對(duì)象還有一個(gè)status屬性，表示HTTP響應(yīng)狀態(tài)碼。常見的HTTP狀態(tài)碼有200表示請(qǐng)求成功，404表示請(qǐng)求的資源未找到，500表示服務(wù)器端內(nèi)部錯(cuò)誤等。

當(dāng)XMLHttpRequest對(duì)象接收到HTTP響應(yīng)時(shí)，客戶端腳本會(huì)根據(jù)響應(yīng)頭中的Content-Type字段來判斷響應(yīng)內(nèi)容的類型。

• 如果Content-Type為text/xml，客戶端腳本可以使用responseXML屬性來獲取XML格式的響應(yīng)數(shù)據(jù)。
• 如果Content-Type為text/plain或application/json，客戶端腳本可以使用responseText屬性來獲取純文本格式的響應(yīng)數(shù)據(jù)，然后解析成JSON對(duì)象。

到此這篇關(guān)于Vue中XMLHttpRequest的使用方法詳解的文章就介紹到這了,更多相關(guān)Vue XMLHttpRequest內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論