jQuery 介紹(四)Ajax和XMLHttpRequest

• 基本語法為：jQuert.ajax(option) 或 $.ajax(option)

var data = $.ajax({
type: "POST",
url: "/path/to/myphp.php",
data: "var1=var1&var2=var2",  //可以是物件或是字串
async: false  // 瀏覽器在發送的時候，停止任何其他的呼叫。
}).responseText;

• processData

false 代表不需要把非 xml 的 data 轉成字串(string)。

• success - 呼叫完成時，做 callback 的動作

success:function(){
alert('檔案已執行');
}

• beforeSend - 發送前執行某些函數(callback)
• complete - 發送完成後執行某些函數

會在 success 或是 error 的 callback 後執行。

• error - 執行失敗後執行某些函數
• data

可以是一個物件也可以是一個字串。如果是物件就必須是一個 key 與值的對應，如var1=var1&var2=var2。如果值是一個陣列，jQuery會將其對應成多個相同 key 但不同值的物件，如 {some:["var1","var2"]} 會變成 some=var1&some=var2。

• dataType

xml	回應一個 xml 格式的文件並交給 jQuery 來處理
html	回應一個 html 格式的文件，包含所有 html 標籤
script	執行指定的 javascript 並將結果以純文字回傳
json	回應一個 javascript 的物件並內含 JSON 的格式
jsonp	以 JSONP 的格式回應
text	以純文字的格式回傳

• ajax 語法：

$.ajaxSend(callback)：在 ajax 發送前可以做的函數，也是會傳回三個參數。
$.ajaxStart(callback)：在 ajax 開始發送但未完成時，會執行的函數。
$.ajaxStop(callback)：在 ajax 請求結束時，會執行的函數。
以下是在 ajax 送出執行 scipt 的期間，會有一個 Loading 的圖形。

HTML：
<button id=dd>show</button>
<div id=wait style="display:none"><img src=loading.gif></div>
<div id="message"></div>
JS：
$(document).ready(function(){
  $('#dd').click(function(){
	$.getScript("pro59-1.js", function(){
	$('#message').html(myv);
	});
});
  $("#wait").ajaxStart(function(){
$(this).show();
});
$("#wait").ajaxStop(function(){
  $(this).hide();
});
});

From：《網頁設計，愛上jQuery》ISBN:978-986-6850-844

Please follow and like us: