Vue中XMLHttpRequest的使用方法詳解
Vue中使用XMLHttpRequest(XHR)來獲取數(shù)據(jù)的方式與傳統(tǒng)的HTML頁面相同。以下是Vue中XMLHttpRequest的詳細(xì)使用方法:
1.創(chuàng)建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
2.設(shè)置請求參數(shù)
xhr.open('GET/POST', url, true); //第三個參數(shù)是是否異步請求,默認(rèn)為true
3.監(jiān)聽狀態(tài)變化
xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { //請求成功 } }
4.發(fā)送請求
xhr.send(data); //data是請求參數(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實例中調(diào)用該方法來實現(xiàn)數(shù)據(jù)的獲取和渲染。以下是一個簡單的例子:
<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é)議實現(xiàn)的。 XMLHttpRequest對象有一個readyState屬性,表示XMLHttpRequest對象的狀態(tài)。
- 當(dāng)readyState為0時,XMLHttpRequest對象已經(jīng)創(chuàng)建,但還未初始化。
- 當(dāng)readyState為1時,XMLHttpRequest對象已經(jīng)調(diào)用open()方法,但還未發(fā)送請求。
- 當(dāng)readyState為2時,XMLHttpRequest對象已經(jīng)發(fā)送請求,但還未接收到響應(yīng)。
- 當(dāng)readyState為3時,XMLHttpRequest對象已經(jīng)接收到部分響應(yīng)數(shù)據(jù)。
- 當(dāng)readyState為4時,XMLHttpRequest對象已經(jīng)接收到全部響應(yīng)數(shù)據(jù)并解析完畢。
XMLHttpRequest對象還有一個status屬性,表示HTTP響應(yīng)狀態(tài)碼。常見的HTTP狀態(tài)碼有200表示請求成功,404表示請求的資源未找到,500表示服務(wù)器端內(nèi)部錯誤等。
當(dāng)XMLHttpRequest對象接收到HTTP響應(yīng)時,客戶端腳本會根據(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對象。
到此這篇關(guān)于Vue中XMLHttpRequest的使用方法詳解的文章就介紹到這了,更多相關(guān)Vue XMLHttpRequest內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+springboot實現(xiàn)項目的CORS跨域請求
這篇文章主要介紹了vue+springboot實現(xiàn)項目的CORS跨域請求,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09Vue動態(tài)設(shè)置img的src不生效的問題解決
本文主要介紹了Vue動態(tài)設(shè)置img的src不生效的問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01vue+axios 前端實現(xiàn)的常用攔截的代碼示例
這篇文章主要介紹了vue+axios 前端實現(xiàn)的常用攔截的代碼示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08