ajax函數有哪些

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

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

AJAX 請求函數

$(selector).load(url,data,callback)把遠端資料載入到被選取的元素中##$.ajax(options)$.get(url,data,callback,type)$.post(url,data,callback,type)$.getJSON (url,data,callback)

#請求	描述
把遠端資料載入到XMLHttpRequest 物件
使用HTTP GET 來載入遠端資料
使用HTTP POST 來載入遠端資料

使用HTTP GET 來載入遠端JSON 資料############$.getScript(url,callback)#######載入並執行遠端的JavaScript 檔案############

(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()提供了一大票參數，所以可以實現相當複雜的功能。

##url## String(預設: 當前頁位址) 傳送請求的位址。 typeString注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支援。 timeoutNumber設定請求逾時時間（毫秒）。此設定將覆蓋全域設定。 asyncBoolean注意，同步請求將鎖住瀏覽器，使用者其它操作必須等待請求完成才可以執行。 beforeSendFunctioncacheBoolean(預設: true) jQuery 1.2 新功能，設定為false 將不會從瀏覽器快取中載入請求資訊。 completeFunctionfunction (XMLHttpRequest, textStatus) { this; // the options for this ajax request } function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }contentTypeString(預設: “application/x-www-form-urlencoded”) 傳送訊息至伺服器時內容編碼類型。預設值適合大多數應用程式場合。 dataString如 {foo:["bar1", "bar2"]} 轉換為 ‘&foo=bar1&foo=bar2′。 dataTypeStringerrorFunctionfunction (XMLHttpRequest, textStatus, errorThrown) { // 通常情況下textStatus和errorThown只有其中一個有值 this; // the options for this ajax request } function (XMLHttpRequest, textStatus, errorThrown) { // 通常情況下textStatus和errorThown只有其中一個有值 this; // the options for this ajax request }globalBooleanifModifiedBoolean

參數名稱	#類型	描述
		(預設: “GET”) 請求方式(“POST” 或“GET”)， 預設為“GET” 。
		(預設: true) 預設設定下，所有請求均為非同步請求。 如果需要傳送同步請求，請將此選項設為 false。
		#可修改 XMLHttpRequest 物件的函數，例如新增自訂 HTTP 頭。 XMLHttpRequest 物件是唯一的參數。 function (XMLHttpRequest) { this; // the options for this ajax request } function (XMLHttpRequest) { this; // the options for this ajax request }
		要求完成後回呼函數 (請求成功或失敗時均呼叫)。 參數： XMLHttpRequest 對象，成功訊息字串。
	Object,	發送到伺服器的資料。將自動轉換為請求字串格式。 GET 請求中將附加在 URL 後。 查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。 如果為數組，jQuery 將自動為不同值對應同一個名稱。
		預期伺服器傳回的資料類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 訊息 返回 responseXML 或 responseText，並作為回調函數參數傳遞，可用值: “xml”: 返回 XML 文檔，可用 jQuery 處理。 「html」: 傳回純文字 HTML 資訊；包含 script 元素。 「script」: 傳回純文字 JavaScript 程式碼。不會自動快取結果。 “json”: 返回 JSON 資料 。 “jsonp”: JSONP 格式。使用 JSONP 形式呼叫函數時， 如 “myurl?callback=?” jQuery 會自動取代 ? 為正確的函式名，以執行回呼函數。
		#(預設: 自動判斷 (xml 或 html)) 請求失敗時將呼叫此方法。 這個方法有三個參數：XMLHttpRequest 對象，錯誤訊息，（可能）捕獲的錯誤對象。
		(預設: true) 是否觸發全域 AJAX 事件。設定為 false 將不會觸發全域 AJAX 事件， 如 ajaxStart 或 ajaxStop 。可用於控制不同的Ajax事件
		(預設: false) 僅在伺服器資料改變時取得新數據。 使用 HTTP 套件 Last-Modified 頭資訊判斷。 ###
processData	Boolean	(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 “application/x-www-form-urlencoded”。 如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success	Function	请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request } function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }

 你可以指定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函數有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！