Web前端學習 jQuery Ajax 2 Ajax入門

在我們之前學習的內容中，向服務器發送請求后，再瀏覽器中響應的頁面都是整頁刷新。

在某些項目中，我們只希望獲取頁面的局部數據，而不必整頁刷新，這個時候就需要使用Ajax來實現功能了。

Ajax 的全稱是Asynchronous JavaScript and XML（異步的JavaScript 和 XML）。這個概念出現的比較早，那個時候前端和后臺的數據交互主要以XML格式為主，例如下面的數據格式：

1 <fruit>
2    <name>apple</name>
3    <weight>0.5kg</weight>
4    <color>red</color>
5 </fruit>

現在仍然存在很多用xml交互數據的情況，但是目前主流的數據格式使用的是json（JavaScript對象表示法），例如下面的格式：

1 {
2     "fruit":{
3         "name":"apple",
4         "weight":"0.5kg",
5         "color":"red"
6     }
7 }

對于熟悉js的開發人員，這樣的格式再熟悉不過了，基本是零學習成本，以后我們使用Ajax傳遞數據都是使用json格式。

• 優點：按需獲取數據，提升系統性能。
• 缺點：異步獲取數據，不利于搜索引擎優化。

考慮一個問題，在之前的學習內容中，我們是如何向服務器發送請求的？這里我們列舉一下：

1. 在瀏覽器中直接輸入網址
2. a標簽實現的頁面跳轉
3. 表單提交
4. Postman模擬http請求

Ajax的原理是通過XMLhttpRequest對象向服務器發送請求，實例代碼如下所示：

 1 //后臺程序
 2 router.get("/", async ctx => {
 3     await ctx.render("index")
 4 })
 5 router.get("/data", async ctx => {
 6     ctx.body = "hello world"
 7 })
 8 
 9 //前端程序
10 var xhr = new XMLHttpRequest(); //創建XHR對象
11 xhr.open("get","/data");   //規定請求類型
12 xhr.send()                      //發送請求
13 xhr.onreadystatechange = function(){ //監聽readyState事件
14 // 0: 請求未初始化
15 // 1: 服務器連接已建立
16 // 2: 請求已接收
17 // 3: 請求處理中
18 // 4: 請求已完成，且響應已就緒
19   if(xhr.readyState === 4 && xhr.status === 200){
20       alert(xhr.responseText)
21   }
22 }

這里需要注意的是，上面的代碼，我們在實際開發項目中并不常用，因為通常情況下，我們會引入第三方Ajax庫來處理異步請求。

將上面的程序封裝到一個myAjax方法，實例代碼如下所示，這里需要注意的是，因為Ajax是異步的操作，因此封裝的Ajax不能用return獲取返回值。下面的示例使用的是回調函數封裝的Ajax方法

 1 function myAjax(method,url,next) {
 2    let xhr = new XMLHttpRequest();
 3    xhr.open(method, url);
 4    xhr.send()
 5    xhr.onreadystatechange = function () {
 6        if (xhr.readyState === 4 && xhr.status === 200) {
 7            next(xhr.responseText);
 8        }
 9    }
10 }
11 
12 document.querySelector("button").onclick = function() {//調用封裝的Ajax
13   myajax("get","/data",function(data){
14       alert(data);
15   });
16 }

過多的使用回調函數會讓程序變得很難維護，接下來我們用Promise重新封裝ajax方法，示例代碼如下所示：

 1 function myajax(method, url, next) {
 2    return new Promise(function (resolve,reject) {
 3        let xhr = new XMLHttpRequest();
 4        xhr.open(method, url);
 5        xhr.send(); //可以向后臺傳輸數據
 6        xhr.onreadystatechange = function () {
 7            if (xhr.readyState === 4 && xhr.status === 200) {
 8                resolve(xhr.responseText);
 9            }
10        }
11        reject("獲取數據失敗")
12    })
13 }
14 document.querySelector("button").onclick = async function () {
15    let p = myajax("get", "data");
16    p.then(function (data) {
17        alert(data);
18    })
19 }

使用async函數才是處理異步問題的終極解決方案，所以在后續的開發中，盡量使async函數來處理異步問題。

獨立完成封裝XMLHttpRequest對象，并獲取后臺的字符串數據。