這篇文章給大家分享的是有關(guān)Ajax基礎(chǔ)之?dāng)?shù)據(jù)請求的案例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

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

Ajax 概述

它是瀏覽器提供的一套方法，可以實現(xiàn)頁面無刷新更新數(shù)據(jù)，提高用戶瀏覽網(wǎng)站應(yīng)用的體驗。

Ajax 的應(yīng)用場景

頁面上拉加載更多數(shù)據(jù)
列表數(shù)據(jù)無刷新分頁
表單項離開焦點數(shù)據(jù)驗證
搜索框提示文字下拉列表

Ajax 運(yùn)行原理及實現(xiàn)

Ajax 運(yùn)行原理
Ajax 相當(dāng)于瀏覽器發(fā)送請求與接收響應(yīng)的代理人，以實現(xiàn)在不影響用戶瀏覽頁面的情況下，局部更新頁面數(shù)據(jù)，從而提高用戶體驗。

Ajax 的實現(xiàn)步驟

1. 創(chuàng)建 Ajax 對象

 var xhr = new XMLHttpRequest();

1. 告訴 Ajax 請求地址以及請求方式

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

1. 發(fā)送請求

 xhr.send();

1. 獲取服務(wù)器端給與客戶端的響應(yīng)數(shù)據(jù)

xhr.onload = function () {
     console.log(xhr.responseText);
 }

服務(wù)器端響應(yīng)的數(shù)據(jù)格式
在真實的項目中，服務(wù)器端大多數(shù)情況下會以 JSON 對象作為響應(yīng)數(shù)據(jù)的格式。當(dāng)客戶端拿到響應(yīng)數(shù)據(jù)時，要將 JSON 數(shù)據(jù)和 HTML 字符串進(jìn)行拼接，然后將拼接的結(jié)果展示在頁面中。
在 http 請求與響應(yīng)的過程中，無論是請求參數(shù)還是響應(yīng)內(nèi)容，如果是對象類型，最終都會被轉(zhuǎn)換為對象字符串進(jìn)行傳輸。

JSON.parse() // 將 json 字符串轉(zhuǎn)換為json對象

請求參數(shù)傳遞

傳統(tǒng)網(wǎng)站表單提交

GET 請求方式

xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');

POST 請求方式

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('name=zhangsan&age=20');

請求報文
在 HTTP 請求和響應(yīng)的過程中傳遞的數(shù)據(jù)塊就叫報文，包括要傳送的數(shù)據(jù)和一些附加信息，這些數(shù)據(jù)和信息要遵守規(guī)定好的格式。

請求參數(shù)的格式

1. application/x-www-form-urlencoded

 name=zhangsan&age=20&sex=男

1. application/json

{name: 'zhangsan', age: '20', sex: '男'}

在請求頭中指定 Content-Type 屬性的值是 application/json，告訴服務(wù)器端當(dāng)前請求參數(shù)的格式是 json。

JSON.stringify() // 將json對象轉(zhuǎn)換為json字符串

注意：get 請求是不能提交 json 對象數(shù)據(jù)格式的，傳統(tǒng)網(wǎng)站的表單提交也是不支持 json 對象數(shù)據(jù)格式的。

獲取服務(wù)器端的響應(yīng)

Ajax 狀態(tài)碼
在創(chuàng)建ajax對象，配置ajax對象，發(fā)送請求，以及接收完服務(wù)器端響應(yīng)數(shù)據(jù)，這個過程中的每一個步驟都會對應(yīng)一個數(shù)值，這個數(shù)值就是ajax狀態(tài)碼。

0：請求未初始化(還沒有調(diào)用open())
1：請求已經(jīng)建立，但是還沒有發(fā)送(還沒有調(diào)用send())
2：請求已經(jīng)發(fā)送
3：請求正在處理中，通常響應(yīng)中已經(jīng)有部分?jǐn)?shù)據(jù)可以用了
4：響應(yīng)已經(jīng)完成，可以獲取并使用服務(wù)器的響應(yīng)了

xhr.readyState // 獲取Ajax狀態(tài)碼

onreadystatechange 事件

當(dāng) Ajax 狀態(tài)碼發(fā)生變化時將自動觸發(fā)該事件。
在事件處理函數(shù)中可以獲取 Ajax 狀態(tài)碼并對其進(jìn)行判斷，當(dāng)狀態(tài)碼為 4 時就可以通過 xhr.responseText 獲取服務(wù)器端的響應(yīng)數(shù)據(jù)了。

// 當(dāng)Ajax狀態(tài)碼發(fā)生變化時
 xhr.onreadystatechange = function () {
     // 判斷當(dāng)Ajax狀態(tài)碼為4時
     if (xhr.readyState == 4) {
         // 獲取服務(wù)器端的響應(yīng)數(shù)據(jù)
         console.log(xhr.responseText);
     }
 }

兩種獲取服務(wù)器端響應(yīng)方式的區(qū)別

Ajax 錯誤處理

1. 網(wǎng)絡(luò)暢通，服務(wù)器端能接收到請求，服務(wù)器端返回的結(jié)果不是預(yù)期結(jié)果。
   可以判斷服務(wù)器端返回的狀態(tài)碼，分別進(jìn)行處理。xhr.status 獲取http狀態(tài)碼
2. 網(wǎng)絡(luò)暢通，服務(wù)器端沒有接收到請求，返回404狀態(tài)碼。
   檢查請求地址是否錯誤。
3. 網(wǎng)絡(luò)暢通，服務(wù)器端能接收到請求，服務(wù)器端返回500狀態(tài)碼。
   服務(wù)器端錯誤，找后端程序員進(jìn)行溝通。
4. 網(wǎng)絡(luò)中斷，請求無法發(fā)送到服務(wù)器端。
   會觸發(fā)xhr對象下面的onerror事件，在onerror事件處理函數(shù)中對錯誤進(jìn)行處理。

低版本 IE 瀏覽器的緩存問題
問題：在低版本的 IE 瀏覽器中，Ajax 請求有嚴(yán)重的緩存問題，即在請求地址不發(fā)生變化的情況下，只有第一次請求會真正發(fā)送到服務(wù)器端，后續(xù)的請求都會從瀏覽器的緩存中獲取結(jié)果。即使服務(wù)器端的數(shù)據(jù)更新了，客戶端依然拿到的是緩存中的舊數(shù)據(jù)。

解決方案：在請求地址的后面加請求參數(shù)，保證每一次請求中的請求參數(shù)的值不相同。

 xhr.open('get', 'http://www.example.com?t=' + Math.random());

Ajax 異步編程

Ajax 封裝

問題：發(fā)送一次請求代碼過多，發(fā)送多次請求代碼冗余且重復(fù)。
解決方案：將請求代碼封裝到函數(shù)中，發(fā)請求時調(diào)用函數(shù)即可。

ajax({ 
     type: 'get',
     url: 'http://www.example.com',
     success: function (data) { 
         console.log(data);
     }
 })

Ajax 概述

它是瀏覽器提供的一套方法，可以實現(xiàn)頁面無刷新更新數(shù)據(jù)，提高用戶瀏覽網(wǎng)站應(yīng)用的體驗。

Ajax 的應(yīng)用場景

頁面上拉加載更多數(shù)據(jù)
列表數(shù)據(jù)無刷新分頁
表單項離開焦點數(shù)據(jù)驗證
搜索框提示文字下拉列表

感謝各位的閱讀！關(guān)于Ajax基礎(chǔ)之?dāng)?shù)據(jù)請求的案例分析就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當(dāng)前名稱：Ajax基礎(chǔ)之?dāng)?shù)據(jù)請求的案例分析-創(chuàng)新互聯(lián)
新聞來源：http://weahome.cn/article/dsdggj.html