Web前端學習 jQuery Ajax 2 Ajax入門

小編:啊南 2閱讀 2020.12.21

一、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() {//調用封裝的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函數來處理異步問題。

四、課后練習

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

關聯標簽:
欧美日韩在线精品视频二区_日本高清在线精品一区_天天看片天天av免费观看