AJAX(Asynchronous JavaScript And XML)為JavaScript和XML的非同步技術,可以讓瀏覽器建立快速、更加和容易使用的操作介面。AJAX核心技術是非同步的HTTP請求(Asynchronous HTTP Requests),除了第一次載入網頁外,HTTP請求是在背景使用XMLHttpRequest物件送出,送出後不要等待回應,所以不會影響使用者的操作。
jQuery
jQuery可以幫助我們建立跨瀏覽器相容的AJAX應用程式。jQuery提供多種方法來提出XMLHttpRequest請求,不需要自行判斷瀏覽器來建立XMLHttpRequest。相關方法說明如下:
- load():將伺服端的遠端文件用AJAX請求來載入。
- getScript():用AJAX請求執行伺服端JavaScript檔案。
- get():用HTTP GET方法送出AJAX請求和取得回應。
- post():用HTTP POST方法送出AJAX請求和取得回應。
- getJSON():用HTTP GET方法送出AJAX請求來取得伺服器的JSON資料。
- ajax():用XMLHttpRequest送出AJAX請求。
ajax()方法
$.ajax({
type: 'GET',
url: 'getDateTime.php',
data: { name : nameVal,
type : typeVal },
success: function(data) {
// 處理回傳的資料
}
});
常用參數屬性:
- type:HTTP請求方式是GET或POST。
- url:目標網址。
- data:要傳送的資料。
- success:請求成功時,會執行此函數。
- error:請求失敗時,會執行此函數。
- complete:請求完成時,會執行此函數,也就是說不論成功或失敗都會執行。
- beforeSend:送出請求前,會執行此函數。
getJSON()方法
$.getJSON('getTitleJSON.php', function(data){
//處理JSON資料});
getJSON()第一個參數為網址,第二個參數為回調函數。
處理JSON資料
$("#result").empty();//清除HTML清單result
$.each(data, function (key, val) {//取出鍵和值
var str = '<li id="' + key + '">' +
val.Id + ':' + val.Title + '</li>';
$("#result").append(str);//新增資料
});