Ajax基礎之數據請求的案例分析

這篇文章給大家分享的是有關Ajax基礎之數據請求的案例分析的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

Ajax 概述

它是瀏覽器提供的一套方法，可以實現頁面無刷新更新數據，提高用戶瀏覽網站應用的體驗。

Ajax 的應用場景

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

Ajax 運行原理及實現

Ajax 運行原理
Ajax 相當于瀏覽器發送請求與接收響應的代理人，以實現在不影響用戶瀏覽頁面的情況下，局部更新頁面數據，從而提高用戶體驗。

Ajax 的實現步驟

1. 創建 Ajax 對象

 var xhr = new XMLHttpRequest();

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

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

1. 發送請求

 xhr.send();

1. 獲取服務器端給與客戶端的響應數據

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

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

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

請求參數傳遞

傳統網站表單提交

<form method="get" action="http://www.example.com">
     <input type="text" name="username"/>
     <input type="password" name="password">
 </form>
 <!– http://www.example.com?username=zhangsan&password=123456 -->

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 請求和響應的過程中傳遞的數據塊就叫報文，包括要傳送的數據和一些附加信息，這些數據和信息要遵守規定好的格式。

請求參數的格式

1. application/x-www-form-urlencoded

 name=zhangsan&age=20&sex=男

1. application/json

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

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

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

注意：get 請求是不能提交 json 對象數據格式的，傳統網站的表單提交也是不支持 json 對象數據格式的。

獲取服務器端的響應

Ajax 狀態碼
在創建ajax對象，配置ajax對象，發送請求，以及接收完服務器端響應數據，這個過程中的每一個步驟都會對應一個數值，這個數值就是ajax狀態碼。

0：請求未初始化(還沒有調用open())
1：請求已經建立，但是還沒有發送(還沒有調用send())
2：請求已經發送
3：請求正在處理中，通常響應中已經有部分數據可以用了
4：響應已經完成，可以獲取并使用服務器的響應了

xhr.readyState // 獲取Ajax狀態碼

onreadystatechange 事件

當 Ajax 狀態碼發生變化時將自動觸發該事件。
在事件處理函數中可以獲取 Ajax 狀態碼并對其進行判斷，當狀態碼為 4 時就可以通過 xhr.responseText 獲取服務器端的響應數據了。

// 當Ajax狀態碼發生變化時
 xhr.onreadystatechange = function () {
     // 判斷當Ajax狀態碼為4時
     if (xhr.readyState == 4) {
         // 獲取服務器端的響應數據
         console.log(xhr.responseText);
     }
 }

兩種獲取服務器端響應方式的區別

Ajax 錯誤處理

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

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

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

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

Ajax 異步編程

Ajax 封裝

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

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

Ajax 概述

它是瀏覽器提供的一套方法，可以實現頁面無刷新更新數據，提高用戶瀏覽網站應用的體驗。

Ajax 的應用場景

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

感謝各位的閱讀！關于Ajax基礎之數據請求的案例分析就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！