jQuery Ajax應用

jQuery的Ajax詳解

　　1.Load( url, [data], [callback] )

　　　　做用:

　　　　　　載入遠程HTML文件代碼並插入至DOM中.

　　　　參數:

　　　　　　url (String):請求的HTML頁的URL地址.

　　　　　　data (Map):(可選參數)發送至服務器的 key/value 數據.

　　　　　　callback (Callback):(可選參數)請求完成時(不須要是success的)的回調函數.

　　　　說明:

　　　　　　這個方法默認使用GET方式來傳遞的,若是[data]參數有傳遞數據進去,就會自動轉換爲POST方式的.

　　　　講解:

　　　　　　load是最簡單的Ajax函數,可是使用具備侷限性:

　　　　　　　　它主要用於直接返回HTML的Ajax接口

　　　　　　　　load是一個jQuery包裝集方法,須要在jQuery包裝集上調用,而且會將返回的HTML加載到對象中,即便設置了回調函數也仍是會加載.

　　2.jQuery.get( url, [data], [callback], [type] )

　　　　做用:

　　　　　　使用GET方式來進行異步請求.

　　　　參數:

　　　　　　url (String):發送請求的URL地址.

　　　　　　data (Map):(可選)要發送給服務器的數據,以key/value的鍵值對形式表示,會作爲QueryString附加到請求URL中.

　　　　　　callback (Function):(可選)載入成功時回調函數(只有當Response的返回狀態是success纔是調用該方法).

　　　　　　type參數是指data數據的類型,可能的值有"xml","html","script","json","jsonp"和"text",默認爲"html".

　　　　jQuery.getJSON( url, [data], [callback] )方法就至關於 jQuery.get(url, [data], [callback], "json")

　　　　說明:

　　　　　　經過遠程HTTP GET 請求載入信息.這個簡單的GET請求功能以取代複雜$.ajax.請求成功時可調用回調函數.

　　　　講解:

　　　　　　此函數發送Get請求, 參數能夠直接在url中拼接,好比

　　　　　　$.get("AjaxGetMethod.aspx?param=btnAjaxGet_click");

　　　　　　或者經過data參數傳遞:

　　　　　$.get("AjaxGetMethod.aspx", { "param": "btnAjaxGet_click" });

　　　　　　兩種方式效果相同,data參數會自動添加到請求的url中.

　　3.jQuery.getJSON( url, [data], [callback] )

　　　　做用:

　　　　　　經過HTTP GET請求載入JSON數據,與jQuery.get( url, [data], [callback], "json")這種方式等價.

　　　　說明:

　　　　　　經過HTTP GET 請求載入JSON數據.

　　　　講解:

　　　　　　getJSON函數僅僅將get函數的type參數設置爲"JSON"而已.

　　4.jQuery.getScript( url, [callback] )

　　　　做用:

　　　　　　經過GET方式請求載入並執行一個JavaScript文件.

　　　　參數:

　　　　　　url (String) : 待載入JS文件地址.

　　　　　　callback (Function) :(可選)成功載入後回調函數.

　　　　說明:

　　　　　　jQuery 1.4版本以前, getScript只能調用同域 JS 文件.在jQuery 1.4中, 你能夠跨域調用 JavaScript文件.

　　　　講解:

　　　　　　首先了解此函數的jQuery內部實現,仍然使用get函數,jQuery全部的Ajax函數包括get最後都是用的是jQuery.ajax().

　　5.jQuery.post( url, [data], [callback], [type] )

　　　　做用:

　　　　　　使用POST方式來進行異步請求

　　　　參數:

　　　　　　url (String): 發送請求的URL地址

　　　　　　data (Map): (可選) 要發送給服務器的數據,以key/value 的鍵值對形式表示.

　　　　　　callback (Function): (可選) 載入成功時回調函數(只有當Response的返回狀態是success纔是調用該方法).

　　　　　　type (String): (可選) 官方的說明是: Type of data to be sent. 其實應該爲客戶端請求的類型(JOSN,XML,等等)

　　　　說明:

　　　　　　經過遠程HTTP POST 請求載入信息.這個簡單的POST請求功能以取代複雜$.ajax.請求成功時可調用回調函數.

　　　　講解:

　　　　　　具體用法和get相同,只是提交方式由"GET"改成"POST".

　　6.jQuery.ajax( options )

　　　　做用:

　　　　　　經過HTTP請求加載遠程數據

　　　　說明:

　　　　　　經過HTTP請求加載遠程數據.jQuery底層AJAX實現.簡單易用的高層實現爲$.get,$.post等.

　　　　　　$.ajax() 返回其建立的XMLHttpRequest對象.大多數狀況下你無需直接操做該對象,但特殊狀況下可用於手動終止請求.

　　　　　　$.ajax() 只有一個參數: 參數 key/value 對象, 包含各配置及回調函數信息.

　　　　講解:

　　　　　　這是jQuery中Ajax的核心函數,上面全部的發送Ajax請求的函數內部最後都會調用此函數.options參數支持不少參數,使用這些參數能夠徹底控制ajax請求.

options參數列表

參數名	類型	描述
url	String	(默認: 當前頁地址) 發送請求的地址.
type	String	(默認: "GET") 請求方式 ("POST" 或 "GET"), 默認爲"GET".其它HTTP請求方法,如PUT 和 DELETE 也可使用, 但僅部分瀏覽器支持.
timeout	Number	設置請求超時時間(毫秒).此設置將覆蓋全局設置.
async	Boolean	(默認: true) 默認設置下, 全部請求均爲異步請求. 若是須要發送同步請求, 請將此選項設置爲false.注意, 同步請求將鎖住瀏覽器,用戶其它操做必須等待請求完成才能夠執行.
beforeSend	Function	發送請求前可修改XMLHttpRequest對象的函數,如添加自定義HTTP頭.XMLHttpRequest 對象是惟一的參數.
cache	Boolean	(默認: true) jQuery 1.4 新功能,設置爲false 將不會從瀏覽器緩存中加載請求信息.
complete	Function	請求完成後回調函數 (請求成功或失敗時均調用). 參數: XMLHttpRequest 對象,成功信息字符串.
contentType	String	(默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型.默認值適合大多數應用場合.
data	Object, String	發送到服務器的數據.將自動轉換爲請求字符串格式.GET請求中將附加在URL 後.查看processDate 選項說明以禁止此自動轉換. 必須爲Key/Value格式.若是爲數組,jQuery將自動爲不一樣值對應同一個名稱.
dataType	String	預期服務器返回的數據類型.若是不指定,jQuery將自動根據HTTP包MIME信息返回responseXML 或 responseText, 並做爲回調函數參數 傳遞,可用值: "xml":返回XML文檔,可用jQuery處理. "html":返回純文本HTML信息:包含script元素. "script":返回純文本JavaScript代碼.不會自動緩存結果. "json":返回JSON數據. "jsonp":JSONP格式.
error	Function	(默認: 自動判斷 (xml 或 html)) 請求失敗時將調用此方法.這個方法有三個參數:XMLHttpRequest對象,錯誤信息,(可能)捕捉的錯誤對象.
global	Boolean	(默認: true) 是否觸發全局 AJAX事件.設置爲false將不會觸發全局AJAX事件,如ajaxStart或ajaxStop.可用於控制不一樣的Ajax事件.
ifModified	Boolean	(默認: false) 僅在服務器數據改變時獲取新數據.使用HTTP包Last-Modified頭信息判斷.
processData	Boolean	(默認: true) 默認狀況下,發送的數據將被轉換爲對象(技術上講並不是字符串)以配合默認內容類型"application/x-www-form-urlencoded". 若是要發送DOM樹信息或其它不但願轉換的信息,請設置爲false.
success	Function	請求成功回調函數.

jQuery 的Ajax相關函數

　　1.jQuery.ajax( options)

　　　　說明:

　　　　　　設置全局AJAX默認選項.

　　　　講解:

　　　　　　有時咱們但願設置頁面上全部Ajax屬性的默認行爲.那麼就可使用此函數設置options選項,此後全部的Ajax請求的默認options將被更改.

　　2.全局Ajax事件

　　　　在jQuery.ajaxSetup(options)中的options參數屬性中,有一個global屬性.詳細以下:

　　　　　　類型: 布爾值

　　　　　　默認值: true

　　　　　　說明: 是否觸發全局的Ajax事件

　　　　這個屬性用來設置是否觸發全局的Ajax事件,全局Ajax事件是一系列伴隨Ajax請求發生的事件.主要事件以下:

主要事件

名稱	說明
ajaxComplete( callback )	AJAX 請求完成時執行函數
ajaxError( callback )	AJAX 請求發生錯誤時執行函數
ajaxSend( callback )	AJAX 請求發送前執行函數
ajaxStart( callback )	AJAX 請求開始時執行函數
ajaxStop( callback )	AJAX 請求結束時執行函數
ajaxSuccess( callback )	AJAX 請求成功時執行函數