自製 JavaScript Ajax 函式庫（jQuery 風格）

自製 JavaScript Ajax 函式庫（jQuery 風格）

以 PHP 為後端示範，練習撰寫原生 JS Ajax 封裝，模仿 jQuery 鏈式呼叫風格。

tool.ajax.js 核心程式碼

if(typeof tool == 'undefined') { var tool = function(){}; }
tool.ajax = function(){};
tool.ajax.getAjaxObject = function () {
    try{return new XMLHttpRequest()}catch(e){}
    try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){}
    alert('瀏覽器版本過低！請升級');
};
tool.ajax.formSubmit = function (options) {
    var allow_param = ['method', 'url', 'data', 'success', 'type'];
    if(!options['type']) options['type'] = 'text';
    var disposeParam = function (list) {
        var data = {url:list['url'], data:''};
        if(list['method'] == 'get') {
            data['data'] += '?';
            for (var i in list['data']) data['data'] += i + '=' + list['data'][i] + '&';
        }
        if(list['method'] == 'post') {
            for (var i in list['data']) data['data'] += i + '=' + list['data'][i] + '&';
        }
        return data;
    };
    var data = disposeParam(options);
    var HTTP = tool.ajax.getAjaxObject();
    HTTP.onreadystatechange = function () {
        if(HTTP.readyState == 4 && HTTP.status == 200) {
            if(options['type'] == 'text') options['success'](HTTP.responseText);
            else if(options['type'] == 'json') options['success'](eval('(' + HTTP.responseText + ')'));
        }
    };
    if(options['method'] == 'get') {
        HTTP.open('get', data['url'] + data['data']);
        HTTP.setRequestHeader('If-Modified-Since', '0'); // 解決 GET 快取
        HTTP.send(null);
    } else if(options['method'] == 'post') {
        HTTP.open('post', data['url']);
        HTTP.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        HTTP.send(data['data'].replace(/(&*$)/g,''));
    }
};

使用範例 (ajax_test.html)

<script src="tool.ajax.js"></script>
<script>
var options = {
    url: "ajax_test.php",
    method: "get",
    data: {name:"莫問出處丶", age: 20},
    success: function(msg) { alert(msg); },
    type: 'text'
};
tool.ajax.formSubmit(options);
</script>

後端 (ajax_test.php)

<?php echo "名字：{$_GET['name']} 年齡: {$_GET['age']}"; ?>

瀏覽器開啟即顯示「名字：莫問出處丶 年齡: 20」。若回傳 JSON，將 type 設為 json 即可。