Jquery從入門到放棄（七）

ajax

AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。ajax不是一種新的技術，而是一種由多種已有技術的組合（例如帶橡皮的鉛筆）

jQuery 提供多個與 AJAX 有關的方法。經過 jQuery AJAX 方法，您可以使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您可以把這些外部數據直接載入網頁的被選元素中。

能夠理解爲ajax是溝通前臺和服務器的橋樑

ajax語法

1加載函數 load()

$(selector).load(URL,data,callback);

這裏由三個函數，

url爲請求的的 URL，必要參數

data 可選參數，與請求一同發送的查詢字符串鍵/值對集合

callback 回調函數名稱

$("#div1").load("demo_test.txt");  //ajax獲取txt文檔內容

load()函數等同於.html

$('#test').html("<h2>jQuery and AJAX is FUN!!!</h2><p id='p'>This is some text in a paragraph.</p>");

    callback()回調函數

• responseTxt - 包含調用成功時的結果內容
• statusTXT - 包含調用的狀態
• xhr - 包含 XMLHttpRequest 對象

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部內容加載成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

2 HTTP請求 POST和GET

• GET - 從指定的資源請求數據   注 ：GET 方法可能返回緩存數據
• POST - 向指定的資源提交要處理的數據

    $.get(url,callback);

   $.post(URL,data,callback);

必需的 URL 參數規定您但願請求的 URL。

可選的 data 參數規定連同請求發送的數據。  //data爲發送請求時向後臺傳送的數據

後臺是這樣接受數據和返回數據的

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>

可選的 callback 參數是請求成功後所執行的函數名。

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

關於POST和GET的兩種方式請看下圖