jQuery對Ajax操作進行了封裝,在jQuery中$.ajax()方法屬於最底層的方法,第二層是load()、$.get()和$.post()方法,第三層是$.getScript()和$.getJSON()方法。
一、load()方法
1、載入HTML文檔
load()方法是jQuery中最爲簡單和常用的Ajax方法,能載入遠程HTML代碼並插入DOM中,它的結構爲load(url【,data】【,callback】)
url:參數類型爲String,請求HTML頁面的URL地址
data(可選)類型是Object,發送至服務器的key/value數據
callback(可選)參數類型是function ,請求完成後的回調函數,無論請求成功或失敗
首先構建一個被load()方法加載並追加到頁面中的HTML文件,名字爲test.html,HTML代碼如下:
<div class=“comment">
已有評論:
</div>
<divclass="comment">
<h6>張三</h6>
<p class="para">沙發</p>\
</div>
<divclass="comment">
<h6>李四</h6>
<p class="para">板凳</p>
</div>
<divclass="comment">
<h6>王五</h6>
<p class="para">地板</p>
</div>
可以新建一個空白頁面,在上面添加一個空白頁面,在上面添加兩個元素,<button>按鈕用來觸發Ajax事件,id爲“resText”的元素用來顯示追加的HTML內容,HTML代碼如下:
<input type="button" id="send"value="Ajax獲取"/>
<div class="comment">已有評論:</div>
<divid="resText"></div>
接下來就可以開始編寫jQuery代碼了,等DOM元素加載完畢後,通過單機id爲send的按鈕來調用load()方法,然後將test.html的內容加載到id爲resTest的元素裏。
jQuery代碼如下:
function(){
$("#send").click(fucntion(){
$("#resText").load("test.html");
});
}
2、篩選載入的HTML元素
如果不想全部加載test.html中的內容,只是加載某些元素,可以使用load中的url參數語法達到目的。如:load方法參數語法結構爲"url selector".注意中間有空格。例如:
$("#resTest").load("test.html #para");//加載test.html頁面中id爲para的元素。
3、傳遞方式
load()方法的傳遞方式根據參數data來自動指定,如果沒有參數傳遞,則採用GET方式傳遞,反之自動轉換爲POST方式:
//無參數,則是GET方式
$("#restText").load("test.php",function(){
});
//有參數方式則是POST方式
$("#restTest).loca("test.php",(name:“rain”,age:"22"},function(){
});
4、回調函數
對於必須在加載完成後纔可以繼續的操作,load()方法提供了回調函數(callback),該函數有三個參數,分別代表請求返回的內容、請求狀態和XMLHttpRequest對象,jQuery代碼如下:
$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
});
PS:在load方法中,無論Ajax請求無論是否成功,只要當請求完成(complete)後,回調函數(callback)就會被觸發
二、$.get()方法和$.post()方法
load()方法通常用來從Web服務器上獲取靜態的數據文件,然而則這並不能體現Ajax的全部價值,在項目中,如果需要傳遞一些參數給服務器中的頁面,那麼可以使用$.get()或者$.post()方法(或者是$.ajax()方法)。
1、$.get()方法
$.get()方法使用GET方式來進行異步請求。它的結構爲:
$.get(url[,data][,callback][,type])
url,類型是String,請求HTML頁的URL地址
data(可選)類型是Object,發送至服務器的key/value數據會作爲QueryString附加到請求URL中
callback(可選),Function 載入成功時回調函數(只有當response的返回狀態是success才調用該方法)自動將請求結果和狀態傳遞該方法
type(可選),類型是String,服務器返回內容的格式,包括XML、html、script、json、text和_default。
$.get()的回調函數參數只有兩個參數,代碼如下:
function(data,textStatus){
//data : 返回的內容可以是XML文檔、JSON文件、HTML片段等等
//textStatus:請求狀態:sucess、error、notmodified、timout四種
}
data參數請求返回的內容,textStatus參數代碼請求的狀態,而且回到函數只有當數據成功返回(sucess)後才被調用,這點與load()方法不一樣。
數據格式:
1)HTML片段
由於服務器返回的數據格式是HTML片段,因此並不需要經過處理就可以將新的HTML數據插入到主頁面中。
$(funciton(){
$("#send").click(function(){
$.get("get1.php",{
username:$("#username").val(),
content: $("#content").val()
},function(data,textStatus){
$("#resText").html(data);//將返回的數據添加到頁面上
});
});
});
2)XML文檔
由於服務器返回的數據格式是XML文檔,因此許哦對返回的數據進行處理,處理XML和處理HTML文檔一樣,也可以使用常規的attr(),find(),filter()以及其他方法:
2、$.post()方法
它和$.get()方式使用相同,但是存在寫區別:
get請求會將參數跟在URL後進行傳遞,而POST請求則作爲HTTP消息的實體內容發送給Web服務端。當然,在Ajax請求中,這種區別對於用戶不可見的。
GET請求方式對傳輸的數據大小限制(通常不能大於2kb),而使用post請求數據量比GEt請求大得多(理論上講不受限制)。
GET凡是請求數據會被瀏覽器緩存起來,因此其他人可以從瀏覽器的瀏覽記錄裏面讀取這些數據,例如賬號和密碼等,某些情況下GET請求有嚴重的安全隱患。
GET和POST方式傳遞數據在服務器端獲取的方式不同。
三、$.getScript()方法和$.getJson()方法
1、$.getScript()方法
有時候頁面初次加載的時候就會取得所需的全部JavaScript文件是完全沒有必要的。雖然可以在選喲哪個JavaScript文件時,動態創建<script>標籤,如下:
$(document.createElcement("script")).attr("src","test.js").appendTo("head");
但是這種方式並不是很理想,爲此jQuery提供了$.getScript()方法來直接加載.js文件,與加載一個HTML片段一樣簡單方便,並且不需要對JavaScript文件進行處理。
jQuery代碼如下:
$(function(){
$("#send").click(funciton(){
$.getScript('test.js");
});
})
此方法也有回調函數,它會在JavaScript文件成功載入後運行,
語法結構如下:$.getScript("test.js",function(){.......});
2、$.getJSON()
$.getJSON()方法用於加載JSON文件,與$.getScript()方法的用法相同。
回調函數中的function(data){ }變量可以遍歷相應的數據,也可以使用迭代方式爲每個項構建相應的HTML代碼,雖然在這裏可以使用傳統的for循環來實現,同樣jQuery提供了一個通用的$.each()方法,可以用來遍歷對象和數組。
$.each()函數不同於jQuery對象的each()方法,它是一個全局函數,不操作jQuery對象,而是一個數組或者對象作爲第一個參數,以一個回調函數作爲第二個參數,回調函數擁有兩個參數:第一個爲對象的成員或數組索引,第二個爲對應變量或內容。例如:
$.each(data,function(){commentIndex.comment){
});
四、$.ajax()方法
$.ajax()方法是jQuery最底層的Ajax實現。
它的結構爲$.ajax(options)
該方法只有一個參數,但在這個對象裏包含了$.ajax()方法所需要的請求設置以及回調函數等信息,參數以key/value的形式存在,所有參數都是可選的。參數解釋如下:
url : String類型,發送請求的地址(默認是當前頁地址)
type : String類型,請求方式(POST或者GET),注意其他HTTP請求方式例如put和DELETE也可以使用,但是僅部分瀏覽器支持。
timeout: Number ,設置請求的超時時間,此設置將覆蓋$.ajaxSetup()方法全局設置
data: Object或者String ,發送到服務器端的數據,如果已經被奴是字符串會自動轉換成字符串格式,GET請求中獎附加到URL後,防止這種自動轉換,可以查看processData選項,對象必須爲key/value格式例如:{“foo1”:“bar”,“foo2”:“bar2”}轉換爲&foo1=bar1&foo2=bar2。如果是數組jQuery會轉換爲不同值對應同一名稱。例如:[foo:["bar1","bar2"]轉換爲&foo=bar&foo=bar2;
dataType:String ,預期返回的數據類型,如果不指定,jQueryjiang自動根據HTTP包MIME信息返回responseXML或者responseText,作爲回調函數參數傳遞。
可用的類型如下xml(xml文檔)、html(返回HTML)、script(返回js純文本)、json(返回JSON數據)、jsonp(返回JSONP格式)、text(返回純文本字符串)
beforeSend:Function(),發送請求先可以修改XMLHttpRequest對象的函數。例如添加自定義HTTP頭,如果返回false則取消本次Ajax請求XMLHttpRequest對象是唯一的參數。
complete:Function(),請求完成後調用的回調函數(請求成功個或者失敗都會調用)。參數是XMLHttpRequest對象和一個描述成功類型的字符串。
success:Function,請求成功後回調函數,有兩個參數。一個是服務器返回的data並根據dataType處理後的數據,二個是描述狀態的字符串funciton (data,textStatus)
error : Function(),請求失敗時被調用的函數,該函數有三個參數,即XMLHttpRequest對象、錯誤信息、不做的額錯誤對象(可選)。
global :boolean,默認是true,表示是否出發全局Ajax事件設置爲false將不會觸發全局Ajax事件。
Ps:$.load(),$.get(),$.post(),$getSctipt(),$.getJSON()都是基於$.ajax()方法構建的。$.ajax()方法是jQuery最基礎的Ajax的實現,因此它可以替代所有的方法。
例如:$.getScript("test.js"function(){
});
如果使用ajax的方式實現就是
$.ajax({
type:"GET",
url:"test.js"
datatype:“script”;
});
五、序列化元素
1、serialize()方法
項目中表單時必不可少的,經常用來提供數據,例如註冊登錄等。如果常規的提交表單這個瀏覽器都會被刷新,而使用Ajax則可以一部提交表單,並將服務器返回的數據返回到當前頁面中。
例如使用:
$.get("get.php",{username:$("#username").val(),content:$("#content").val()},function(){
});
這種方式少量的字段,被提交,如果表單元素比較複雜使用過這種方式在增大工作量的通水也使表單缺乏彈性,所以jQuery中提供了一個serialize()方法,作爲一個jQuery對象能夠將DOM元素序列化爲字符串,用於Ajax請求,通過serialize()方法可以將$.get()方法修改爲:
$("#send").click(function(){
$.get("get1.php",$("#form1").serialize(),function(data,textStatus{
});
});
PS:$.get()方法data參數中,參數不僅可以{username:? ,content:?}的方式進行組裝,還可以使用字符串的方式:”username=“+encodeURIComponent
(?)+"&content="+encodeURIcomponent(?)的方式,如果使用字符串足以使用字符編碼(中文問題),如果不希望編碼帶來麻煩,可以使用serialize()方法,它會自己編碼,serialize不僅僅是表單可以使用,其他選取的元素同樣可以使用。
2、serializeArray()方法
在jQuery中海油一個serialize()類似的方法——serializeArray(),該方法不是返回字符串,而是將DOM元素序列化後,返回JSON格式的數據。可以使用$.each()對函數進行迭代輸出。
3、param()方法
它是serialize()方法的核心,用對一個數組或對象按照key/value進行序列化。比如講一個普通的對象序列化:
var obj ={a:1,b:2,c:3);
var k=$.param(obj);
則輸出k的話爲a=1&b=2&c=3
六、jQuery中的全局事件
jQuery提供了一些自定義的全局函數,能夠爲各種與Ajax相關的事件註冊回調函數,例如當Ajax請求開始的時候會出發ajaxStart()方法的回調,當請求結束的時候觸發ajaxStop()方法的回調。這些都是全局方法。其他的全局方法:
ajaxComplete(callback):ajax請求完成時執行。
ajaxError(callback):ajax請求發生錯誤時執行的函數,捕捉到的錯誤可以作爲最後一個參數傳遞
ajaxSend(callback):ajax請求發送前置執行的函數
ajaxsucess(callback):ajax請求成功的時候執行的函數。
如果想讓Ajax請求不受全局方法的影響,那麼可以使用$.ajax(options)方法時,將參數中的global設置爲false