JQuery學習之Ajax應用

標籤：

1.AJAX=非同步javaScript和XML：在不重載整個網頁的情況下，AJAX通過後台載入資料，並在網頁上進行顯示

 

2.load():簡單但強大的AJAX方法，load()方法從伺服器載入資料，並把返回的資料放入被選元中；

文法：$(selector).load(URL,data,callback);

**必需的URL參數規定所希望載入的URL

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

**可選的callback參數是load()方法完成後執行的函數名稱

 

$("#div1").load("demo_test.txt")             //把檔案"demo_test.txt"的內容載入到指定<div>元素中

 

$("#div1").load("demo_test.txt  #p1");      //把"demo_test.txt"檔案中id="p1"的元素的內容，載入到指定的<div>中

 

**可選的callback參數規定當load()方法完成後所要允許的回呼函數，回呼函數可以設定不同的參數：

（1）responseTxt:包含調用成功時的結果內容

（2）statusTXT:包含調用的狀態

（3）xhr:包含XMLHttpRequest對象

$(document).ready(function(){

　　$("button").click(function(){

　　　　$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,status,xhr){

　　　　　　if(statusTxt="success")

　　　　　　　　alert("外部內容載入成功！");

　　　　　　if(status="error")

　　　　　　　　alert("Error: "+xhr.statusText);

　　　　});

　　});

});

 

3.HTTP請求：GET 和POST

**$.get()方法：通過HTTP GET請求從伺服器上請求資料

$("button").click(function(){

　　$.get("demo_test.php",function(data,status){

　　　　alert("資料： "+data+"\n狀態："+status)

　　});

});

 

文法：$.get(URL,callback);    

//必需URL參數規定你需要請求的URL

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

 

4.$.post()方法：通過HTTP POST請求從伺服器上請求資料

$("button").click(function(){

　　$.post("/try/ajax/demo_text_post.php",

　　　　{

　　　　name:"菜鳥教程",

　　　　url:"http://www.runoob.com"

　　　　},

　　　　function(data,status){

　　　　　　alert("資料：\n" + data +"\n狀態： "+status);

　　　　});

});

文法：$.post(URL,data,callback)

//必需的URL參數規定你希望請求的URL

//可選的data參數規定連同請求發送的資料

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

JQuery學習之Ajax應用