ajax簡介
Ajax，全稱“Asynchronous JavaScript and XML”（非同步JavaScript和XML），是一種用於建立互動式網頁應用的網頁開發技術。
它允許瀏覽器與伺服器之間進行非同步資料互動，可以在不重新載入整個頁面的情況下，更新頁面的部分內容。
AJAX的關鍵技術
XMLHttpRequest（簡稱XHR）：這是瀏覽器內建的物件，允許JavaScript在後臺（非同步）向伺服器傳送請求以及接收伺服器返回的資料。
JavaScript：編寫客戶端指令碼，用於呼叫XHR物件、處理伺服器返回的資料以及更新DOM樹中的部分內容。
資料格式：儘管名字中含有XML，但AJAX實際上並不侷限於XML資料格式，JSON現在已經成為更常用的資料交換格式，因為其可讀性強、體積小且容易被JavaScript解析。
非同步處理：與傳統的同步請求不同，非同步請求不會導致瀏覽器停止響應，使用者可以在等待伺服器響應的同時繼續與頁面進行其他互動。
可以實現的一些功能如下
動態載入資料：在不重新整理頁面的情況下，從伺服器獲取新的資料並更新頁面內容(百度搜尋)。
實時驗證：在使用者輸入時，實時檢查輸入的有效性並給出反饋。
提高使用者體驗：減少頁面的載入時間和重新整理次數，提供更加流暢的使用者互動。
原生ajax請求用法示例
// 建立 XMLHttpRequest 物件
var xhr = new XMLHttpRequest();
// 定義請求的方式（GET 或 POST）、URL 和是否非同步（true 表示非同步）
xhr.open("GET", "./static/json/test.json", true);
// 傳送請求前設定請求頭
xhr.setRequestHeader("Content-Type", "application/json");
// 定義處理請求成功的函式
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 請求成功，獲取響應的資料
var response = xhr.responseText;
console.log(response);
}
};
// 傳送請求
xhr.send();
上面就是一個最簡單的使用原生ajax傳送請求的示例。真實開發中很少使用這種方式，因為使用不方便。簡單的測試程式碼如下，
測試的test.json檔案內容如下
{
"code": 200,
"msg": "測試資料",
"data": {
"userName": "使用者名稱"
}
}
測試結果如下，
使用Jquery傳送ajax請求
以前使用Jquery傳送ajax請求比較常用，現在隨著技術的發展，Jquery也在逐步被淘汰。下面來講解一下如果透過Jquery傳送get請求和post請求。這時候就需要先引入Jquery檔案，可以在本地引入，也可以使用CDN。示例程式碼如下，
示例程式碼如下，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1.引入 jquery -->
<script src="https://code.jquery.com/jquery-3.7.1.slim.js"></script>
</head>
<body>
<button onclick="ajaxTestGet()">get請求示例</button>
<button onclick="ajaxTestPost()">post請求示例</button>
</body>
</html>
<script>
function ajaxTestGet(){
<!-- 2.使用 jquery -->
$.ajax({
// 請求地址
url: './static/json/test.json',
// 請求方式
type: 'get',
// 請求頭
headers:{
'loginToken': "null"
},
// 請求引數
data: {
"username": "username",
"password": "password"
},
//請求資料型別
contentType: 'application/json',
// 請求成功回撥函式
success: function (result) {
console.log("result--->", result);
},
// 請求失敗回撥函式
error: function () {
console.error("result--->", result);
},
// 請求超時時間
timeout: 180000,
});
}
function ajaxTestPost(){
$.ajax({
// 請求地址
url: './static/json/test.json',
// 請求方式
type: 'post',
// 請求頭
headers:{
'loginToken': "null"
},
// 請求引數
data: {
"username": "username",
"password": "password"
},
//請求資料型別
contentType: 'application/json',
// 請求成功回撥函式
success: function (result) {
console.log("result--->", result);
},
// 請求失敗回撥函式
error: function () {
console.error("result--->", result);
},
// 請求超時時間
timeout: 180000,
});
}
</script>
測試結果如下，
使用Axios傳送ajax請求
Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。Axios同樣可以用於傳送ajax請求的javaScript框架，目前在企業中使用最廣泛。promise是JavaScript中的一個函式，有興趣的可以去自學一下。官網地址如下，
http://www.axios-js.com/
可以在在node.js使用它，也可以直接在頁面中直接引入cdn使用。下面就簡單聊聊在html頁面中如何使用。示例程式碼如下，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1.引入 axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<button onclick="ajaxTestGet()">get請求示例</button>
<button onclick="ajaxTestPost()">post請求示例</button>
</body>
</html>
<script>
function ajaxTestGet(){
<!-- 2.使用 axios -->
axios.get('./static/json/test.json', {
params: {
ID: 12345
}
}).then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
function ajaxTestPost(){
axios.post('./static/json/test.json', {
firstName: 'Fred',
lastName: 'Flintstone'
}).then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
</script>
測試結果如下，
