文章目錄
-
-
- 一.什麼是Ajax，為什麼要使用Ajax?
- 二.同步、異步互動概念
- 三.AJAX實作
- 四.原生JS中的Ajax原理（五個步驟）
-
一.什麼是Ajax，為什麼要使用Ajax?
AJAX是“Asynchronous JavaScript and XML”的縮寫。
- ① 他是指一種建立互動式網頁應用的網頁開發技術。
- ②用戶端與伺服器，可以在【不必重新整理整個浏覽器】的情況下，與伺服器進行異步通訊的技術。
二.同步、異步互動概念
- 兩者差別：
一個需要等待，一個不需要等待，在部分情況下，我們的項目開發中都會優先選擇不需要等待的異步互動方式。
- 哪些情況建議使用同步互動呢？
比如銀行的轉賬系統，對資料庫的儲存操作等等，都會使用同步互動操作，其餘情況都優先使用異步互動。
Ajax基礎知識+項目應用案例
三.AJAX實作
- $.ajax()
- $.get(url,params,fn,type) GET方式的異步請求
- $.post(url,params,fn,type) Post方式的異步請求
①url:待載入頁面的URL位址
②param:待發送 Key/value 參數。
③fn:載入成功時回調函數。
④type:傳回内容格式，xml, html, script, json, text, _default。
- 登入應用ajax案例
- POST請求案例
<script type="text/javascript">
function login() {
var loginName = $("#loginName").val();
var loginPwd = $("#loginPwd").val();
console.log(loginName+"---"+loginPwd);
$.post("merchant/login",{loginName:loginName,loginPwd:loginPwd},function (data) {
console.log(data);
if(data.code==1){
window.location.href="/index.html";
}
},"json");
}
</script>
- $.ajax()案例
$.ajax({
url:"http://www.microsoft.com", //請求的url位址
dataType:"json", //傳回格式為json
async:true,//請求是否異步，預設為異步，這也是ajax重要特性
data:{"id":"value"}, //參數值
type:"POST", //請求方式
beforeSend:function(){
//請求前的處理
},
success:function(req){
//請求成功時處理
},
complete:function(){
//請求完成的處理
},
error:function(){
//請求出錯處理
}
});
- 常用寫法
// 常用
$.ajax({
type:"post",
url:"",
data:{},
dataType:"json",
success:function(data){
}
})
四.原生JS中的Ajax原理（五個步驟）
- ①建立異步對象
var xhr = new XMLHttpRequest();
- ②設定 請求行 open(請求方式，請求url):
// get請求如果有參數就需要在url後面拼接參數，xhr.open(“get”,“validate.php?username=”+name)
// post如果有參數，就在請求體中傳遞
xhr.open(“post”,“validate.php”);
- ③設定請求頭:setRequestHeader()
- （GET方式忽略此步驟）
// 1.get不需要設定
// 2.post需要設定請求頭：
Content-Type:application/x-www-form-urlencoded
例：xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
- ④設定請求體 send()
// 1.get的參數在url拼接了，是以不需要在這個函數中設定
// 2.post的參數在這個函數中設定(如果有參數)
xhr.send(null) xhr.send(“username=”+name);
- ⑤讓異步對象接收伺服器的響應資料
-
//一個成功的響應有兩個條件： 1.伺服器成功響應了 2.異步對象的響應狀态為4(資料解析完畢可以使用了)
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
console.log(xhr.responseText);
}
- AJAX的實作原理：
Ajax的原理簡單來說通過浏覽器的javascript對象XMLHttpRequest(Ajax引擎)對象向伺服器發送異步請求并接收伺服器的響應資料，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料。即使用者的請求間接通過Ajax引擎發出而不是通過浏覽器直接發出，同時Ajax引擎也接收伺服器傳回響應的資料，是以不會導緻浏覽器上的頁面全部重新整理。
We improve ourselves by victories over ourselves
2020.02.29