認識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对象

1. 請求參數傳遞

傳統網站表單提交

1.              
    
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 請求和回應的過程中傳遞的資料區塊就叫報文，包括要傳送的資料和一些附加訊息，這些資料和資訊要遵守規定好的格式。

請求參數的格式

application/x-www-form-urlencoded

##

 name=zhangsan&age=20&sex=男

# 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 的应用场景

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

相关学习推荐：javascript视频教程

以上是認識Ajax基礎之資料請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！