1. 程式人生 > >Ajax基礎學習筆記三—jQuery實現Ajax

Ajax基礎學習筆記三—jQuery實現Ajax

1、  jQuery對Ajax操作進行封裝:

          最底層採用的方法是:$.ajax();

          第二層是load(),$.get(),$.post();

          第三次是$.getScript()和$.getJSON().

2、  load()方法的應用舉例

$(function(){
$("a").click(function(){
           //使用load()處理Ajax
           var url = this.href;
           var args = {"time" : newDate()};
           $("#content").load(url,args);
           return false;
});
});

3、  load()方法能載入遠端的HTML程式碼並插入到DOM中,結構形式如下:

          load(url,data,callback)

          其中data和callback可以省略不寫,即為:load(url)

          data是傳送到伺服器的key/value資料,採用的是json格式。

          同時,如果load()沒有data則採用GET請求,否則採用的是POST請求。

4、$.get()和$.post()方法

          使用格式:

          $.get(url,data,callback);說明:url為請求地址,data為請求資料的列表,callback為請求成功後的回撥函式,該函式接受兩個引數,第一個為伺服器返回的資料,第二個引數為伺服器的狀態,是可選引數。data和callback可以不寫。

          而其中,伺服器返回資料的格式其實是字串形勢,並不是我們想要的json資料格式。

          $.post(url,data,callback,type);說明:這個函式跟$.get()引數差不多,多了一個type引數,type為請求的資料型別,可以是html,xml,json等型別,如果我們設定這個引數為:json,那麼返回的格式則是json格式的,如果沒有設定,就和$.get()返回的格式一樣,都是字串。

5、$.ajax(option)

          這個函式的功能比較強大,可以對Ajax進行許多精確的控制,例如:

$.ajax({
url:"ajax/ajax_selectPicType.aspx",
data:{Full:"full"},
type: "POST",
dataType:'json',
success:CallBack,
error:function(er){
BackErr(er);}
});

6、$.getJSON(url,data,callback)

          採用的資料型別為json,因此在呼叫時需要使用jsonData.id方式(jsonData的屬性)

          JSON是一種理想的資料傳輸格式,它能夠很好的融合與JavaScript或其他宿主語 言,並且可以被JS直接使用。使用JSON相比傳統的通過 GET、POST直接傳送”裸體”資料,在結構上更為合理,也更為安全。至於jQuery的getJSON()函式,只是設定了JSON引數的 ajax()函式的一個簡化版本。這個函式也是可以跨域使用的,相比get()、post()有一定優勢。另外這個函式可以通過把請求url寫 成”myurl?callback=X”這種格式,讓程式執行回撥函式X。