Ajax 入門簡介

網頁程式碼常被劃分為  - HTML程式碼、儲存資料的XML、處理資料的JavaScript
動態資料儲存在XML，可以達成在不動到HTML碼的前提下修改網頁內容
這樣的快速資料更新與動態呈現的技術就是Ajax
用戶端開始Ajax請求，並等待伺服器的回應
伺服器收到請求後回傳資料，並由JavaScript居中媒介及整合資料到網頁裡

在這段過程中
使用者依然可以持續享受原本的服務，並等待在背景執行的Ajax請求執行結束
這也就是Ajax名稱的由來(Asynchronous JavaScript + XML)

JavaScript內建一個XMLHttpRequest物件
用於初始Ajax請求，並處理Ajax回應
它有比較複雜的類別成員及方法：
abort() -
取消Ajax請求

open() -
準備請求，指定請求的型態、URL與其他細節

send() -
傳送請求給伺服器

readyState -
請求的狀態碼代號；0表示未初始，1是開啟，2是已傳送，3是接收中，4是已載入

status -
HTTP的請求狀態代碼(ex:404錯誤，200表示正常)

onreadystatechange -
請求狀態改變時會被呼叫的函式參考
                              
responseText -
伺服器回傳的純文字字串資料

responseXML -
伺服器回傳的的XML資料


因為不同的瀏覽器(其實是IE問題比較大...)有不同的 XMLHttpRequest 物件建立方式
建立時必須先寫如下的程式碼：
var request = null;
if(window.XMLHttpRequest){
    try{
      request = new XMLHttpRequest();   
    }catch(e){
      request = null;
    }
}
//for IE version
else if(window.ActiveXObject){
    try{
      request = new ActiveXObject("Msxm12.XMLHTTP");   
    }catch(e){
      try{
        //for older versions of IE 
        request = new ActiveXObject("Microsoft.XMLHTTP");         
      }catch(e){
        request = null;     
      }
    }
}

部分版本的 Mozilla 瀏覽器，在伺服器送回的資料未含 XML mime-type header 時會出錯
解決方法是，用下列方法覆寫伺服器傳回的檔頭，以免傳回的不是 text/xml：
request = new XMLHttpRequest();
request.overrideMimeType('text/xml');

建立Ajax請求物件後，接著要設定伺服器傳回資料後的處理方式，之後再開啟請求
API 如下：
request.onreadystatechange = handler;       //handler是處理傳回值的 JavaScript 函式名稱
request.open(type, url, true);                          //true set for being always asynchronous

onreadystatechange 直接指向 handler() 的位置
這裡用匿名函式來處理也是可以的
request.onreadystatechange = function(){
    //code
}

open() 的第一個參數是 HTTP request 的方法
也就是從 GET、POST、HEAD 等伺服器支援的方法中擇一使用
為遵循 HTTP 標準，請記得這些方法都是大寫
否則有的瀏覽器不會處理這些請求
第二個參數是請求頁面的 URL
基於安全考量，呼叫同網域以外的網頁是被禁止的
如果網域不同，則叫用 open() 時會出現「權限不足，拒絕存取」那類的錯誤
常見的錯誤多為在 domain.tld 的網站下呼叫 www.domain.tld 中的網頁
僅是一點點差別都不行
第三個參數決定此 request 是否不同步進行
如果設定為 TRUE 則即使伺服器尚未傳回資料也會繼續執行其餘的程式

type一般選擇填入 "GET" 或 "POST"
GET 適用於不會改變伺服器任何設定的資料傳輸
有需要的話還能透過 url 傳小量資料到伺服器
範例：
request.open("GET", "Data.xml", true);
request.send(null);                                         //請求傳送時沒有資料，所以設定成null  

POST 適用於會變更伺服器設定的資料傳輸
範例：
request.open("POST", "addData.php", true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;
                                                 charset=UTF-8"); 
request.send("date=10/10/18&demo_string=Hello World!");     //資料附在send()的參數裡傳送

send() 的參數在以 POST 發出 request 時，可以是任何想傳給伺服器的東西
不過以 POST 方式傳送資料前，必須先設定好 MIME type 才能讓伺服器理解資料的處理方式
application/x-www-form-urlencoded; charset=UTF-8 表示資料的型別是 URL-encoding
而資料則以查詢字串的方式列出


Mozilla教學的範例：
test.xml===========

<?xml version="1.0" ?>
<root>
I'm a test.
</root>

test.html===========

<script type="text/javascript" language="javascript">
function makeRequest(url) {
    var httpRequest;

    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        httpRequest = new XMLHttpRequest();
        if (httpRequest.overrideMimeType) {
            httpRequest.overrideMimeType('text/xml');
        }
    }
    else if (window.ActiveXObject) { // IE
        try {
            httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            try {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {}
        }
    }

    if (!httpRequest) {
        alert('Giving up :( Cannot create an XMLHTTP instance');
        return false;
    }
    httpRequest.onreadystatechange = function() { alertContents(httpRequest); };
    httpRequest.open('GET', url, true);
    httpRequest.send('');

}

function alertContents(httpRequest) {

    if (httpRequest.readyState == 4) {         
        if (httpRequest.status == 200) {                //表示已傳輸完成且正常
            var xmldoc = httpRequest.responseXML;
            var root_node = xmldoc.getElementsByTagName('root').item(0);
            alert(root_node.firstChild.data);
        } else {
            alert('There was a problem with the request.');
        }
    }

}
</script>

<span
style="cursor: pointer; text-decoration: underline"
onclick="makeRequest('test.xml')">
    Make a request
</span>