Ajax(黑馬學習筆記)

Ajax介紹

Ajax概述

我們前端頁面中的數據，如下圖所示的表格中的學生信息，應該來自于后臺，那么我們的后臺和前端是互不影響的2個程序，那么我們前端應該如何從后臺獲取數據呢？因為是2個程序，所以必須涉及到2個程序的交互，所以這就需要用到我們接下來學習的Ajax技術。

Ajax:全稱Asynchronous JavaScript And XML，異步的JavaScript和XML。其作用有如下2點：

● 與服務器進行數據交換：通過Ajax可以給服務器發送請求，并獲取服務器響應的數據。

● 異步交互：可以在不重新加載整個頁面的情況下，與服務器交換數據并更新部分網頁的技術，如：搜索聯想、用戶名是否可用的校驗等等。

Ajax作用

我們詳細的解釋一下Ajax技術的2個作用

● 與服務器進行數據交互

如下圖所示前端資源被瀏覽器解析，但是前端頁面上缺少數據，前端可以通過Ajax技術，向后臺服務器發起請求，后臺服務器接受到前端的請求，從數據庫中獲取前段需要的資源，然后響應給前端，前端在通過我們學習的vue技術，可以將數據展示到頁面上，這樣用戶就能看到完整的頁面了。此處可以對比JavaSE中的網絡網絡編程技術來理解。

● 異步交互：可以在不重新加載整個頁面的情況下，與服務器交換數據并更新部分網頁的技術。

如下圖所示，當我們在百度搜索java時，下面的聯想數據時通過Ajax請求從后臺服務器得到的，在這個過程中，我們的Ajax請求不會導致整個百度頁面的重新加載，并且只針對搜索欄這局部模塊的數據進行了數據的更新，不會對整個頁面的其他地方進行數據的更新，這樣就大大提升了頁面的加載速度，用戶體驗高。

同步異步

針對于上述Ajax的局部刷新功能是因為Ajax請求是異步的，與之對應的有同步請求。接下來我們介紹一下異步請求和同步請求的區別。

? ??●?同步請求發送過程如下圖所示：

瀏覽器頁面在發送請求給服務器，在服務器處理請求的過程中，瀏覽器頁面不能做其他的操作。只能等到服務器響應結束后才能，瀏覽器頁面才能繼續做其他的操作。

? ??● 異步請求發送過程如下圖所示：

瀏覽器頁面發送請求給服務器，在服務器處理請求的過程中，瀏覽器頁面還可以做其他的操作。

原生Ajax

對于Ajax技術有了充分的認知了，我們接下來通過代碼來演示Ajax的效果。此處我們先采用原生的Ajax代碼來演示。因為Ajax請求是基于客戶端發送請求，服務器響應數據的技術。所以為了完成快速入門案例，我們需要提供服服務器端和編寫客戶端。

? ??● 服務器端

因為我們暫時還沒學過服務器端的代碼，所以此處已經直接提供好了服務器端的請求地址，我們前端直接通過Ajax請求訪問該地址即可。后臺服務器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

上述地址我們也可以直接通過瀏覽器來訪問，訪問結果如圖所示：只截取部分數據

? ??●?客戶端

客戶端的Ajax請求代碼如下有如下4步，接下來我們跟著步驟一起操作一下。

第一步：首先我們再VS Code中創建AJAX的文件夾，并且創建名為01. Ajax-原生方式.html的文件，提供如下代碼，主要是按鈕綁定單擊事件，我們希望點擊按鈕，來發送ajax請求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>原生Ajax</title>
</head>
<body><input type="button" value="獲取數據" onclick="getData()"><div id="div1"></div></body>
<script>function getData(){}
</script>
</html>

第二步：創建XMLHttpRequest對象，用于和服務器交換數據，也是原生Ajax請求的核心對象，提供了各種方法。代碼如下：

//1.創建XMLHttpRequest
var XMLHttpRequest = new XMLHttpRequest();

第三步：調用對象的open()方法設置請求的參數信息，例如請求地址，請求方式。然后調用send()方法向服務器發送請求，代碼如下：

//2.發送異步請求
xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
xmlHttpRequest.send();//發送請求

第四步：我們通過綁定事件的方式，來獲取服務器響應的數據。

//3.獲取服務響應數據
xmlHttpRequest.onreadystatechange = function(){//此處判斷 4表示瀏覽器已經完全接受到Ajax請求得到的響應，200表示這是一個正確的Http請求，沒有錯誤if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;}
}

最后我們通過瀏覽器打開頁面，請求點擊按鈕，發送Ajax請求，最終顯示結果如下圖所示：

并且通過瀏覽器的f12抓包，我們點擊網絡中的XHR請求，發現可以抓包到我們發送的Ajax請求。XHR代表的就是異步請求

Axios

上述原生的Ajax請求的代碼編寫起來還是比較繁瑣的，所以接下來我們學習一門更加簡單的發送Ajax請求的技術Axios 。Axios是對原生的AJAX進行封裝，簡化書寫。Axios官網是：https://www.axios-http.cn

Axios的基本使用

Axios的使用比較簡單，主要分為2步：

? ??● 引入Axios文件

<script src="js/axios-0.18.0.js"></script>

? ??● 使用Axios發送請求，并獲取響應結果，官方提供的api很多，此處給出2種，如下

? ? ? ??○ 發送get請求

axios({method:"get",url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){alert(resp.data);
})

? ? ? ??○ 發送post請求

axios({method:"post",url:"http://localhost:8080/ajax-demo1/aJAXDemo1",data:"username=zhangsan"
}).then(function (resp){alert(resp.data);
});

axios是用來發送異步請求的，小括號中使用js的JSON對象傳遞請求的相關參數：

? ??○ method屬性：用來設置請求方式的。取值為get或者post。

? ??○ url屬性：用來書寫請求的資源路徑。如果是get請求，需要將請求參數拼接到路徑的后面，格式為：url?參數名=參數值&參數名2=參數值2。

? ??○ data屬性：作為請求體被發送的數據。也就是說如果是post請求的話，數據需要作為data屬性的值。

then需要傳遞一個匿名函數。我們將then()中傳遞的匿名函數稱為回調函數，意思是該匿名函數在發送請求時不會被調用，而是在成功響應后調用的函數。而該回調函數中的resp參數是對響應的數據進行封裝的對象，通過resp.data可以獲取到響應的數據。

Axios快速入門

? ??● 后端實現

? ? ? ?查詢所有員工信息服務器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

? ? ? ?根據員工id刪除員工信息服務器地址：http://yapi.smart-xwork.cn/mock/169327/emp/deleteById

? ??● 前端實現

? ? ? ?首先在VS Code中創建js文件夾，與html同級，然后將axios-0.18.0.js文件拷貝到js目錄下，然后創建名為02.Ajax-Axios.html的文件，工程結果如圖所示：

然后在html中引入axios所依賴的js文件，并且提供2個按鈕，綁定單擊事件，分別用于點擊時發送ajax請求，完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios</title><script src="js/axios-0.18.0.js"></script>
</head>
<body><input type="button" value="獲取數據GET" onclick="get()"><input type="button" value="刪除數據POST" onclick="post()"></body>
<script>function get(){//通過axios發送異步請求-get}function post(){//通過axios發送異步請求-post}
</script>
</html>

然后分別使用Axios的方法，完成get請求和post請求的發送

get請求代碼如下：

//通過axios發送異步請求-get
axios({method: "get",url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then(result => {console.log(result.data);
})

post請求代碼如下：

//通過axios發送異步請求-post
axios({method: "post",url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data: "id=1"
}).then(result => {console.log(result.data);
})

瀏覽器打開，f12抓包，然后分別點擊2個按鈕，查看控制臺效果如下：

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios</title><script src="js/axios-0.18.0.js"></script>
</head>
<body><input type="button" value="獲取數據GET" onclick="get()"><input type="button" value="刪除數據POST" onclick="post()"></body>
<script>function get(){//通過axios發送異步請求-getaxios({method: "get",url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"}).then(result => {console.log(result.data);})}function post(){// 通過axios發送異步請求-postaxios({method: "post",url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data: "id=1"}).then(result => {console.log(result.data);})}
</script>
</html>

請求方法的別名

Axios還針對不同的請求，提供了別名方式的api，具體如下：

方法	描述
axios.get(url[,config])	發送get請求
axios.delete(url[,config])	發送delete請求
axios.post(url[,data[,config]])	發送post請求
axios.put(url[,data[,config]])	發送put請求

我們目前只關注get和post請求，所以在上述的入門案例中，我們可以將get請求代碼改寫成如下：

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {console.log(result.data);
}

post請求改寫成如下：

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result =>
{console.log(result,data);
})