原生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：

$id = $_GET["id"];
    $name = $_GET["name"];
    $age = $_GET["age"];

//  $id = $_POST["id"];
//  $name = $_POST["name"];
//  $age = $_POST["age"];

    echo $id;
    echo $name;
    echo $age;
?>