ajax函數有哪些

ajax函數有：1、「$(selector).load()」，用於把遠端資料載入到被選的元素中；2、「$.ajax()」；3、「$.get()」；4、「$.post()」；5、「$.getJSON()」；6、「$.getScript()」。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

AJAX 請求函數

(url) 被載入的資料的 URL（地址）

(data) 傳送到伺服器的資料的鍵/值物件

(callback) 當資料被載入時，所執行的函數

(type) 被返回的資料的型別 (html,xml,json,jasonp,script,text)

(options) 完整 AJAX 請求的所有鍵/值對選項

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

說明：url為請求地址，data為請求資料的列表，callback為請求成功後的回撥函數，該函數接受兩個引數，第一個為伺服器返回的資料，第二個引數為伺服器的狀態，是可選引數。

而其中，伺服器返回資料的格式其實是字串形勢，並不是我們想要的json資料格式，在此參照只是為了對比說明

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

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

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

$.post("data.php",$("#firstName.val()"),function(data){
$("#postResponse").html(data.name);
},"json"//設定了獲取資料的型別，所以得到的資料格式為json型別的
);

三，$.ajax(opiton)

說明：$.ajax()這個函數功能強大，可以對ajax進行許多精確的控制，需要詳細說明的請參照相關資料

$.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);}//無需設定，直接獲取的資料型別為json，所以呼叫時需要使用jsonData.id方式
);

When Ajax meets jQuery 基於AJAX的應用現在越來越多，而對於前臺開發人員來說，直接和底層的HTTPRequest打交道又不是一件令人愉快的事情。jQuery既然封裝了 JavaScript，肯定已經考慮過AJAX應用的問題。的確，如果用jQuery寫AJAX會比直接用JS寫方便N倍。（不知道用jQuery長了， 會不會喪失對JS的知識了……） 這裡假設大家對jQuery語法已經比較熟悉，來對ajax的一些應用作一些總結。

載入靜態頁面

load( url, [data], [callback] );
url (String) 請求的HTML頁的URL地址
data (Map)(可選引數) 傳送至伺服器的 key/value 資料
callback (Callback) (可選引數) 請求完成時(不需要是success的)的回撥函數

load()方法可以輕鬆載入靜態頁面內容到指定jQuery物件。

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

這樣，data.html的內容將被載入到ID為ajax-p的DOM物件之內。你甚至可以通過制定ID來實現載入部分內容的Ajax操作，如：

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

實現GET和POST方法

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

• url (String) 傳送請求的URL地址.

• data (Map)(可選引數) 要傳送給伺服器的資料，以 Key/value 的鍵值對形式表示，會做為QueryString附加到請求URL中

• callback (Callback) (可選引數) 載入成功時回撥函數(只有當Response的返回狀態是success才是呼叫該方法)
  

很顯然這是一個專門實現GET方式的函數，使用起來也相當的簡單

$.get('login.php', {
   id      : 'Robin',
   password: '123456',
   gate    : 'index'
  }, function(data, status) {
   //data為返回物件，status為請求的狀態
   alert(data);
   //此時假設伺服器指令碼會返回一段文字"你好，Robin！"，
那麼瀏覽器就會彈出對話方塊顯示該段文字
   alert(status);
   //結果為success, error等等，但這裡是成功時才能執行的函數
  });

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

• url (String) 傳送請求的URL地址.
  

• data (Map)(可選引數) 要傳送給伺服器的資料，以 Key/value 的鍵值對形式表示

• callback (Callback) (可選引數) 載入成功時回撥函數(只有當Response的返回狀態是success才是呼叫該方法)

• type (String) (可選引數) 請求資料的型別，xml,text,json等

同樣是jQuery提供的一個簡便函數，其實用法

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

事件驅動的指令碼載入函數：getScript()

getScript( url, [callback] )

• url (String) 待載入 JS 檔案地址

• callback (Function) (可選) 成功載入後回撥函數
  

getScript()函數可以遠端載入JavaScript指令碼並且執行。這個函數可以跨 域載入JS檔案（神奇……？！）。這個函數的意義是巨大 的，它可以很大程度的縮減頁面初次載入的程式碼量，因為你可以根據使用者的互動來載入相應的JS檔案，而不必在頁面初始化的時候全部載入。

$.getScript('ajaxEvent.js', function() {
   alert("Scripts Loaded!");
   //載入ajaxEvent.js，並且在成功載入後顯示對話方塊提示。
  });

構建資料通訊的橋樑：getJSON()

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

• url (String) 傳送請求地址

• data (Map) (可選) 待傳送 Key/value 引數

• callback (Function) (可選) 載入成功時回撥函數。
  

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

$.getJSON('feed.php',{
   request: images,
   id:      001,
   size:    large
   }, function(json) {
    alert(json.images[0].link);
    //此處json就是遠端傳回的json物件，假設其格式如下：
    //{'images' : [
    // {link: images/001.jpg, x :100, y : 100},
    // {link: images/002.jpg, x : 200, y 200:}
    //]};
   }
 );

更底層的ajax()函數

雖然get()和post()函數非常簡潔易用，但是對於更復雜的一些設計需求還是無法實現，比如在ajax傳送的不同時段做出不同的動作等。jQuery提供一個更為具體的函數：ajax()。

ajax( options )

ajax()提供了一大票引數，所以可以實現相當複雜的功能。

你可以指定xml、script、html、json作為其資料型別，可以為beforeSend、error、sucess、complete等狀態設定 處理常式，眾多其它引數也可以訂完完全全定義使用者的Ajax體驗。下面的例子中，我們用ajax()來呼叫一個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物件了，你可以用find()、next()或XPath等方法在裡面尋找節點，
和用jQuery操作HTML物件沒有區別
    }
});

進一步瞭解AJAX事件

前面討論的一些方法都有自己的事件處理機制，從頁面整體來說，都只能說是區域性函數。jQuery提供了AJAX全域性函數的定義，以滿足特殊的需求。下面是jQuery提供的所有函數（按照觸發順序排列如下）：

• ajaxStart
  (全域性事件) 開始新的Ajax請求，並且此時沒有其他ajax請求正在進行

• beforeSend
  (區域性事件) 當一個Ajax請求開始時觸發。如果需要，你可以在這裡設定XMLHttpRequest物件

• ajaxSend
  (全域性事件) 請求開始前觸發的全域性事件

• success
  (區域性事件) 請求成功時觸發。即伺服器沒有返回錯誤，返回的資料也沒有錯誤

• ajaxSuccess
  全域性事件全域性的請求成功

• error
  (區域性事件) 僅當發生錯誤時觸發。你無法同時執行success和error兩個回撥函數

• ajaxError
  全域性事件全域性的發生錯誤時觸發

• complete
  (區域性事件) 不管你請求成功還是失敗，即便是同步請求，你都能在請求完成時觸發這個事件

• ajaxComplete
  全域性事件全域性的請求完成時觸發

• ajaxStop
  (全域性事件) 當沒有Ajax正在進行中的時候，觸發
  區域性事件在之前的函數中都有介紹，我們主要來看看全域性事件。對某個物件進行全域性事件監聽，那麼全域性中的AJAX動作，都會對其產生影響。比如，當頁面在進行AJAX操作時，ID為」loading」的p就顯示出來：

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

全域性事件也可以幫助你編寫全域性的錯誤相應和成功相應，而不需要為每個AJAX請求獨立設定。有必要指出，全域性事件的引數是很有用的。除了 ajaxStart、ajaxOptions，其他事件均有event, XMLHttpRequest, ajaxOptions三個引數。第一個引數即事件本身；第二個是XHR物件；第三個是你傳遞的ajax引數物件。在一個物件裡顯示全域性的AJAX情況：

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

很顯然，第三個引數也可以幫助你傳遞你在AJAX事件里加入的自定義引數。 在單個AJAX請求時，你可以將global的值設為false，以將此請求獨立於AJAX的全域性事件。

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

如果你想為全域性AJAX設定引數，你會用上ajaxSetup()函數。例如，將所有AJAX請求都傳遞到request.php，；禁用全域性方法；強制用POST方法傳遞：

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

【相關教學推薦：AJAX視訊教學】

以上就是ajax函數有哪些的詳細內容，更多請關注TW511.COM其它相關文章！