ajax函數(shù)有：1、“$(selector).load()”，用于把遠(yuǎn)程數(shù)據(jù)加載到被選的元素中；2、“$.ajax()”；3、“$.get()”；4、“$.post()”；5、“$.getJSON()”；6、“$.getScript()”。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

AJAX 請(qǐng)求函數(shù)

(url) 被加載的數(shù)據(jù)的 URL（地址）

(data) 發(fā)送到服務(wù)器的數(shù)據(jù)的鍵/值對(duì)象

(callback) 當(dāng)數(shù)據(jù)被加載時(shí)，所執(zhí)行的函數(shù)

(type) 被返回的數(shù)據(jù)的類型 (html,xml,json,jasonp,script,text)

(options) 完整 AJAX 請(qǐng)求的所有鍵/值對(duì)選項(xiàng)

一，$.get(url,[data],[callback])

說(shuō)明：url為請(qǐng)求地址，data為請(qǐng)求數(shù)據(jù)的列表，callback為請(qǐng)求成功后的回調(diào)函數(shù)，該函數(shù)接受兩個(gè)參數(shù)，第一個(gè)為服務(wù)器返回的數(shù)據(jù)，第二個(gè)參數(shù)為服務(wù)器的狀態(tài)，是可選參數(shù)。

而其中，服務(wù)器返回?cái)?shù)據(jù)的格式其實(shí)是字符串形勢(shì)，并不是我們想要的json數(shù)據(jù)格式，在此引用只是為了對(duì)比說(shuō)明

$.get("data.php",$("#firstName.val()"),function(data){ $("#getResponse").html(data); }//返回的data是字符串類型 );

二，$.post(url,[data],[callback],[type])

說(shuō)明：這個(gè)函數(shù)跟$.get()參數(shù)差不多，多了一個(gè)type參數(shù)，type為請(qǐng)求 的數(shù)據(jù)類型，可以是html,xml,json等類型，如果我們?cè)O(shè)置這個(gè)參數(shù)為：json，那么返回的格式則是json格式的，如果沒有設(shè)置，就 和$.get()返回的格式一樣，都是字符串的

$.post("data.php",$("#firstName.val()"),function(data){ $("#postResponse").html(data.name); },"json"//設(shè)置了獲取數(shù)據(jù)的類型，所以得到的數(shù)據(jù)格式為json類型的 );

三，$.ajax(opiton)

說(shuō)明：$.ajax()這個(gè)函數(shù)功能強(qiáng)大，可以對(duì)ajax進(jìn)行許多精確的控制，需要詳細(xì)說(shuō)明的請(qǐng)參照相關(guān)資料

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

四，$.getJSON(url,[data],[callback])

$.getJSON("data.php",$("#firstName.val()"),function(jsonData){ $("#getJSONResponse").html(jsonData.id);}//無(wú)需設(shè)置，直接獲取的數(shù)據(jù)類型為json，所以調(diào)用時(shí)需要使用jsonData.id方式 );

When Ajax meets jQuery 基于AJAX的應(yīng)用現(xiàn)在越來(lái)越多，而對(duì)于前臺(tái)開發(fā)人員來(lái)說(shuō)，直接和底層的HTTPRequest打交道又不是一件令人愉快的事情。jQuery既然封裝了 JavaScript，肯定已經(jīng)考慮過(guò)AJAX應(yīng)用的問題。的確，如果用jQuery寫AJAX會(huì)比直接用JS寫方便N倍。（不知道用jQuery長(zhǎng)了， 會(huì)不會(huì)喪失對(duì)JS的知識(shí)了……） 這里假設(shè)大家對(duì)jQuery語(yǔ)法已經(jīng)比較熟悉，來(lái)對(duì)ajax的一些應(yīng)用作一些總結(jié)。

載入靜態(tài)頁(yè)面

load( url, [data], [callback] );
url (String) 請(qǐng)求的HTML頁(yè)的URL地址
data (Map)(可選參數(shù)) 發(fā)送至服務(wù)器的 key/value 數(shù)據(jù)
callback (Callback) (可選參數(shù)) 請(qǐng)求完成時(shí)(不需要是success的)的回調(diào)函數(shù)

load()方法可以輕松載入靜態(tài)頁(yè)面內(nèi)容到指定jQuery對(duì)象。

$('#ajax-p').load('data.html');

這樣，data.html的內(nèi)容將被載入到ID為ajax-p的DOM對(duì)象之內(nèi)。你甚至可以通過(guò)制定ID來(lái)實(shí)現(xiàn)載入部分內(nèi)容的Ajax操作，如：

$('#ajax-p').load('data.html#my-section');

實(shí)現(xiàn)GET和POST方法

get( url, [data], [callback] )

• url (String) 發(fā)送請(qǐng)求的URL地址.

• data (Map)(可選參數(shù)) 要發(fā)送給服務(wù)器的數(shù)據(jù)，以 Key/value 的鍵值對(duì)形式表示，會(huì)做為QueryString附加到請(qǐng)求URL中

• callback (Callback) (可選參數(shù)) 載入成功時(shí)回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success才是調(diào)用該方法)

很顯然這是一個(gè)專門實(shí)現(xiàn)GET方式的函數(shù)，使用起來(lái)也相當(dāng)?shù)暮?jiǎn)單

$.get('login.php', {    id      : 'Robin',    password: '123456',    gate    : 'index'   }, function(data, status) {    //data為返回對(duì)象，status為請(qǐng)求的狀態(tài)    alert(data);    //此時(shí)假設(shè)服務(wù)器腳本會(huì)返回一段文字"你好，Robin！"， 那么瀏覽器就會(huì)彈出對(duì)話框顯示該段文字    alert(status);    //結(jié)果為success, error等等，但這里是成功時(shí)才能運(yùn)行的函數(shù)   });

post( url, [data], [callback], [type] )

• url (String) 發(fā)送請(qǐng)求的URL地址.

• data (Map)(可選參數(shù)) 要發(fā)送給服務(wù)器的數(shù)據(jù)，以 Key/value 的鍵值對(duì)形式表示

• callback (Callback) (可選參數(shù)) 載入成功時(shí)回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success才是調(diào)用該方法)

• type (String) (可選參數(shù)) 請(qǐng)求數(shù)據(jù)的類型，xml,text,json等

同樣是jQuery提供的一個(gè)簡(jiǎn)便函數(shù)，其實(shí)用法

$.post('regsiter.php', {    id:'Robin',    password: '123456',    type:'user'   },function(data, status) {    alert(data);   }, "json");

事件驅(qū)動(dòng)的腳本載入函數(shù)：getScript()

getScript( url, [callback] )

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

• callback (Function) (可選) 成功載入后回調(diào)函數(shù)

getScript()函數(shù)可以遠(yuǎn)程載入JavaScript腳本并且執(zhí)行。這個(gè)函數(shù)可以跨 域載入JS文件（神奇……？?。＿@個(gè)函數(shù)的意義是巨大 的，它可以很大程度的縮減頁(yè)面初次載入的代碼量，因?yàn)槟憧梢愿鶕?jù)用戶的交互來(lái)載入相應(yīng)的JS文件，而不必在頁(yè)面初始化的時(shí)候全部載入。

$.getScript('ajaxEvent.js', function() {    alert("Scripts Loaded!");    //載入ajaxEvent.js，并且在成功載入后顯示對(duì)話框提示。   });

構(gòu)建數(shù)據(jù)通訊的橋梁：getJSON()

getJSON(url,[data],[callback])

• url (String) 發(fā)送請(qǐng)求地址

• data (Map) (可選) 待發(fā)送 Key/value 參數(shù)

• callback (Function) (可選) 載入成功時(shí)回調(diào)函數(shù)。

JSON是一種理想的數(shù)據(jù)傳輸格式，它能夠很好的融合與JavaScript或其他宿主語(yǔ) 言，并且可以被JS直接使用。使用JSON相比傳統(tǒng)的通過(guò) GET、POST直接發(fā)送”裸體”數(shù)據(jù)，在結(jié)構(gòu)上更為合理，也更為安全。至于jQuery的getJSON()函數(shù)，只是設(shè)置了JSON參數(shù)的 ajax()函數(shù)的一個(gè)簡(jiǎn)化版本。這個(gè)函數(shù)也是可以跨域使用的，相比get()、post()有一定優(yōu)勢(shì)。另外這個(gè)函數(shù)可以通過(guò)把請(qǐng)求url寫 成”myurl?callback=X”這種格式，讓程序執(zhí)行回調(diào)函數(shù)X。

$.getJSON('feed.php',{    request: images,    id:      001,    size:    large    }, function(json) {     alert(json.images[0].link);     //此處json就是遠(yuǎn)程傳回的json對(duì)象，假設(shè)其格式如下：     //{'images' : [     // {link: images/001.jpg, x :100, y : 100},     // {link: images/002.jpg, x : 200, y 200:}     //]};    }  );

更底層的ajax()函數(shù)

雖然get()和post()函數(shù)非常簡(jiǎn)潔易用，但是對(duì)于更復(fù)雜的一些設(shè)計(jì)需求還是無(wú)法實(shí)現(xiàn)，比如在ajax發(fā)送的不同時(shí)段做出不同的動(dòng)作等。jQuery提供一個(gè)更為具體的函數(shù)：ajax()。

ajax( options )

ajax()提供了一大票參數(shù)，所以可以實(shí)現(xiàn)相當(dāng)復(fù)雜的功能。

你可以指定xml、script、html、json作為其數(shù)據(jù)類型，可以為beforeSend、error、sucess、complete等狀態(tài)設(shè)置 處理函數(shù)，眾多其它參數(shù)也可以訂完完全全定義用戶的Ajax體驗(yàn)。下面的例子中，我們用ajax()來(lái)調(diào)用一個(gè)XML文檔：

$.ajax({     url: 'doc.xml',     type: 'GET',     dataType: 'xml',     timeout: 1000,     error: function(){         alert('Error loading XML document');     },     success: function(xml){         alert(xml);   //此處xml就是XML的jQuery對(duì)象了，你可以用find()、next()或XPath等方法在里面尋找節(jié)點(diǎn)， 和用jQuery操作HTML對(duì)象沒有區(qū)別     } });

進(jìn)一步了解AJAX事件

前面討論的一些方法都有自己的事件處理機(jī)制，從頁(yè)面整體來(lái)說(shuō)，都只能說(shuō)是局部函數(shù)。jQuery提供了AJAX全局函數(shù)的定義，以滿足特殊的需求。下面是jQuery提供的所有函數(shù)（按照觸發(fā)順序排列如下）：

• ajaxStart
  (全局事件) 開始新的Ajax請(qǐng)求，并且此時(shí)沒有其他ajax請(qǐng)求正在進(jìn)行

• beforeSend
  (局部事件) 當(dāng)一個(gè)Ajax請(qǐng)求開始時(shí)觸發(fā)。如果需要，你可以在這里設(shè)置XMLHttpRequest對(duì)象

• ajaxSend
  (全局事件) 請(qǐng)求開始前觸發(fā)的全局事件

• success
  (局部事件) 請(qǐng)求成功時(shí)觸發(fā)。即服務(wù)器沒有返回錯(cuò)誤，返回的數(shù)據(jù)也沒有錯(cuò)誤

• ajaxSuccess
  全局事件全局的請(qǐng)求成功

• error
  (局部事件) 僅當(dāng)發(fā)生錯(cuò)誤時(shí)觸發(fā)。你無(wú)法同時(shí)執(zhí)行success和error兩個(gè)回調(diào)函數(shù)

• ajaxError
  全局事件全局的發(fā)生錯(cuò)誤時(shí)觸發(fā)

• complete
  (局部事件) 不管你請(qǐng)求成功還是失敗，即便是同步請(qǐng)求，你都能在請(qǐng)求完成時(shí)觸發(fā)這個(gè)事件

• ajaxComplete
  全局事件全局的請(qǐng)求完成時(shí)觸發(fā)

• ajaxStop
  (全局事件) 當(dāng)沒有Ajax正在進(jìn)行中的時(shí)候，觸發(fā)
  局部事件在之前的函數(shù)中都有介紹，我們主要來(lái)看看全局事件。對(duì)某個(gè)對(duì)象進(jìn)行全局事件監(jiān)聽，那么全局中的AJAX動(dòng)作，都會(huì)對(duì)其產(chǎn)生影響。比如，當(dāng)頁(yè)面在進(jìn)行AJAX操作時(shí)，ID為”loading”的p就顯示出來(lái)：

$("#loading").ajaxStart(function(){    $(this).show();  });

全局事件也可以幫助你編寫全局的錯(cuò)誤相應(yīng)和成功相應(yīng)，而不需要為每個(gè)AJAX請(qǐng)求獨(dú)立設(shè)置。有必要指出，全局事件的參數(shù)是很有用的。除了 ajaxStart、ajaxOptions，其他事件均有event, XMLHttpRequest, ajaxOptions三個(gè)參數(shù)。第一個(gè)參數(shù)即事件本身；第二個(gè)是XHR對(duì)象；第三個(gè)是你傳遞的ajax參數(shù)對(duì)象。在一個(gè)對(duì)象里顯示全局的AJAX情況：

$("#msg").beforeSend(function(e,xhr,o) {  $(this).html("正在請(qǐng)求"+o.url);  }).ajaxSuccess(function(e,xhr,o) {  $(this).html(o.url+"請(qǐng)求成功");  }).ajaxError(function(e,xhr,o) {  $(this).html(o.url+"請(qǐng)求失敗"); });

很顯然，第三個(gè)參數(shù)也可以幫助你傳遞你在AJAX事件里加入的自定義參數(shù)。 在單個(gè)AJAX請(qǐng)求時(shí)，你可以將global的值設(shè)為false，以將此請(qǐng)求獨(dú)立于AJAX的全局事件。

$.ajax({    url: "request.php",    global: false,    // 禁用全局Ajax事件.  });

如果你想為全局AJAX設(shè)置參數(shù)，你會(huì)用上ajaxSetup()函數(shù)。例如，將所有AJAX請(qǐng)求都傳遞到request.php，；禁用全局方法；強(qiáng)制用POST方法傳遞：

$.ajaxSetup({   url: "request.php",   global: false,   type: "POST" });

【相關(guān)教程推薦：AJAX視頻教程】