一、AJAX - 阿賈克斯
1、什麼是AJAX？
Asynchronous Javascript And Xml
是可以建立快速動态網頁的技術。可以實作異步更新，而不需要加載整個網頁，隻加載需要更 新某部分網頁。
同步通路：當用戶端向伺服器發送請求時，伺服器在處理過程中，浏覽器隻能等待，效率偏 低。
異步通路：當用戶端向伺服器發送請求時，伺服器在處理過程中，用戶端可以做其他的操作 不需要一直等待，效率偏高。
** Xml : eXtensible Markup Language
可擴充的 标簽 語言
AJAX優點：
1、異步 通路
2、局部 重新整理
AJAX的使用場合：
1、搜尋建議
2、表單驗證
3、前後端完全分離
2、AJAX的核心對象 – 異步對象（XMLＨttpRequest）
1、什麼是XMLＨttpRequest？
簡稱為“xhr”，稱為異步對象，代替浏覽器向伺服器發送請求并接受響應
xhr是由JS來提供
２、建立異步對象（ｘｈｒ）
主流的異步對象是XMLHttpRequest類型的，并且主流浏覽器都支援（IE7+， Chorme，Firefox,Opera）全部支援，但不支援IE低版本浏覽器（IE6以及以下）
XMLＨttpRequest，需要使用ActiveXobject() 來建立異步對象
支援 XMLＨttpRequest：
new XMLＨttpRequest()
不支援 XMLＨttpRequest：
new ActiveXobject("Microsoft,XMLHTTP")
下面是common.js代碼:
function getXhr(){
//如果浏覽器支援XMLHttpRequest,則建立XMLHttpRequest的對象并傳回
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
//如果浏覽器不支援XMLHttpRequest的話,則建立ActiveXObject的對象并傳回
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
3、xhr的成員
1、方法 - open（）
作用：建立請求
文法：open(method,url,async)
method：請求方法，取值為'get'或'post'
url：請求位址，字元串
async：是否采用異步的方式發送請求
true：使用異步方式發送請求
alse：使用同步方式發送請求
ex:
xhr.open('get','/server',true)
2、屬性 - readyState
作用：請求狀态，通過不同的請求狀态值來表示xhr與伺服器的互動情況
由0-4共五個值來表示五個不同的狀态
0：請求尚未初始化
1：xhr已經與伺服器建立連結
2：伺服器端已經開始接收請求
3：請求正在進行中
4：響應已完成
3、屬性 - status
作用：表示伺服器端的響應狀态碼
200：表示伺服器正确處理所有的請求以及給出響應
404：請求資源不存在
500：伺服器内部錯誤
4、屬性 - responseText
作用：伺服器端的響應資料
5、事件 - onreadystatechange
作用：每當xhr的readyState屬性值發生改變的時候要觸發的操作 - 回調函數
在該函數中，隻有當readyState的值為4并且status的值為200時，可以正常接收 responseText
6、方法 - send()
作用：通知xhr向伺服器發送請求
文法：send(body)
body：表示請求的主體
get請求：沒有請求主體的，是以body的值為null
xhr.send(null)
post請求：有請求主體的，是以body的位置處要表示請求資料
xhr.send("請求資料")
xhr.send("參數=值&參數=值")
4、AJAX的操作步驟
1、GET請求
1、建立xhr對象
2、建立請求 - open()
3、設定回調函數 - onreadystatechange
判斷狀态并且接收資料
4、發送請求 - send()
注意：如果有請求送出資料，則需要在url的後面拼查詢字元串
2、POST請求
1、請求送出的資料要作為send() 的參數進行送出
xhr.send('參數=值&參數=值')；
2、修改請求消息頭
在AJAX中，送出POST請求時，AJAX預設将Content-Type請求消息頭的值修改 為”text/plain“，是以導緻資料無法正常送出
解決方案：
将Content-Type的請求消息頭再修改回”application/x-www-form- urlencoded“即可
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
注意：如果有請求送出資料，則需要在send()中傳遞資料
例如：
$(function(){
$("#btnAjax").click(function(){
//1.擷取xhr
var xhr = getXhr();
//2.建立請求
xhr.open(‘get’,’/01-server’,true);
//3.設定回調函數
xhr.onreadystatechange = function(){
if(xhr.readyState4 && xhr.status200){
var resTxt = xhr.responseText;
console.log(resTxt);
}
}
//4.發送請求
xhr.send(null)
});
});
二、JQUERY 與 AJAX
1、$obj.load(url,data,callback)
作用：異步加載資料到 $obj 元素中
參數：
url：異步請求的位址
data：傳遞給伺服器端的參數（可選），該資料将決定請求方法是什麼
1、可以傳遞普通的字元串
"name=MrWang&age=30"
2、可以是JSON對象
｛
"name":"Mrwang",
"age":30,
｝
callback：異步請求成功之後的回掉函數（可選）
取值為匿名函數
function(resText,statusText){
rexText:響應資料，
statusText：響應資料的狀态
}
2、$.get(url,[data],[callback],[type])
url:異步請求位址
data:異步請求的參數
1、字元串：name = value&name=value
2、JSON：{"name":"value","name":"value"}
callback：請求成功後的回調函數
function(resText){
rexText：表示響應成功後的響應資料
}
type：響應回來的資料的類型
1、html：響應回來的是html文本
2、text：響應回來的是資料是text文本
3、json:json對象
4、script:js腳本代碼
注意：如果此處指定了類型，那麼在callback中，無需做類型的轉換
3、$.post()
4、$.ajax()
作用：自定所有的ajax行為
文法：$.ajax({ajax設定的參數資料對象})；
參數：
1、url：字元串，表示異步請求的位址
2、type：字元串，請求方式（get,post）
3、data:傳遞到伺服器端的參數
1、字元串："name=value&name=value"
2、JSON對象：{"name":"value"}
4、dataType：字元串，響應回來的資料的格式
1、html
2、xml
3、text
4、script
5、json
6、jsonp
5、success：回調函數，請求響應成功時的回調函數
function(data){
data:表示伺服器端響應回來的資料
}
6、error：回調函數，請求或響應失敗時的回調函數
7、beforeSend：回調函數，在發送ajax請求之前的回調函數，如果return false的話則表示終止本次請求
例子：以下便是Jquery中$ajax()：
$(function(){
$("#btnload").click(function(){
var params = {
'name':'MrWang',
'age':32,
}
$("#show").load('/02-server',
params,
function(resText,statusText){
console.log("響應成功");
console.log("resText:"+resText);
console.log("statusText:"+statusText);
});
});
});
![Spring MVC+Ajax建立執行個體[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)