jQuery中$.ajax()和$.getJson()同步處理詳解

更新時(shí)間：2015年08月12日 15:11:46 投稿：hebedich

這篇文章主要介紹了jQuery中$.ajax()和$.getJson()同步處理詳解的相關(guān)資料，非常的細(xì)致全面，有需要的小伙伴可以參考下。

一、前言

為什么需要用到同步，因?yàn)橛袝r(shí)候我們給一個(gè)提交按鈕注冊(cè)提交表單數(shù)據(jù)的時(shí)候，在提交動(dòng)作之前會(huì)進(jìn)行一系列的異步ajax請(qǐng)求操作，但是頁(yè)面js代碼會(huì)按順序從上往下面執(zhí)行，如果你在這過(guò)程中進(jìn)行了異步操作，那么獲取不到當(dāng)前異步操作返回的結(jié)果，js會(huì)繼續(xù)執(zhí)行下一條語(yǔ)句，所以我們需要同步操作請(qǐng)求獲取后臺(tái)返回?cái)?shù)據(jù)結(jié)果后，判斷結(jié)果是否符合再執(zhí)行js下一條語(yǔ)句。

二、$.ajax()參數(shù)解釋

url: 發(fā)送請(qǐng)求的地址。

type: 請(qǐng)求方式（post或get）默認(rèn)為get。

timeout: 要求為Number類型的參數(shù)，設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）。

async：默認(rèn)設(shè)置為true，所有請(qǐng)求均為異步請(qǐng)求。同步請(qǐng)求，設(shè)置為false。注意，同步請(qǐng)求將鎖住瀏覽器，用戶其他操作必須等待請(qǐng)求完成才可以執(zhí)行。-----這個(gè)是同步操作最重要的設(shè)置因素

cache：默認(rèn)為true,如果瀏覽器有緩存就會(huì)獲取瀏覽器的緩存數(shù)據(jù)，設(shè)置false怎么不會(huì)獲取緩存數(shù)據(jù)

data: 要求為Object或String類型的參數(shù)，發(fā)送到服務(wù)器的數(shù)據(jù)。如果已經(jīng)不是字符串，將自動(dòng)轉(zhuǎn)換為字符串格

式。get請(qǐng)求中將附加在url后。防止這種自動(dòng)轉(zhuǎn)換，可以查看processData選項(xiàng)。對(duì)象必須為key/value格

式，例如{foo1:"bar1",foo2:"bar2"}轉(zhuǎn)換為&foo1=bar1&foo2=bar2。如果是數(shù)組，JQuery將自動(dòng)為不同

值對(duì)應(yīng)同一個(gè)名稱。例如{foo:["bar1","bar2"]}轉(zhuǎn)換為&foo=bar1&foo=bar2。

dataType: 要求為String類型的參數(shù)，預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，JQuery將自動(dòng)根據(jù)http包mime

信息返回responseXML或responseText，并作為回調(diào)函數(shù)參數(shù)傳遞。

可用的類型如下：

xml：返回XML文檔，可用JQuery處理。

html：返回純文本HTML信息；包含的script標(biāo)簽會(huì)在插入DOM時(shí)執(zhí)行。

script：返回純文本JavaScript代碼。不會(huì)自動(dòng)緩存結(jié)果。除非設(shè)置了cache參數(shù)。注意在遠(yuǎn)程請(qǐng)求時(shí)（不在同一個(gè)域下），所有post請(qǐng)求都將轉(zhuǎn)為get請(qǐng)求。

json：返回JSON數(shù)據(jù)。

jsonp：JSONP格式。使用SONP形式調(diào)用函數(shù)時(shí)，例如myurl?callback=?，JQuery將自動(dòng)替換后一個(gè) “?”為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。

text：返回純文本字符串。

beforeSend：要求為Function類型的參數(shù)，發(fā)送請(qǐng)求前可以修改XMLHttpRequest對(duì)象的函數(shù)，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請(qǐng)求。XMLHttpRequest對(duì)象是惟一的參數(shù)。

            function(XMLHttpRequest){
               this;   //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)
            }

complete：要求為Function類型的參數(shù)，請(qǐng)求完成后調(diào)用的回調(diào)函數(shù)（請(qǐng)求成功或失敗時(shí)均調(diào)用）。參數(shù)：XMLHttpRequest對(duì)象和一個(gè)描述成功請(qǐng)求類型的字符串。

          function(XMLHttpRequest, textStatus){
             this;    //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)
          }

success：要求為Function類型的參數(shù)，請(qǐng)求成功后調(diào)用的回調(diào)函數(shù)，有兩個(gè)參數(shù)。

(1)由服務(wù)器返回，并根據(jù)dataType參數(shù)進(jìn)行處理后的數(shù)據(jù)。

(2)描述狀態(tài)的字符串。

function(data, textStatus){

//data可能是xmlDoc、jsonObj、html、text等等this;

//調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)

error：要求為Function類型的參數(shù)，請(qǐng)求失敗時(shí)被調(diào)用的函數(shù)。該函數(shù)有3個(gè)參數(shù)，即XMLHttpRequest對(duì)象、錯(cuò)誤信息、捕獲的錯(cuò)誤對(duì)象(可選)。

ajax事件函數(shù)如下：

       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情況下textStatus和errorThrown只有其中一個(gè)包含信息
          this;   //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)
       }

contentType：要求為String類型的參數(shù)，當(dāng)發(fā)送信息至服務(wù)器時(shí)，內(nèi)容編碼類型默認(rèn)為"application/x-www-form-urlencoded"。該默認(rèn)值適合大多數(shù)應(yīng)用場(chǎng)合。

dataFilter：要求為Function類型的參數(shù)，給Ajax返回的原始數(shù)據(jù)進(jìn)行預(yù)處理的函數(shù)。提供data和type兩個(gè)參數(shù)。data是Ajax返回的原始數(shù)據(jù)，type是調(diào)用jQuery.ajax時(shí)提供的 dataType參數(shù)。函數(shù)返回的值將由jQuery進(jìn)一步處理。

            function(data, type){
                //返回處理后的數(shù)據(jù)
                return data;
            }

global：要求為Boolean類型的參數(shù)，默認(rèn)為true。表示是否觸發(fā)全局ajax事件。設(shè)置為false將不會(huì)觸發(fā)全局 ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。

ifModified：要求為Boolean類型的參數(shù)，默認(rèn)為false。僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)。服務(wù)器數(shù)據(jù)改變判斷的依據(jù)是Last-Modified頭信息。默認(rèn)值是false，即忽略頭信息。

jsonp：要求為String類型的參數(shù)，在一個(gè)jsonp請(qǐng)求中重寫(xiě)回調(diào)函數(shù)的名字。該值用來(lái)替代在"callback=?"這種GET或POST請(qǐng)求中URL參數(shù)里的"callback"部分，例如 {jsonp:'onJsonPLoad'}會(huì)導(dǎo)致將"onJsonPLoad=?"傳給服務(wù)器。

username：要求為String類型的參數(shù)，用于響應(yīng)HTTP訪問(wèn)認(rèn)證請(qǐng)求的用戶名。

password：要求為String類型的參數(shù)，用于響應(yīng)HTTP訪問(wèn)認(rèn)證請(qǐng)求的密碼。

processData：要求為Boolean類型的參數(shù)，默認(rèn)為true。默認(rèn)情況下，發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對(duì)象（從技術(shù)角度來(lái)講并非字符串）以配合默認(rèn)內(nèi)容類型"application/x-www-form-urlencoded"。如果要發(fā)送DOM樹(shù)信息或者其他不希望轉(zhuǎn)換的信息，請(qǐng)?jiān)O(shè)置為false。

scriptCharset：要求為String類型的參數(shù)，只有當(dāng)請(qǐng)求時(shí)dataType為"jsonp"或者"script"，并且type是GET時(shí)才會(huì)用于強(qiáng)制修改字符集(charset)。通常在本地和遠(yuǎn)程的內(nèi)容編碼不同時(shí)使用。

三、$.getJson()同步設(shè)置

$.getJson()本身是異步操作的方法，需要經(jīng)過(guò)設(shè)置才能夠同步

在執(zhí)行之前加$.ajaxSettings.async = false; (同步執(zhí)行) 執(zhí)行你的代碼之后及時(shí)恢復(fù)為$.ajaxSettings.async = true；（異步執(zhí)行）不然影響別的地方的需要異步執(zhí)行的代碼。

四、具體操作例子

1、$.ajax()

 //點(diǎn)擊新增按鈕,新增數(shù)據(jù)
      $("#btnAdd").click(function () {
        var bool = true;//存儲(chǔ)異步請(qǐng)求結(jié)果是否通過(guò)
        //1、驗(yàn)證優(yōu)惠額度正確性
        var index = parseInt($("#intGiftMold").val());
        if (index == 1) {
          //滿減
          var reg = /^[0-9]+,[0-9]+$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('錯(cuò)誤提示', '滿減優(yōu)惠額度格式不正確', 'error');
            return false;
          }
        }
        else if (index == 2) {
          var reg = /^0\.[0-9]+$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('錯(cuò)誤提示', '折扣優(yōu)惠額度格式不正確', 'error');
            return false;
          }
        }
        else if (index == 3) {
          var reg = /^[1-9]+[0-9]$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('錯(cuò)誤提示', '指定金額優(yōu)惠額度格式不正確', 'error');
            return false;
          }
        }
        //2、驗(yàn)證優(yōu)惠范圍正確性
        var index = parseInt($("#intGiftRange").val());
        if (index == 1) { //選擇全站
        }
        else if (index == 3) {  //判斷商品ID
          $.ajax({
           type: "post",
            url: "Gift_Add.aspx",
           cache: false,
            async: false,  //設(shè)置同步了~~~~~~~~~
           dataType: "json",
            data: { "method": "isExistInfoTitle", "intInfoID": $("#intInfoID").val() },
            success: function (data) {
              if (data.result == "false") {
                $.messager.alert('錯(cuò)誤提示', '商品ID不存在', 'error');
                bool = false;
               $("#isExistInfoTitle").css({ "display": "" });
              }
              else {
                $("#isExistInfoTitle").css({ "display": "none" });
                bool = true;
              }
            }
          });
        }
          });
        }
if (bool == false) {//如果bool為false才返回，true繼續(xù)往下走
          return false;  //不能在異步方法里面return，不起作用
        }
        var validate = $("#form").form("validate");
        if (!validate) {//表單驗(yàn)證不通過(guò)
          return false;
        }
        //當(dāng)上面全部驗(yàn)證通過(guò)了執(zhí)行新增操作
        $.messager.confirm('溫馨提示', '是否確認(rèn)添加', function (r) {
          if (r) {
            $.post("Gift_Add.aspx?method=addGift", $("#form").serialize(), function (data) {
              $.messager.alert('成功提示', '添加成功', 'info');
            });
          }
        });
      });

2、$.getJson()

 //點(diǎn)擊新增按鈕,新增數(shù)據(jù)
      $("#btnAdd").click(function () {
        var bool = true;//存儲(chǔ)異步請(qǐng)求結(jié)果是否通過(guò)
        //1、驗(yàn)證優(yōu)惠額度正確性
        var index = parseInt($("#intGiftMold").val());
        if (index == 1) {
          //滿減
          var reg = /^[0-9]+,[0-9]+$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('錯(cuò)誤提示', '滿減優(yōu)惠額度格式不正確', 'error');
            return false;
          }
        }
        else if (index == 2) {
          var reg = /^0\.[0-9]+$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('錯(cuò)誤提示', '折扣優(yōu)惠額度格式不正確', 'error');
            return false;
          }
        }
        else if (index == 3) {
          var reg = /^[1-9]+[0-9]$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('錯(cuò)誤提示', '指定金額優(yōu)惠額度格式不正確', 'error');
            return false;
          }
        }
        //2、驗(yàn)證優(yōu)惠范圍正確性
        var index = parseInt($("#intGiftRange").val());
        if (index == 1) { //選擇全站
        }
        else if (index == 3) {  //判斷商品ID
           $.ajaxSettings.async = false; //設(shè)置getJson同步
          $.getJSON("Gift_Add.aspx", { "method": "isExistInfoTitle", "intInfoID": $("#intInfoID").val() }, function (data) {
            if (data.result == "false") {
              $.messager.alert('錯(cuò)誤提示', '商品ID不存在', 'error');
              bool = false;
              $("#isExistInfoTitle").css({ "display": "" });
            }
            else {
              $("#isExistInfoTitle").css({ "display": "none" });
              bool = true;
            }
          });
          $.ajaxSettings.async = true;//設(shè)置getJson異步
        }
          });
        }
        if (bool == false) {//如果bool為false才返回，true繼續(xù)往下走
          return false;  //不能在異步方法里面return，不起作用
        }
        var validate = $("#form").form("validate");
        if (!validate) {//表單驗(yàn)證不通過(guò)
          return false;
        }
        //當(dāng)上面全部驗(yàn)證通過(guò)了執(zhí)行新增操作
        $.messager.confirm('溫馨提示', '是否確認(rèn)添加', function (r) {
          if (r) {
            $.post("Gift_Add.aspx?method=addGift", $("#form").serialize(), function (data) {
              $.messager.alert('成功提示', '添加成功', 'info');
            });
          }
        });
      });

總結(jié)：

$.ajax 是傳統(tǒng)的 get、post 方法的 AJAX 實(shí)現(xiàn)
$.getJSON 是 jsonp （遠(yuǎn)程數(shù)據(jù)讀?。╊怉JAX 實(shí)現(xiàn)
之所以稱為類AJAX 是因?yàn)楸M管他被封裝在 jq 的 ajax 類中，但實(shí)際是透過(guò) script 節(jié)點(diǎn)實(shí)現(xiàn)的

在使用上 $.getJSON 和 $.ajax 的區(qū)別在于：

發(fā)送時(shí)，$.getJSON 會(huì)傳遞一個(gè)回調(diào)函數(shù)名（缺省時(shí)jq會(huì)給一個(gè)）
接收是，這個(gè)回調(diào)函數(shù)會(huì)被調(diào)用
$.getJSON 的服務(wù)器端必須將傳入的回調(diào)函數(shù)名附加在json數(shù)據(jù)之前
正因?yàn)檫@樣，這個(gè)返回的串就已經(jīng)不是 json 了（格式錯(cuò)了）
因此有 dataType:"json" 屬性的 $.ajax 會(huì)因json解析錯(cuò)誤而進(jìn)入 error 分支

您可能感興趣的文章: