本篇內(nèi)容介紹了“JavaScript中創(chuàng)建一個(gè)xhr對(duì)象并使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司專注于福鼎網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供福鼎營(yíng)銷型網(wǎng)站建設(shè)，福鼎網(wǎng)站制作、福鼎網(wǎng)頁設(shè)計(jì)、福鼎網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造福鼎網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供福鼎網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

一、概念

1.什么是Ajax

Ajax（Asynchronous Javascript And XML），即是異步的JavaScript和XML，Ajax其實(shí)就是瀏覽器與服務(wù)器之間的一種異步通信方式

異步的JavaScript

它可以異步地向服務(wù)器發(fā)送請(qǐng)求，在等待響應(yīng)的過程中，不會(huì)阻塞當(dāng)前頁面，在這種情況下，瀏覽器可以做自己的事情。直到成功獲取響應(yīng)后，瀏覽器才開始處理響應(yīng)數(shù)據(jù)。

XML

是前后端數(shù)據(jù)通信時(shí)傳輸數(shù)據(jù)的一種格式，現(xiàn)在已經(jīng)不怎么用了，現(xiàn)在比較常用的是 JSON

所以歸納上述的概念，Ajax就是在瀏覽器不重新加載網(wǎng)頁的情況下，對(duì)頁面的某部分進(jìn)行更新。

2.應(yīng)用場(chǎng)景

注冊(cè)頁面

搜索提示

還有很多很多...

所以Ajax最大的優(yōu)點(diǎn)就是，發(fā)送請(qǐng)求的時(shí)候不會(huì)影響用戶的操作，相當(dāng)于兩條平行線一樣，“你忙你的，我忙我的”，不需要去等待頁面的跳轉(zhuǎn)而浪費(fèi)時(shí)間。

二、實(shí)現(xiàn)Ajax

我們先看一組代碼：在這里創(chuàng)建的json文件和html文件都在同一個(gè)文件夾中

//test.josn的代碼

{

    "reply":"我收到啦！"

}

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = () => {

   if (xhr.readyState !== 4) return;

   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {

       console.log(xhr.responseText);

    }

};

xhr.open('GET', 'text.json', true);

xhr.send(null);

執(zhí)行結(jié)果：

在這里要啰嗦兩句：json文件中的對(duì)象鍵名一定要用雙引號(hào)包裹，如果屬性值里面有字符串，也需要用雙引號(hào)包裹。

執(zhí)行步驟

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

const xhr = new XMLHttpRequest();

2.利用onreadystatechange屬性，封裝一個(gè)函數(shù)，用于監(jiān)聽 readyState的變化。

xhr.onreadystatechange = () => {

if (xhr.readyState !== 4) return;

if (xhr.status >= 200 && xhr.status < 300 ){

    console.log(xhr.responseText);

    }

};

2.1在xhr對(duì)象執(zhí)行收發(fā)數(shù)據(jù)的時(shí)候，它會(huì)經(jīng)歷五種狀態(tài)：

Ajax狀態(tài)碼 狀態(tài)

0 （未初始化）未啟動(dòng)

1 （啟動(dòng)）已經(jīng)調(diào)用 open()，但尚未調(diào)用 send()

2 （發(fā)送）發(fā)送狀態(tài)，已經(jīng)調(diào)用 send()，但尚未接收到響應(yīng)

3 （接收）已經(jīng)接收到部分響應(yīng)數(shù)據(jù)

4 （完成）已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在瀏覽器中使用了

加兩句console.log()就可以看見狀態(tài)碼的變化了。

上述的readyStateChange事件是專門用來監(jiān)聽xhr對(duì)象的Ajax狀態(tài)碼，只要readyState（也就是Ajax狀態(tài)碼）發(fā)生了變化，就會(huì)觸發(fā)這個(gè)事件。

2.2判斷HTTP狀態(tài)碼是否為200-299

Ajax狀態(tài)碼為4是不夠的，這僅僅表明收到服務(wù)器端響應(yīng)的全部數(shù)據(jù)，并不能保障數(shù)據(jù)都是正確的。

所以，我們還需要判斷HTTP的狀態(tài)碼，判斷xhr對(duì)象的status屬性值是否在200到300之間（200-299 用于表示請(qǐng)求成功）

if (xhr.status >= 200 && xhr.status < 300 ){

    console.log(xhr.responseText);

}

所以要想請(qǐng)求成功完成，必須要滿足上面兩個(gè)條件。

3.準(zhǔn)備發(fā)送請(qǐng)求

xhr.open('GET','text.json', true);

參數(shù)1：選用"GET"或者“POST”的請(qǐng)求方式

參數(shù)2：發(fā)送請(qǐng)求的地址

參數(shù)3：是否異步

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

xhr.send(null)

 注意：send() 的參數(shù)是通過請(qǐng)求體攜帶的數(shù)據(jù)，而GET請(qǐng)求是通過請(qǐng)求頭攜帶數(shù)據(jù)的，所以要把send的參數(shù)置為null

三、跨域

概念

什么是跨域？為什么會(huì)有跨域這種問題存在？

跨域的字面意思來說，就是向一個(gè)域發(fā)送請(qǐng)求，如果要請(qǐng)求的域和當(dāng)前域是不同域，就叫跨域

https（協(xié)議）://a.xxx.com（域名）:8080（端口號(hào)）/flie/list（路徑）

只要協(xié)議、域名、端口號(hào)，只要有任何一個(gè)不一樣，都是不同域

同源策略

同源策略限制了跨域，同源策略是瀏覽器核心的安全機(jī)制，如果沒有了同源策略，瀏覽器的正常功能就會(huì)受到影響，所以web是構(gòu)建在同源策略的基礎(chǔ)之上。

如果非同源，那么在請(qǐng)求數(shù)據(jù)時(shí)，瀏覽器會(huì)在控制臺(tái)中報(bào)一個(gè)異常，提示拒絕訪問。

以下就是不同源：

前端： http://a.com:8080/

服務(wù)端：https//b.com/api/xxx

所以同源就是協(xié)議、域名、 端口號(hào)都要一樣。

跨域解決方法

1.CORS 跨域資源共享

2.JSONP

感興趣的同學(xué)可以去查閱一下這兩個(gè)解決方法，因?yàn)樾枰蠖薃PI的支持，所以這里就不給大家演示了。

四、寫一個(gè)簡(jiǎn)易的Ajax

這個(gè)代碼結(jié)合了Promise和Ajax的知識(shí)點(diǎn)，如果有小伙伴對(duì)Promise不熟悉的，可以點(diǎn)這里：

JavaScript異步（必考三座大三之三）——第三集：Promise_精通各種hello world的小希的博客-CSDN博客_js異步加載的方式

function ajax(url) {

      const p = new Promise((resolve, reject) => {

        const xhr = new XMLHttpRequest();

        xhr.open('GET', url, true)

        xhr.onreadystatechange = () => {

          if(xhr.readyState === 4){

            if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){

              resolve(

                JSON.parse(xhr.response)

              )

            }else{

              reject(new Error('Response error'))

            }

          }

        }

        xhr.send(null)

      })

     return p

}

const url = 'text.json'

ajax(url).then(res => console.log(res)).catch(err => console.log(err))

“JavaScript中創(chuàng)建一個(gè)xhr對(duì)象并使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！