閑話不多說,直接代碼解釋
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,//默認值: true
cache: true,//默認值: true,瀏覽器有可能從它的緩存中調(diào)取數(shù)據(jù)
contentType:'text/json',//默認值: "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 訪問認證請求的用戶名
password:"000000",//用于響應(yīng) HTTP 訪問認證請求的密碼
ifModified:true,//默認為false。僅在服務(wù)器數(shù)據(jù)改變時獲取新數(shù)據(jù)是钥。服務(wù)器數(shù)據(jù)改變判斷的依據(jù)是Last-Modified頭信息掠归。默認值是false缅叠,即忽略頭信息。
global:false,//默認為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,當請求之后調(diào)用领铐。傳入返回后的數(shù)據(jù)悯森,以及包含成功代碼的字符串");},
error:function(XMLHttpRequest,textStatus,errorThrown){alert("error,在請求出錯時調(diào)用");},
complete:function(XMLHttpRequest,textStatus){alert("complete,當請求完成之后調(diào)用這個函數(shù),無論成功或失敗");}
});
}
ajaxStart()與ajaxStop():當Ajax請求開始時绪撵,會觸發(fā)ajaxStart()方法的回調(diào)函數(shù)瓢姻。當Ajax請求結(jié)束時,會觸發(fā)ajaxStop()方法的回調(diào)函數(shù)音诈。這些方法都是全局的方法幻碱,因此無論創(chuàng)建它們的代碼位于何處,只要有Ajax請求發(fā)生時细溅,就會觸發(fā)它們褥傍。
有時候頁面需要加載一些圖片,可能速度會比較慢喇聊,如果在加載過程中恍风,不給用戶提供一些提示和反饋信息,很容易讓用戶誤認為按鈕單擊無用誓篱,使用戶對網(wǎng)站失去信息朋贬。此時,我們就需要為網(wǎng)頁添加一個提示信息窜骄,常用的提示信息是“加載中...”锦募,代碼如下:
界面:<div id="loading">加載中...</div>
當Ajax請求開始時,將此元素顯示邻遏,用來提示用戶Ajax請求正在進行糠亩;當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里最頁面渲染時,頁面操作默認是在頁面主線程執(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引擎線程祝钢,負責(zé)執(zhí)行js代碼薪鹦,還有一個常駐線程叫GUI渲染線程,負責(zé)頁面渲染叹坦,dom重畫等操作害淤。javascript引擎是基于事件驅(qū)動單線程執(zhí)行的扇雕,js線程一直在等待著任務(wù)列表中的任務(wù)到來,而js線程與gui渲染線程是互斥的筝家,當js線程執(zhí)行時洼裤,渲染線程呈掛起狀態(tài),只有當js線程空閑時渲染線程才會執(zhí)行溪王。所以腮鞍,我們可以理解為什么dom更新總是不能被立刻執(zhí)行。就我們的代碼來說莹菱,顯示提示和隱藏提示的dom操作都被瀏覽器記下來了并放在gui渲染線程的任務(wù)隊列中移国,但都沒有立刻進行渲染,而是在當前函數(shù)完成后(js線程已處于空閑狀態(tài))道伟,進行最終的dom渲染迹缀,而我們的用戶則基本感受不到這個過程,因為經(jīng)過show和hide兩個相反的操作蜜徽,相當于dom完全沒變祝懂。