jquery的ajax的使用記錄

閑話不多說,直接代碼解釋

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完全沒變祝懂。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市拘鞋,隨后出現(xiàn)的幾起案子砚蓬,更是在濱河造成了極大的恐慌,老刑警劉巖盆色,帶你破解...
    沈念sama閱讀 218,036評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件灰蛙,死亡現(xiàn)場離奇詭異,居然都是意外死亡隔躲,警方通過查閱死者的電腦和手機摩梧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來宣旱,“玉大人仅父,你說我怎么就攤上這事。” “怎么了驾霜?”我有些...
    開封第一講書人閱讀 164,411評論 0 354
  • 文/不壞的土叔 我叫張陵案训,是天一觀的道長买置。 經(jīng)常有香客問我粪糙,道長,這世上最難降的妖魔是什么忿项? 我笑而不...
    開封第一講書人閱讀 58,622評論 1 293
  • 正文 為了忘掉前任蓉冈,我火速辦了婚禮,結(jié)果婚禮上轩触,老公的妹妹穿的比我還像新娘寞酿。我一直安慰自己,他們只是感情好脱柱,可當我...
    茶點故事閱讀 67,661評論 6 392
  • 文/花漫 我一把揭開白布伐弹。 她就那樣靜靜地躺著,像睡著了一般榨为。 火紅的嫁衣襯著肌膚如雪惨好。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,521評論 1 304
  • 那天随闺,我揣著相機與錄音日川,去河邊找鬼。 笑死矩乐,一個胖子當著我的面吹牛龄句,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播散罕,決...
    沈念sama閱讀 40,288評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼分歇,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了欧漱?” 一聲冷哼從身側(cè)響起职抡,我...
    開封第一講書人閱讀 39,200評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎硫椰,沒想到半個月后繁调,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,644評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡靶草,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,837評論 3 336
  • 正文 我和宋清朗相戀三年蹄胰,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片奕翔。...
    茶點故事閱讀 39,953評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡裕寨,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情宾袜,我是刑警寧澤捻艳,帶...
    沈念sama閱讀 35,673評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站庆猫,受9級特大地震影響认轨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜月培,卻給世界環(huán)境...
    茶點故事閱讀 41,281評論 3 329
  • 文/蒙蒙 一嘁字、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧杉畜,春花似錦纪蜒、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至灭袁,卻和暖如春猬错,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背简卧。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評論 1 269
  • 我被黑心中介騙來泰國打工兔魂, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人举娩。 一個月前我還...
    沈念sama閱讀 48,119評論 3 370
  • 正文 我出身青樓析校,卻偏偏與公主長得像,于是被迫代替她去往敵國和親铜涉。 傳聞我的和親對象是個殘疾皇子智玻,可洞房花燭夜當晚...
    茶點故事閱讀 44,901評論 2 355

推薦閱讀更多精彩內(nèi)容