【融職培訓】Web前端學習 第6章 jQuery Ajax 2 Ajax入門

一、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格式。

ajax的優缺點

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

二、Ajax原理

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

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庫來處理異步請求。

三、封裝一個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() {//調用封裝的Ajax13   myajax("get","/data",function(data){14       alert(data);15   });16 }

Promise

過多的使用回調函數會讓程序變得很難維護,接下來我們用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對象,并獲取后臺的字符串數據。