jquery對ajax的支援

前面詳細介紹的了XMLHttpRequest http://www.cnblogs.com/shenliang123/archive/2012/05/13/2498524.html，是採用純js的方式來實現的，這樣有助於我們對底層XMLHttpRequest的實現的瞭解，但也有缺點就是建立會比較的麻煩並且不夠果斷

今天就來說說jquery對於ajax的支援，jquery封裝了XMLHttpRequest的底層實現，直接調用提供的方法即可

1.$.ajax(options)

這個方法是jquery對於ajax最為全面的支援，$.ajax(options)既可以發送GET請求，也可以發送POST請求等等，因此我們通過這個方法可以獲得ajax互動的所有控制權。

該方法中包含了一個參數options，該參數的形式為{key1:val1,key2:val2,key3:val3....},如

{        url:delTagAction,        data:{            sendTime:(new Date()).getTime(),            idStr:idStr        },        type:"post",        async:false,        dataType:"json",        success:function(data){            if(data.success){                $("#shield").fadeOut(400);                $("#subDetailWrapper").fadeOut(400);                $("#middle").load(listTagAction,                        {                            sendTime:(new Date()).getTime(),                            currentPage:currentPage                        }                )                alert("操作成功！！！");            }else{                alert("操作失敗，請聯絡開發人員！！！");            }        }    }

下面就介紹發送ajax請求可指定的各個選項：

常用的：
async-----------------------------------指定是否使用非同步請求，預設值為true(使用非同步)

beforeSend-----------------------------指定發送請求之前將觸發指定的函數，通過該函數我們可以在請求前加一些自訂的要求標頭或者是請求狀態條等，

complete-------------------------------指定ajax互動完成後的回呼函數，該函數將在succes或error回呼函數之後被調用。該選項指定的函數是形如：

function(xhr,textStatus){....},xhr表示本次互動的XMLHttpRequest對象,textStatus表示伺服器端相應狀態的描述。

data------------------------------------發送本次ajax請求的請求參數。指定的參數形如：{key1:val1,key2:val2,key3:val3....}

dataType------------------------------指定伺服器響應的類型，如果不指定，jquery會根據回應標頭來返回responseXML或responseText,並將響應傳給回呼函數對應的參數，可選值有以下：

　　xml:返回可以使用jquery處理的XML文檔

　　html:返回html文本

　　script:返回javascript指令碼，要注意的是此時必須將讀取瀏覽器緩衝禁止掉

　　json:返回一個符合json格式的字串

　　text:返回普通的文本響應

　　jsonp:指定使用jsonp載入json塊，使用jsonp時應該在請求的url之後額外添加“？callback=?”,其中callback為回呼函數

error-----------------------------------指定伺服器響應出現錯誤的回呼函數，指定的函數型形如function(xhr, textStatus, errorThrown){..},其中xhr參數表示請求的XMLHttpRequest對象，textStatus參數為關於錯誤的資訊描述，errorThrown參數表示引起錯誤的錯誤對象

success---------------------------------指定伺服器響應成功後的回呼函數，指定的函數型形如function(xhr, textStatus){..},其中xhr參數表示請求XMLHttpRequest對象，textStatus參數為伺服器響應狀態的資訊

timeout---------------------------------設定ajax請求逾時時間長度

type-------------------------------------設定發送請求的方式，常用的就是“POST”與"GET",預設值為"GET"

url---------------------------------------指定發送ajax請求的目的URL地址

 

其他：

cache-----------------------------------是否從瀏覽器中讀取緩衝，預設為true(讀取緩衝)，我們一般是不希望讀取緩衝的，辦法就是在發送的參數中新增時間戳記來騙過瀏覽器

contentType---------------------------指定發送到伺服器端的請求所使用的編碼格式，預設值為“application/x-www-form-urlencoded”

dataFilter------------------------------執行一個回呼函數，該回呼函數會對伺服器端的響應進行預先處理，指定的函數如：function(data,type){....},data表示伺服器端返回的響應，type表示伺服器端響應的資料類型

global----------------------------------設定是否觸發ajax的全域事件處理函數，預設值為true

ifModified------------------------------設定是否僅在伺服器資料改變擷取新資料，預設值為false

jsonp-----------------------------------該選型指定的值將會覆蓋jsonp中請求的callback函數

username-------------------------------對目標url需要使用者名稱的指定使用者名稱

password-------------------------------對目標url要求輸入密碼的指定密碼

processData----------------------------指定是否需要處理請求資料，預設為true(需要處理)

xhr--------------------------------------使用自己的方式來建立XMLHttpRequest對象

樣本常用選項的ajax：

function update(delTagAction, listTagAction){    var tagId = $("#examId").val();     var currentPage=$("#currentPage").val();  //擷取當前頁    //alert(currentPage);    var ids=new Array();    if($("input[name='id']:checked").size()==0){        alert("請先勾取選項！");        return false;            }    $("input[name='id']:checked").each(function(i,obj){        ids[i]=$(obj).val();    });    var idStr=ids.join("-");    $.ajax({        url:delTagAction,        data:{            sendTime: (new Date()).getTime(),            idStr: idStr,            tagId: tagId        },        type:"post",        async:false,        dataType:"json",        success:function(data){            if(data.success){                $("#middle").load(listTagAction,                        {                            sendTime:(new Date()).getTime(),                            currentPage:currentPage                        }                )                alert("操作成功！！！");            }else{                alert("操作失敗，請聯絡開發人員！！！");            }        }    });}

看上面的代碼大家可以看到一個load方法的使用：

$("#middle").load(listTagAction,
      {
       sendTime:(new Date()).getTime(),
       currentPage:currentPage
      }
)

load方法是一個非常便捷的ajax互動方法，它可以向一個遠程URL發送一個非同步請求，可以不需要指定回呼函數，可以指定一個制定id的css來自動載入伺服器的html響應

方法說明如下：load(url, [,data][,callback]),data是一個形如{key1:val2,key2:val2,key3:val3...}的js對象，callback為回呼函數，兩個參數都是可選的

下面樣本：

//根據省份來進行顯示function show(tagAction, city){    $("#detail").empty();    $("#detail").load(tagAction,        {            sendTime:(new Date()).getTime(),            city: city        }    );}

互動後，伺服器端返回的資料將載入到id為detail的元素的位置

2.上面介紹的$.ajax(options)為我們提供了全面控制ajax的請求細節，但另一個方面就會顯得比較的複雜，因此jquery提供了幾個簡單的方法來發送請求

(1)$.get(url, [data], [callback], [type]):向伺服器端發送GET請求，參數表示分別是：url：訪問的伺服器的地址；data:一個js對象，同於指定請求參數；

callback:指伺服器響應成功後的回呼函數，該函數形如：function(data, statusText){...}函數，其中data表示伺服器端的響應，statusText表示伺服器端

響應類型的描述資訊；type:表示伺服器端響應的資料類型

(2)$.post(url, [data], [callback], [type]):用於向伺服器端發送Post請求，用法與$.get()一樣

(3)$.getJSON(url, [data], [callback]):與$.get()一樣，只是預設指定type方式為json

(4)$.getScript(url, [callback])：與$.get()一樣，只是預設指定type方式為script

這四個方法都比較相似：以$.getJSON(url, [data], [callback])方法範例程式碼

function startExam() {    //這裡通過ajax進行互動    $.getJSON("../adminPath/startExamAction.action",             {                sendTime:(new Date()).getTime()            },             function(json) {            if (json.success == true) {                //alert(json.responseMsg);                $("#rightContent").load("../adminPath/settingExam.action",                         {                            sendTime: (new Date()).getTime(),                             pid: json.pid,                             tskid: json.tskid,                             examId: 0                        });            } else {                alert("\u64cd\u4f5c\u5931\u8d25\uff01");        }    });}