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,瀏覽器有可能從它的緩存中調取數據
                contentType:'text/json',//默認值: "application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型,經常會因為這個不設置導致前端的數據傳送到服務器,不被服務器識別,而讓用戶感覺前端數據沒有傳到服務器。
                dataType:"text/json",//預期服務器返回的數據類型,可不傳進行自動識別
                timeout:2000,//設置請求超時時間(毫秒)。此設置將覆蓋全局設置
                username:"caililiang",//用于響應 HTTP 訪問認證請求的用戶名
                password:"000000",//用于響應 HTTP 訪問認證請求的密碼
                ifModified:true,//默認為false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false,即忽略頭信息。
                global:false,//默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局ajax事件,ajaxStart和ajaxStop可用于控制各種ajax事件
                beforeSend:function(XMLHttpRequest){
                    this;//調用本次ajax請求時傳遞的options參數
                    debugger;alert("beforeSend,在發送請求之前調用");
                    return true;},//如果返回 false 可以取消本次 ajax 請求。
                dataFilter:function(data,type){alert("dataFilter,在請求成功之后調用");},//提供data和type兩個參數。data是Ajax返回的原始數據,type是調用jQuery.ajax時提供的dataTYpe參數
                success:function(data,textStatus){alert("seccess,當請求之后調用。傳入返回后的數據,以及包含成功代碼的字符串");},
                error:function(XMLHttpRequest,textStatus,errorThrown){alert("error,在請求出錯時調用");},
                complete:function(XMLHttpRequest,textStatus){alert("complete,當請求完成之后調用這個函數,無論成功或失敗");}
            });
        }

ajaxStart()與ajaxStop():當Ajax請求開始時,會觸發ajaxStart()方法的回調函數。當Ajax請求結束時,會觸發ajaxStop()方法的回調函數。這些方法都是全局的方法,因此無論創建它們的代碼位于何處,只要有Ajax請求發生時,就會觸發它們。
有時候頁面需要加載一些圖片,可能速度會比較慢,如果在加載過程中,不給用戶提供一些提示和反饋信息,很容易讓用戶誤認為按鈕單擊無用,使用戶對網站失去信息。此時,我們就需要為網頁添加一個提示信息,常用的提示信息是“加載中...”,代碼如下:
界面:<div id="loading">加載中...</div>
當Ajax請求開始時,將此元素顯示,用來提示用戶Ajax請求正在進行;當Ajax請求結束后,將此元素隱藏。代碼如下:
$("#loading").ajaxStart(function(){
    $(this).show();
  }).ajaxStop(function(){
       $(this).hide();
   })

注意同步異步屬性async的使用:
如$.ajax({
        url,
        type,
        data,
        async,
        success:function(){
        successfunction();
        }
    });
    afterfunction();

如果async為true,表示異步處理,則afterfunction()不用等待ajax的執行,如果async為false,表示同步處理,則afterfunction()需要等待ajax執行完才能開始執行(afterfunction()會在successfunction()后面執行);特別注意:在js里最頁面渲染時,頁面操作默認是在頁面主線程執行完之后才執行的,因此在做類似setAttribute()操作時會經常出現“不可理解”的問題,如在做遮罩時(某個操作前彈出遮罩,完成操作之后隱藏遮罩),如果這樣寫:
 顯示遮罩();
$.ajax({
        url,
        type,
        data,
        async:false,
        success:function(){
            隱藏遮罩();
        }
    });
則會出問題,此地是同步,按理是先顯示遮罩,然后ajax執行完之后再隱藏遮罩,但實際上卻頁面不會出現任何的遮罩現象,原因是顯示操作調用后不能立馬生效,必須等到頁面主線程處理完,此時主線程在等ajax執行,等到ajax執行完之后就執行了隱藏遮罩,最后主線程完成之后,再順序處理渲染命令,兩條命令幾乎同時執行,則頁面就看不到遮罩效果了,此時若把async改為true就可以正常顯示遮罩了。

如果下面這樣寫也會有問題:

顯示遮罩();
    $.ajax({
        url,
        type,
        data,
        async:false,
        success:function(){
        }
    });
    隱藏遮罩();
這里,不管async的值為true還是false,遮罩效果都出不來,因為不管同步還是異步,顯示遮罩和隱藏遮罩都是在主線程中,都是在主線程執行完后才執行任務,兩條命令幾乎同時執行,因此看不出效果。

正確的做法是用ajax回setTimeout函數實現前端的多線程操作,一次頁面渲染操作在主線程做,一次操作在子線程中處理,這樣才能實現頁面的兩次渲染在兩個不同的時間點上進行

原理:
深入研究瀏覽器內核可以發現,瀏覽器內核是多線程的,其中一個常駐線程叫javascript引擎線程,負責執行js代碼,還有一個常駐線程叫GUI渲染線程,負責頁面渲染,dom重畫等操作。javascript引擎是基于事件驅動單線程執行的,js線程一直在等待著任務列表中的任務到來,而js線程與gui渲染線程是互斥的,當js線程執行時,渲染線程呈掛起狀態,只有當js線程空閑時渲染線程才會執行。所以,我們可以理解為什么dom更新總是不能被立刻執行。就我們的代碼來說,顯示提示和隱藏提示的dom操作都被瀏覽器記下來了并放在gui渲染線程的任務隊列中,但都沒有立刻進行渲染,而是在當前函數完成后(js線程已處于空閑狀態),進行最終的dom渲染,而我們的用戶則基本感受不到這個過程,因為經過show和hide兩個相反的操作,相當于dom完全沒變。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容