閑話不多說,直接代碼解釋
function ceshi(){
var json = {name:"caililiang",age:25};
$.ajax({
url:"com.renhe.raphael.renhe.Test.biz.ext",
type:"POST",
data:JSON.stringify(json),
async:false,//默認(rèn)值: true
cache: true,//默認(rèn)值: true,瀏覽器有可能從它的緩存中調(diào)取數(shù)據(jù)
contentType:'text/json',//默認(rèn)值: "application/x-www-form-urlencoded"。發(fā)送信息至服務(wù)器時內(nèi)容編碼類型,經(jīng)常會因為這個不設(shè)置導(dǎo)致前端的數(shù)據(jù)傳送到服務(wù)器,不被服務(wù)器識別,而讓用戶感覺前端數(shù)據(jù)沒有傳到服務(wù)器。
dataType:"text/json",//預(yù)期服務(wù)器返回的數(shù)據(jù)類型,可不傳進行自動識別
timeout:2000,//設(shè)置請求超時時間(毫秒)。此設(shè)置將覆蓋全局設(shè)置
username:"caililiang",//用于響應(yīng) HTTP 訪問認(rèn)證請求的用戶名
password:"000000",//用于響應(yīng) HTTP 訪問認(rèn)證請求的密碼
ifModified:true,//默認(rèn)為false。僅在服務(wù)器數(shù)據(jù)改變時獲取新數(shù)據(jù)。服務(wù)器數(shù)據(jù)改變判斷的依據(jù)是Last-Modified頭信息。默認(rèn)值是false,即忽略頭信息。
global:false,//默認(rèn)為true。表示是否觸發(fā)全局ajax事件。設(shè)置為false將不會觸發(fā)全局ajax事件,ajaxStart和ajaxStop可用于控制各種ajax事件
beforeSend:function(XMLHttpRequest){
this;//調(diào)用本次ajax請求時傳遞的options參數(shù)
debugger;alert("beforeSend,在發(fā)送請求之前調(diào)用");
return true;},//如果返回 false 可以取消本次 ajax 請求。
dataFilter:function(data,type){alert("dataFilter,在請求成功之后調(diào)用");},//提供data和type兩個參數(shù)。data是Ajax返回的原始數(shù)據(jù),type是調(diào)用jQuery.ajax時提供的dataTYpe參數(shù)
success:function(data,textStatus){alert("seccess,當(dāng)請求之后調(diào)用。傳入返回后的數(shù)據(jù),以及包含成功代碼的字符串");},
error:function(XMLHttpRequest,textStatus,errorThrown){alert("error,在請求出錯時調(diào)用");},
complete:function(XMLHttpRequest,textStatus){alert("complete,當(dāng)請求完成之后調(diào)用這個函數(shù),無論成功或失敗");}
});
}
ajaxStart()與ajaxStop():當(dāng)Ajax請求開始時,會觸發(fā)ajaxStart()方法的回調(diào)函數(shù)。當(dāng)Ajax請求結(jié)束時,會觸發(fā)ajaxStop()方法的回調(diào)函數(shù)。這些方法都是全局的方法,因此無論創(chuàng)建它們的代碼位于何處,只要有Ajax請求發(fā)生時,就會觸發(fā)它們。
有時候頁面需要加載一些圖片,可能速度會比較慢,如果在加載過程中,不給用戶提供一些提示和反饋信息,很容易讓用戶誤認(rèn)為按鈕單擊無用,使用戶對網(wǎng)站失去信息。此時,我們就需要為網(wǎng)頁添加一個提示信息,常用的提示信息是“加載中...”,代碼如下:
界面:<div id="loading">加載中...</div>
當(dāng)Ajax請求開始時,將此元素顯示,用來提示用戶Ajax請求正在進行;當(dāng)Ajax請求結(jié)束后,將此元素隱藏。代碼如下:
$("#loading").ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
})
注意同步異步屬性async的使用:
如$.ajax({
url,
type,
data,
async,
success:function(){
successfunction();
}
});
afterfunction();
如果async為true,表示異步處理,則afterfunction()不用等待ajax的執(zhí)行,如果async為false,表示同步處理,則afterfunction()需要等待ajax執(zhí)行完才能開始執(zhí)行(afterfunction()會在successfunction()后面執(zhí)行);特別注意:在js里最頁面渲染時,頁面操作默認(rèn)是在頁面主線程執(zhí)行完之后才執(zhí)行的,因此在做類似setAttribute()操作時會經(jīng)常出現(xiàn)“不可理解”的問題,如在做遮罩時(某個操作前彈出遮罩,完成操作之后隱藏遮罩),如果這樣寫:
顯示遮罩();
$.ajax({
url,
type,
data,
async:false,
success:function(){
隱藏遮罩();
}
});
則會出問題,此地是同步,按理是先顯示遮罩,然后ajax執(zhí)行完之后再隱藏遮罩,但實際上卻頁面不會出現(xiàn)任何的遮罩現(xiàn)象,原因是顯示操作調(diào)用后不能立馬生效,必須等到頁面主線程處理完,此時主線程在等ajax執(zhí)行,等到ajax執(zhí)行完之后就執(zhí)行了隱藏遮罩,最后主線程完成之后,再順序處理渲染命令,兩條命令幾乎同時執(zhí)行,則頁面就看不到遮罩效果了,此時若把async改為true就可以正常顯示遮罩了。
如果下面這樣寫也會有問題:
顯示遮罩();
$.ajax({
url,
type,
data,
async:false,
success:function(){
}
});
隱藏遮罩();
這里,不管async的值為true還是false,遮罩效果都出不來,因為不管同步還是異步,顯示遮罩和隱藏遮罩都是在主線程中,都是在主線程執(zhí)行完后才執(zhí)行任務(wù),兩條命令幾乎同時執(zhí)行,因此看不出效果。
正確的做法是用ajax回setTimeout函數(shù)實現(xiàn)前端的多線程操作,一次頁面渲染操作在主線程做,一次操作在子線程中處理,這樣才能實現(xiàn)頁面的兩次渲染在兩個不同的時間點上進行
原理:
深入研究瀏覽器內(nèi)核可以發(fā)現(xiàn),瀏覽器內(nèi)核是多線程的,其中一個常駐線程叫javascript引擎線程,負(fù)責(zé)執(zhí)行js代碼,還有一個常駐線程叫GUI渲染線程,負(fù)責(zé)頁面渲染,dom重畫等操作。javascript引擎是基于事件驅(qū)動單線程執(zhí)行的,js線程一直在等待著任務(wù)列表中的任務(wù)到來,而js線程與gui渲染線程是互斥的,當(dāng)js線程執(zhí)行時,渲染線程呈掛起狀態(tài),只有當(dāng)js線程空閑時渲染線程才會執(zhí)行。所以,我們可以理解為什么dom更新總是不能被立刻執(zhí)行。就我們的代碼來說,顯示提示和隱藏提示的dom操作都被瀏覽器記下來了并放在gui渲染線程的任務(wù)隊列中,但都沒有立刻進行渲染,而是在當(dāng)前函數(shù)完成后(js線程已處于空閑狀態(tài)),進行最終的dom渲染,而我們的用戶則基本感受不到這個過程,因為經(jīng)過show和hide兩個相反的操作,相當(dāng)于dom完全沒變。