一、AJAX請求

1、jQuery.ajax(url,[settings])：

通過 HTTP 請求加載遠(yuǎn)程數(shù)據(jù)。

jQuery 底層 AJAX 實(shí)現(xiàn)。簡單易用的高層實(shí)現(xiàn)見 $.get, $.post 等。$.ajax() 返回其創(chuàng)建的 XMLHttpRequest 對象。大多數(shù)情況下你無需直接操作該函數(shù)。

Example: 保存數(shù)據(jù)到服務(wù)器，成功時(shí)顯示信息。

$.ajax({
  type: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

2、ajax選項(xiàng)

• async (默認(rèn): true)：是否為異步請求
• global (默認(rèn): true)：是否觸發(fā)全局 AJAX 事件
• url (默認(rèn): 當(dāng)前頁面地址)“發(fā)送請求的地址
• type (默認(rèn): 'GET')：請求方式 ("POST" 或 "GET")，Get時(shí)，參數(shù)中如果要傳遞中文，則需要用encodeURIComponent().
• data：發(fā)送到服務(wù)器的數(shù)據(jù)?？蓪ο蠡驍?shù)組將自動轉(zhuǎn)換為請求字符串格式。
• dataType (默認(rèn): Intelligent Guess (xml, json, script, or html)):預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，jQuery 將自動根據(jù) HTTP 包 MIME 信息來智能判斷，比如XML MIME類型就被識別為XML。
• context：用于設(shè)置Ajax相關(guān)回調(diào)函數(shù)的上下文。 默認(rèn)情況下，這個上下文是一個ajax請求使用的參數(shù)設(shè)置對象settings。
• cache (默認(rèn): true, dataType為"script"和"jsonp"時(shí)默認(rèn)為false)：如果設(shè)置為 false ，瀏覽器將不緩存此頁面。

3、回調(diào)函數(shù)

如果要處理 $.ajax() 得到的數(shù)據(jù)，則需要使用回調(diào)函數(shù)：beforeSend、error、dataFilter、success、complete。

• beforeSend：在發(fā)送請求之前調(diào)用，并且傳入一個 XMLHttpRequest 作為參數(shù)。
• error：在請求出錯時(shí)調(diào)用。傳入 XMLHttpRequest 對象，描述錯誤類型的字符串以及一個異常對象（如果有的話）
• dataFilter：在請求成功之后調(diào)用。傳入返回的數(shù)據(jù)以及 "dataType" 參數(shù)的值。并且必須返回新的數(shù)據(jù)（可能是處理過的）傳遞給 success 回調(diào)函數(shù)。
• success：當(dāng)請求之后調(diào)用。傳入返回后的數(shù)據(jù)，以及包含成功代碼的字符串。
• complete：當(dāng)請求完成之后調(diào)用這個函數(shù)，無論成功或失敗。傳入 XMLHttpRequest 對象，以及一個包含成功或錯誤代碼的字符串。

4、GET方法和POST方法的區(qū)別

• get是從服務(wù)器上獲取數(shù)據(jù)，get是把參數(shù)數(shù)據(jù)隊(duì)列加到URL中，值和表單內(nèi)各個字段一一對應(yīng)，在URL中可以看到。（服務(wù)器端用Request.QueryString獲取變量的值）
• post是向服務(wù)器傳送數(shù)據(jù)。post是通過HTTP post機(jī)制，將參數(shù)數(shù)據(jù)隊(duì)列放置在HTML HEADER內(nèi)一起傳送到URL地址。用戶看不到這個過程。（服務(wù)器端用Request.Form獲取提交的數(shù)據(jù)）
• get傳送的數(shù)據(jù)量較小，不能大于2KB。post傳送的數(shù)據(jù)量較大，一般被默認(rèn)為不受限制。但理論上，IIS4中最大量為80KB，IIS5中為100KB。
• get安全性非常低，post安全性較高，但是執(zhí)行效率卻比Post方法好。包含機(jī)密信息的話，建議用Post數(shù)據(jù)提交方式；
• 在做數(shù)據(jù)查詢時(shí)，建議用Get方式；而在做數(shù)據(jù)添加、修改或刪除時(shí)，建議用Post方式；

二、AJAX請求快捷方法：

1、.load( url [, data ] [, callback ] )：

從服務(wù)器載入數(shù)據(jù)并且將返回的 HTML 代碼并插入至 匹配的元素中。

如果提供了 "complete" 回調(diào)函數(shù)，它將在函數(shù)處理完之后，并且 HTML 已經(jīng)被插入完時(shí)被調(diào)用。

默認(rèn)使用 GET 方式 ， 如果data參數(shù)提供一個對象，那么使用 POST 方式。

舉例：

//1、在一個有序列表中，加載主頁的頁腳導(dǎo)航。
 $("#new-nav").load("/ #jq-footerNavigation li");
//2、顯示一個信息如果Ajax請求遭遇一個錯誤
$("#success").load("/not-here.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});

//3、發(fā)送數(shù)組形式的data參數(shù)到服務(wù)器。
$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

//4、將feeds.html 文件載人到 ID為feeds的DIV.
$("#feeds").load("feeds.html");

2、$.get(URL,callback)：

通過 HTTP GET 請求從服務(wù)器上請求數(shù)據(jù)。

下面的例子使用 $.get() 方法從服務(wù)器上的一個文件中取回?cái)?shù)據(jù)：

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

3、$.post(URL,data,callback):

通過 HTTP POST 請求從服務(wù)器上請求數(shù)據(jù)。

下面的例子使用 $.post() 連同請求一起發(fā)送數(shù)據(jù)：

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

4、$.getJSON(url,data,callback):

通過 HTTP GET 請求載入 JSON 數(shù)據(jù)。

data數(shù)據(jù)會被附加到一個查詢字符串的URL中，發(fā)送到服務(wù)器。如果該值的data參數(shù)是一個普通的對象，它會轉(zhuǎn)換為一個字符串并使用URL編碼，然后才追加到URL中。

下面的例子從 Flickr JSONP API中加載最近的四張標(biāo)簽為貓的圖片：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });

通過test.js加載這個JSON數(shù)據(jù)，并使用返回的JSON數(shù)據(jù)中的 name值：

$.getJSON("test.js", function(json) {
   alert("JSON Data: " + json.users[3].name);
 });

5、$.getScript( url [, callback ] ):

使用一個HTTP GET請求從服務(wù)器加載并執(zhí)行一個 JavaScript 文件

載入的腳本在全局環(huán)境中執(zhí)行，因此能夠引用其他變量，并使用 jQuery 函數(shù)。被加載的腳本同樣作用于當(dāng)前頁面.

默認(rèn)情況下，$.getScript() cache選項(xiàng)被設(shè)置為 false。這將在請求的URL的查詢字符串中追加一個時(shí)間戳參數(shù)，以確保每次瀏覽器下載的腳本被重新請求。

我們動態(tài)加載新的官方j(luò)Query 顏色動畫插件，一旦該插件加載完成就會觸發(fā)一些顏色動畫。

(function() {
  var url = "https://raw.github.com/jquery/jquery-color/master/jquery.color.js";
  $.getScript(url, function() {
    $("#go").click(function(){
      $(".block")
        .animate( { backgroundColor: "rgb(255, 180, 180)" }, 1000 )
        .delay(500)
        .animate( { backgroundColor: "olive" }, 1000 )
    });
  });
})();

三、全局事件

Ajax會觸發(fā)很多事件。 
有兩種事件，一種是局部事件，一種是全局事件：

1、局部事件：

通過$.ajax來調(diào)用并且分配。

$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});

2、全局事件：

可以用bind來綁定，用unbind來取消綁定。

這個跟click/mousedown/keyup等事件類似。但他可以傳遞到每一個DOM元素上。

$("#loading").bind("ajaxSend", function(){ //使用bind
    $(this).show();
}).ajaxComplete(function(){ //直接使用ajaxComplete
    $(this).hide();
});

當(dāng)然，你某一個Ajax請求不希望產(chǎn)生全局的事件，則可以設(shè)置global:false

$.ajax({
url: "test.html",
global: false,
// ...
});

全局事件中，除了ajaxStart和ajaxStop之外，其他的事件都有3個參數(shù)：event, XMLHttpRequest, ajaxOptions。

3、事件順序

事件發(fā)生的順序如下：

• .ajaxStart(全局)：在AJAX 請求剛開始時(shí)執(zhí)行一個處理函數(shù).
• beforeSend(局部事件)：當(dāng)一個Ajax請求開始時(shí)觸發(fā)。如果需要，你可以在這里設(shè)置XHR對象。
• .ajaxSend(全局)：在Ajax請求發(fā)送之前綁定一個要執(zhí)行的函數(shù).
• success(局部事件)：請求成功時(shí)觸發(fā)。即服務(wù)器沒有返回錯誤，返回的數(shù)據(jù)也沒有錯誤。
• .ajaxSuccess(全局)：當(dāng) Ajax 請求成功完成時(shí)執(zhí)行。
• error(局部事件)：僅當(dāng)發(fā)生錯誤時(shí)觸發(fā)。你無法同時(shí)執(zhí)行success和error兩個回調(diào)函數(shù)。
• .ajaxError(全局)：Ajax請求出錯時(shí)注冊一個回調(diào)處理函數(shù)。
• complete(局部事件)：不管你請求成功還是失敗，即便是同步請求，你都能在請求完成時(shí)觸發(fā)這個事件。
• .ajaxComplete(全局)：當(dāng)Ajax請求完成后注冊一個回調(diào)函數(shù)。
• .ajaxStop(全局)：在AJAX 請求完成時(shí)執(zhí)行一個處理函數(shù)。

舉例：

//當(dāng) AJAX 請求開始時(shí)，顯示“加載中”的指示：
$("div").ajaxStart(function(){
  $(this).html("<img src='demo_wait.gif' />");
});

//AJAX 請求結(jié)束后隱藏信息：
$("#loading").ajaxStop(function(){
  $(this).hide();
});

四、$.ajaxSetup( options ) :

設(shè)置全局 AJAX 默認(rèn)選項(xiàng)。

舉例：設(shè)置 AJAX 請求默認(rèn)地址為 "/xmlhttp/"，禁止觸發(fā)全局 AJAX 事件，用 POST 代替默認(rèn) GET 方法。其后的 AJAX 請求不再設(shè)置任何選項(xiàng)參數(shù)

$.ajaxSetup({
  url: "/xmlhttp/",
  global: false,
  type: "POST"
});
$.ajax({ data: myData });

五、.serialize() 與 .serializeArray():

序列化表單內(nèi)容

如果要表單元素的值包含到序列字符串中，元素不能被禁用,元素必須使用 name 屬性。

1、.serialize() :

序列化表單內(nèi)容為字符串。

.serialize() 方法可以操作已選取個別表單元素的 jQuery 對象，比如 <input>, <textarea> 以及 <select>。不過，選擇 <form> 標(biāo)簽本身進(jìn)行序列化一般更容易些：

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

輸出標(biāo)準(zhǔn)的查詢字符串：

a=1&b=2&c=3&d=4&e=5

2、.serializeArray() :

序列化表單內(nèi)容為JSON數(shù)組。

serializeArray()輸出標(biāo)準(zhǔn)的查詢JOSN對象：

[ { name: a value: 1 }, { name: b value: 2 }, { name: c value: 3 }, { name: d value: 4 }, { name: e value: 5 } ]

六、利用Jquery獲取后臺代碼或Webservice

注意：1.方法一定要靜態(tài)方法，而且要有[WebMethod]的聲明

后臺<C#>:

using System.Web.Script.Services;  
 
[WebMethod]  
public static string SayHello()  
{  
     return "Hello Ajax!";  
}

前臺<JQuery>:

$(function()
 {   
    $("#btnOK").click(function()
 {   
        $.ajax({  
            //要用post方式  
            type:"Post",  
            //方法所在頁面和方法名  
            url:location.pathname+"/SayHello",  
            contentType:"application/json; charset=utf-8",  
            dataType:"json",  
            success:function(data)
             {   
                alert(data.d);  //返回的數(shù)據(jù)用data.d獲取內(nèi)容  
            },  
            error:function(err)
             {   
                alert(err);  
            }  
        });  
 
        //禁用按鈕的提交  
        return false;  
    });  
});

注意：如果方法需要傳參數(shù)如：GetStr(string str,string str2)，則$.ajax需要增加data: "{'str':'我是','str2':'XXX'}"。

七、通過Ajax讀取XML數(shù)據(jù)

//1、解析XML字符串：
var xmlDoc=$.parseXML(“”);

//2、封裝XMLDOC：
var $xml=$(xmlDoc) 

//3、判斷是否是XMLDOC：
$.isXMLDoc(xmlDoc)==true

//4、查詢XML，和查詢HTML語法一致：
$.xml.find(“title”).text;$(“title”,$xml).text();

通過Ajax讀取XML數(shù)據(jù)：

$.ajax({
     type: "POST",
     url: "WebService1.asmx/GetDataSet",
     data: "{}",
     dataType: 'xml', //返回的類型為XML ，和前面的Json，不一樣了
     success: function (xml) {      
             $(xml).find("Table1").each(function () {
                 $(this).find("ID").text() + " " + $(this).children("title").attr("id"));
             });     
     }
 });
//如果返回的是JOSN文本，則需要使用$.parstJSON(json)或eval("(+json+)")解析

到此這篇關(guān)于Jquery使用AJAX方法請求數(shù)據(jù)的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。