AJAX深度歷險1(Getting Started)

AJAX

為「Asynchronous JavaScript and XML」的簡稱，（非同步JavaScript和XML），是一種互動式網頁應用的網頁開發技術。
AJAX包含哪些東西呢?
AJAX不是指一種單一的技術，而是包含了以下一系列相關的技術。
1.XHTML/HTML+CSS
2.Document Object Model (DOM)
3.XMLHttpRequest
4.JavaScript
AJAX的ㄧ些特性:

更新資料，網頁無須重整(F5)。
與SERVER端通訊可以透過XML資料溝通。
步驟一:
當使用JavaScript與server溝通時，你可以使用一些元件
在 Internet Explorer ActiveX 物件，稱為 XMLHTTP 類別。
在 Mozilla Safari或其他瀏覽器，稱為 XMLHttpRequest 類別
所以在使用AJAX技術時，若是要做到跨瀏覽器時，可以撰寫以下JS程式碼作判別:
if (window.XMLHttpRequest) {//Mozilla,Safari, 其他...
    http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

在某一些Mozilla瀏覽器當從在server回應XML資料時，有時候會無作用。
原因是server無回傳XML mime-type header，要解決該問題可以撰寫額外程式碼來避免這一問題發生:

http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');
當資料由server端回傳後，你需要處裡該 HTTP request 物件回傳時可以使用
http_request.onreadystatechange = 處理函式名稱;
或是撰寫另ㄧ種方式
http_request.onreadystatechange = function(){
    // 處理回應事件
};
若是由Clinet去向server傳送request訊息，可以使用 open()和send()的方法
http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);
open()方法有三個參數
1.第一個參數為HTTP request method(可以設為 POST、GET、HEAD或其他http提供的方法)
2.第二個參數是傳送網址的網頁名稱
3.第三個參數若設為TRUE表示若是server端若是還沒回應，client將ㄧ直傳送需求直到server端回覆為止
註:請使用正確的domain名稱 不然將會產生 'permission denied'錯誤
send()方法表示你可以傳參數給server端
格式如下
name=value&anothername=othervalue&so=on
註:
當在使用open()方法參數為POST時，必須改變 MIME type要不然的話
server端將拋棄該項請求
設定如下
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
步驟二:
在步驟一中有提到
http_request.onreadystatechange = 處理函式名稱;
或是
http_request.onreadystatechange = function(){
    // 處理回應事件
};
我們可以在該處理函式中先行判斷回應狀態為何，在做該項處理項目
當http_request.readyState = 4 時，表示client端已從server端接受資料成功
if (http_request.readyState == 4) {
    // 收到server端回應資料OK
} else {
    // 還未收到
}
以下有5個回應狀態可供判斷
0 (未初始化) 對象已建立，但是尚未初始化（尚未使用open方法）
1 (初始化) 對象已建立，尚使用send方法
2 (送出資料) send方法已使用，但是當前的狀態及http回應未知
3 (資料傳送中) 已接收部分資料，因為回應及http回應不全，這時通過responseBody和responseText截取部分資料會出現錯誤，
4 (完成) 資料接收完畢,此時可以通過通過responseBody和responseText截取完整的回應資料
接下來可以判斷server端HTTP回應碼是否正確 200 為 OK
if (http_request.status == 200) {
    // 正確!
} else {
    // for example the response may be a 404 (Not Found)
    // or 500 (Internal Server Error) response codes
}
當資料由server端回應到client端，可以使用兩種格式來接收回應資料。
1. http_request.responseText – 將回應為文字格式資料
2. http_request.responseXML – 將回應為XML格式資料可以使用 XMLDocument 物件來做資料解析的動作。
以上就是使用HttpRequest server端與client端的資料處理方式，
相信對於AJAX的處理能有更深的了解，後面的章節我將會示範使用http_request.responseText和http_request.responseXML資料的方法 待續.....