Ajax 的呼叫函數 .... GET 和 POST

請參考 detial (使用 GET 方法) 和 null_page (使用 POST 方法) 兩個 function，其餘為相關前置 function


// ====== 針對不同瀏覽器的前置處理宣告 ======
function createXMLHttpRequest() {
var ajax = null;
try {
ajax = new XMLHttpRequest(); // 適用於 Mozilla、Opera 等
if (ajax.overrideMimeType) // 某些版本不加此行會無法運作
ajax.overrideMimeType('text/xml');
} catch (e) { // 上列方法失敗時, 會執行此處程式
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP"); // 適用於 IE6 以上
} catch (e) { // 上列方法失敗時, 會執行此處程式
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP"); // 適用於 IE5
} catch (e) { // 上列方法失敗時, 會執行此處程式
alert("您的瀏覽器不支援XMLHttpRequest");
return false;
}
}
}
return ajax;
}

// ====== GET 傳遞方法 ======
function GET_Method(ObjectID,url) {
var show = document.getElementById(ObjectID); // 取得 DIV 或 span 物件的 ID 碼
var ajax = createXMLHttpRequest(); // 建立 XMLHttpRequest 物件，並且送要求
ajax.open("GET", url, true); // 使用 GET 方法
ajax.onreadystatechange = function() { // 設定當收到回應資料時, 執行的函式
if ( ajax.readyState == 4 ) { // readyState 所有可能的傳送狀態值如下：0 (還沒開始)、1 (讀取中)、2 (已讀取)、3 (資訊交換中)、4 (請求完成)
if ( ajax.status == 200 ) { // 若已收到全部資料 && HTTP 狀態 OK = 200
show.innerHTML = ajax.responseText; // 可以從 responseText 或 responseXML 取得傳回的資料
　　} else alert(ajax.statusText); // 接收資料失敗，可以從 statusText 取得錯誤狀態資訊
}
}
ajax.send(null); // 送出 Ajax 要求，以 GET 傳送時，這裡只要輸入 null 或是空的
}

// ====== POST 傳遞方法 ======
function POST_Method(ObjectID,url,PostData) {
var show = document.getElementById(ObjectID); // 取得 DIV 或 span 物件的 ID 碼
var ajax = createXMLHttpRequest(); // 建立 XMLHttpRequest 物件，並且送要求
ajax.open("POST", url, true); // 使用 POST 方法傳送必須設定 MIME 型態
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8" ); // 設定 HTTP 表頭 MIME 型態
ajax.onreadystatechange = function() { // 設定當收到回應資料時, 執行的函式
if ( ajax.readyState == 4 ) { // readyState 所有可能的傳送狀態值如下：0 (還沒開始)、1 (讀取中)、2 (已讀取)、3 (資訊交換中)、4 (請求完成)
if ( ajax.status == 200 ) { // 若已收到全部資料 && HTTP 狀態 OK = 200
show.innerHTML = ajax.responseText; // 可以從 responseText 或 responseXML 取得傳回的資料
　　} else alert(ajax.statusText); // 接收資料失敗，可以從 statusText 取得錯誤狀態資訊
}
}
ajax.send(PostData); // 送出 Ajax 要求，以 POST 傳送時，這裡可以輸入( XML,串流,字串,JSON格式 )
}

// ====== 顯示詳細資料 ======
function detial(ObjectID,id) {
var url = "detial.php?id=" + id; // 對應網頁網址
GET_Method(ObjectID,url); // 傳遞物件 ID 碼、網址
}
// ====== 開新網頁 ======
function null_page(ObjectID,value1,value2) {
var url = "null.php"; // 對應網頁網址
var PostData = ""num1=" + value1 + "&num2=" + value2"; // POST 方法的資料傳送 num1 和 num2
POST_Method(ObjectID,url,PostData); // 傳遞物件 ID 碼、網址、字串
}