原生JavaScript（ES5）實現Ajax（可直接使用）及詳細說明__資料庫

JavaScript代碼如下，說明見注釋：

var ajax = function(parameters) {    /*     * @description 用Ajax擷取資料。     * @parameter {object} parameters 資料對象，屬性如下：     * @property {string} url 請求地址     * @property {string} [method] 請求方式，預設【get】     * @property {object} [data] 發送的資料，預設【{}】     * @property {boolean} [async] 是否非同步，預設【false】     * @property {function} [success] 請求資料成功的回呼函數，預設【function(data){}】，【data】表示請求到的資料     * @property {function} [error] 請求資料失敗的回呼函數，預設【function(status){}】，【status】表示XHR的狀態代碼     * @return {undefined}     */    var url = parameters.url,        method = parameters.method || "get",        data = parameters.data || {},        async = parameters.async || false,        success = parameters.success || function(data){},        error = parameters.error || function(status){},        isEmptyObject = function(obj) { //判斷是否為空白對象            for (var prop in obj) {                return false;            }            return true;        },        formData = function(data) { //格式化資料，即將資料對象【data】轉為【name=value&name2=value2】的形式            var newData = "";            for (var prop in data) {                newData += encodeURIComponent(prop);    //對屬性和（下面的）值都要編碼                newData += "=";                newData += encodeURIComponent(data[prop]);                newData += "&";            }            return newData.substring(0, newData.length - 1);        };    if (typeof url !== "string") {        throw new Error("url must be a string");    }    if (typeof data !== "object") {        throw new Error("data must be a object");    }    if (!isEmptyObject(data)) { //在當前資料不為空白的情況下        if (method === "get") { //【get】的方式下，通過【URL】傳參，故將【data】裡面的資料解析並格式化後放到【URL】後面去            if (url.indexOf("?") === -1) {  //如果【URL】中沒有“。”，避免【URL】後面重複添加“。”                url += "?";            } else if (url.indexOf("&") !== url.length - 1) {   //如果【URL】中的最後一個字元不是“&”，避免【URL】在拼接資料字串的地方重複添加“&”                url += "&";            }            url += formData(data);            data = null;        } else{ //【post】方法下，通過後面的【xhr.send(data)】方法傳參，但是傳參的資料格式也是和【get】方式的資料格式一樣的，只不過【post】是通過將資料放在了【request body】裡面傳遞到背景            data = formData(data);        }    }    var xhr = new XMLHttpRequest(); //建立【XHR】對象。IE7+    xhr.onreadystatechange = function() {        if (xhr.readyState === 4) { //請求已完成，且響應已就緒            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {    //資料請求成功。【2**】表示請求成功，【304】表示從瀏覽器緩衝中擷取資料                success(xhr.responseText);  //【xhr.responseText】表示請求到的資料            } else{                error(xhr.status);  //【xhr.status】表示請求失敗是對應的HTTP狀態代碼            }        }    };    xhr.open(method, url, async);   //參數依次為：請求方式，地址，是否非同步    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  //設定發送過去的資料格式為表單形式的資料格式，在【post】方式時用到    xhr.send(data); //發送資料。在【get】方式時，通過【URL】傳參，這裡可以不用發送資料，但參數必須為【null】而不可為空，而通過【post】方式則需要通過此方法傳參};

使用樣本：

ajax({    url : "test.php",    data : {        "id" : 1,        "name" : "Xiao?Ming",        "age" : 18    },    method : "get",    async : false,    success : function(data) {        console.log(data);    },    error : function(status) {        console.log(status);    }});

test.php：

<?php    $id = $_GET["id"];    $name = $_GET["name"];    $age = $_GET["age"];//  $id = $_POST["id"];//  $name = $_POST["name"];//  $age = $_POST["age"];    echo $id;    echo $name;    echo $age;?>