一、什么是ajax
ajax是一種異步通信技術。在ajax出現之前，客戶端與服務端之間直接通信。引入ajax之后，客戶端與服務端加了一個第三者--ajax。有了ajax之后，通過在后台與服務器進行少量數據交換，可以達到在不刷新整個頁面的情況下實現局部刷新。其原理如圖
總結：簡單來說就是通過XmlHttpRequest對象來向服務器發異步請求，從服務器獲得數據，然后用javascript來操作DOM而更新頁面（這里並不是直接顯示在頁面）。
二：XmlHttpRequest對象
XMLHttpRequest是ajax的核心機制，完全是用來向服務器發出一個請求的，僅僅如此.
XMLHttpRequest對象一共有三個屬性：onreadystatechange(全小寫)、readyState、status
1.onreadystatechange
xmlhttp.onreadystatechange = function(){
}；
每次readyState對象的改變都會觸發一次onreadystatechange屬性儲存的函數，一次有效的Ajax請求一共會觸發5次該事件
2.readyState
一共有5個值，0~4分別代表不同的狀態。
0 —— 請求未初始化
1 —— 服務器已建立了鏈接
2 —— 請求已被服務器接收
3 —— 請求正在被處理
4 —— 請求完成處理，響應就緒
if(xmlhttp.readyState==4…):用以判斷當前服務器是否已准備好響應
3.Status
代表着Http狀態碼 200：OK
if(xmlhttp.readyState==4&& xmlhttp.status==200)
三：原生ajax的流程
原生ajax的請求總結為一下六個步驟
1.創建XHR對象
2.調用open()方法創建請求
3.調用send()方法發送請求
4.onreadychange捕獲請求的狀態碼
5.判斷狀態嗎是否成功
6.調用ajax的responseText屬性返回數據：（獲取服務器響應內容：responseText / responseXML）
四：Jquery對ajax的封裝
$.ajax，....(其他忽略)
這個是JQuery對ajax封裝的最基礎方法，通過使用這個函數可以完成異步通訊的所有功能。也就是說什么情況下我們都可以通過此方法進行異步刷新的操作。
jquery封裝了XMLHttpRequest的底層實現，直接調用提供的方法即可
function confirm(){
$('#check-form').bootstrapValidator('validate');
if($('#check-form').data('bootstrapValidator').isValid()){
if($.trim($('#password').val()) != ''){
var memberNo = getValueAny('memberNo');
var passwordEncrypt = $('#password').val();
ajax({
url: "@url("/common/checkPassword.action")",
type: "POST",
data:{
memberNo:getValueAny('memberNo'),
passwordEncrypt:passwordEncrypt
},
async:false,
success: function(result) {
this.parent.save();
closeSelfDialog();
}
});
}
}
}
contentType: 告訴服務器，我要發什么類型的數據
dataType：告訴服務器，我要想什么類型的數據，如果沒有指定，那么會自動推斷是返回 XML，還是JSON，還是script，還是String。
五 .json字符串與json對象的區別
a.JSON對象是直接可以使用JQuery操作的格式，如C#中可以用對象（類名）點出屬性（方法）一樣
b.JSON字符串僅僅只是一個字符串，一個整體，不截取的話沒辦法取出其中存儲的數據，不能直接使用，除非你只想alert()他；
JSON對象:
var str2 = { "name": "deluyi", "sex": "man" };
JSON字符串:
var str1 = '{ "name": "deyuyi", "sex": "man" }';
1.將"JSON對象"轉化為"JSON字符串"的方法?
使用全局方法JSON.stringify()與toJSONString()
例如：
obj.toJSONString(); //將JSON對象轉化為JSON字符
或者
JSON.stringify(obj); //將JSON對象轉化為JSON字符
var params = $('#user-form').serializeObject();//這樣就可以獲得整個表單所有字段的數據，並以object格式序列化
關於ajax設置contentType，data的部分相關實驗：
前端：
if ($('#main-form').data('bootstrapValidator').isValid()) {
var sql = document.getElementById('sql').value
$.ajax({
url:'@url("/loginSysInformConf/select.action")',
type:"post",
data:sql,
contentType:"application/json",
mask:true,
success:function(result){
if(result && result.data){
confirm(result.messages+"，是否要保存？", function(){
save();
});
}else{
error(result.messages+",請核對你的sql文");
}
},
error: function(xmlHttpRequest, message, exception) {
error("系統異常：\n" + message);
}
});
}
sql的值為：SELECT USER_NAME as USER_NAME,LAST_LOGIN_TIME as LAST_LOGIN_TIME FROM TB_USER@TEST
后台：
public ResultBean select(@RequestBody String sql){ List<SystemUserLoginInfoEntity> userList = loginSysInformConfService.select(sql); ResultBean bean=new ResultBean(); bean.setData(userList); if(userList != null && userList.size() > 0){ bean.setData(userList); bean.setMessages("測試通過"); bean.setStatus(true); }else{ bean.setMessages("測試未通過"); bean.setStatus(false); } return bean; }
情況1：data:sql contentType:"application/json", @RequestBody String sql
接收情況：SELECT USER_NAME as USER_NAME,LAST_LOGIN_TIME as LAST_LOGIN_TIME FROM TB_USER@TEST -------正常
情況2：data:JSON.stringify(sql) contentType:"application/json", @RequestBody String sql
接收情況："SELECT USER_NAME as USER_NAME,LAST_LOGIN_TIME as LAST_LOGIN_TIME FROM TB_USER@TEST"
情況3：data:{sql:sql} contentType:"application/json", @RequestBody String sql
接收情況：sql=SELECT+USER_NAME+as+USER_NAME%2CLAST_LOGIN_TIME+as+LAST_LOGIN_TIME+FROM+TB_USER%40TEST
情況4：data:sql @RequestBody String sql
接收情況：SELECT+USER_NAME+as+USER_NAME%2CLAST_LOGIN_TIME+as+LAST_LOGIN_TIME+FROM+TB_USER%40TEST=
情況5：data:JSON.stringify(sql) @RequestBody String sql
接收情況：%22SELECT+USER_NAME+as+USER_NAME%2CLAST_LOGIN_TIME+as+LAST_LOGIN_TIME+FROM+TB_USER%40TEST%22=
情況6：data:{sql:sql} @RequestBody String sql
接收情況：sql=SELECT+USER_NAME+as+USER_NAME%2CLAST_LOGIN_TIME+as+LAST_LOGIN_TIME+FROM+TB_USER%40TEST
情況7：data:{sql:sql} String sql
接收情況：SELECT USER_NAME as USER_NAME,LAST_LOGIN_TIME as LAST_LOGIN_TIME FROM TB_USER@TEST -------正常
情況8：data:JSON.stringify(sql) String sql
接收情況：null
情況9：data:sql String sql
接收情況：null
情況10：data:sql contentType:"application/json", String sql
接收情況：null
情況11：data:JSON.stringify(sql) contentType:"application/json", String sql
接收情況：null
情況12：data:{sql:sql} contentType:"application/json", String sql
接收情況：null
總結：1.@RequestBody接收的是一個Json對象的字符串，而不是一個Json對象
2. data:sql contentType:"application/json", @RequestBody String sql
或 data:{sql:sql} String sql才能正常接收數據
3.不使用contentType: “application/json”則data可以是對象------------data: { id: nodeId },
使用contentType: “application/json”則data只能是json字符串--------------------data: "{'id': " + nodeId +"}",