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

1、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的優缺點

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

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

3、封裝一個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

過多的使用回調函數會讓程序變得很難維護，接下來咱們用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函數來處理異步問題。

4、課後練習

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

 

【融職教育】在工做中學習，在學習中工做