[javascript] 簡單介紹AJAX使用方法

AJAX為Asynchronous JavaScript and XML的縮寫，從字面翻譯為「非同步的JavaScript與XML」，主要用途是讓網頁傳輸更節省頻寬，大部份瀏覽器都支援該項技術。


簡單介紹AJAX使用方法


一、建立類別，集網路精華改寫而成，，讓大家少走些冤枉路

if (typeof XMLHttpRequest != "undefined"){
    //適用新版IE(6.0以後), Mozilla, Chrome, Safari, Opera....
    http_request = new XMLHttpRequest();
}else if (typeof window.ActiveXObject != "undefined"){
    //除Microsoft.XMLHTTP使用在IE6(含)以前版本，其它都是用在較新版本
    var ax = new Array ("Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "Msxml2.XMLHTTP.3.0", "Msxml2.XMLHTTP.2.6", "MSXML2.ServerXMLHTTP", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP");
    for (var i=0; i<ax.length; i++){
        try {
     http_request = new ActiveXObject(ax[i]);
     if (typeof http_request == "object") break;
        } catch(error){
            http_request = null;
        }
    }
}

二、設定回傳檔頭mime type格式，基本上是不用這個設定(Firefox適用)，提供給需要的人參考

if (typeof http_request.overrideMimeType != "undefined"){
    http_request.overrideMimeType("text/html; charset=utf-8");
}

三、設定頁面禁止快取，若請求網址(項目五)有加上亂數網址，此部份就可以省略

http_request.setRequestHeader('Cache-Control', 'no-cache');
http_request.setRequestHeader('Content-Type',  'application/x-www-form-urlencoded');

四、設定每個狀態要處理的工作，可以指定function或直接將function寫在後面

//以下範例為執行完成(readyState == 4 已完成)並正常接收回傳值(status == 200 OK)的時候處理
http_request.onreadystatechange = function (){
    //readyState有：0準備, 1讀取中, 2已讀取, 3交換中, 4已完成 等狀態
    if (http_request.readyState == 4){
        //status有：200 OK、404無法顯示網頁、500內部錯誤.....
        if (http_request.status == 200){
            //接收一般文字回傳值，可以直接使用
            var data = http_request.responseText;
            或
            //接收XML文件回傳值，XML文件要處理過才能使用
            var data = http_request.responseXML;
            //alert出回傳值
            alert(data);
        }
    }
}

五、送出請求request，區分GET及POST方式，網址後面最好加入亂數網址，可以防止網頁快取

//GET方式
http_request.open('GET', '網址', true);
http_request.send(null); //直接使用null即可
//POST方式
http_request.open('POST', '網址', true);
http_request.send('name=阿Ｑ&old=30&tel=52885288');  //這裡面指定要POST的值
此時在MyName.php內就使用$_POST['name']、$_POST['old']、$_POST['tel']接收這三個POST值即可。
//亂數網址範例
var url = '網址?r=' + Math.floor(Math.random() * 123456 / Math.random());