1.引用類型Http

'use strict';

//引用類型Http,封裝了ajax異步調(diào)用get和post方法
function Http() {
    this.xhq = null;
}

//啟動http中get請求茬高，以備發(fā)送
Http.prototype.get = function (url, query, option) {
    this.request('get', url, query, null, option);
    return this;
}

//啟動http中post請求炬转，以備發(fā)送
Http.prototype.post=function(url,option){
    this.request('post',url,null,null,option);
    return this;
}

//發(fā)送http請求的通用方法
Http.prototype.request = function (method, url, query, option) {
    this.xhq=new XMLHttpRequest();
    var url = this.addQuery(url, query);
    //console.log(url);
    this.xhq.open(method, url, true);

    for (var i in option) {
        this.xhq.setRequestHeader(i, option[i]);
    }
    return this;
}

//獲取響應成功后執(zhí)行
Http.prototype.success=function(success){
    this.then(success);
    return this;
}

//獲取響應失敗后執(zhí)行
Http.prototype.fail=function(fail){
    this.then(fail);
    return this;
}

//獲取響應后，根據(jù)響應結果執(zhí)行相應操作
Http.prototype.then = function (success,fail) {
    var xhq=this.xhq;
    xhq.addEventListener('readystatechange',function(){
         if (xhq.readyState === 4) {
            if (xhq.status >= 200 && xhq.status < 300 || xhq.status == 304) {
                if (typeof success === 'function') {
                    success(xhq.status, xhq.responseText);
                }
            } else {
                if (typeof fail === 'function') {
                    fail(xhq.status, xhq.responseText);
                }
            }
        }
    });
    return this;
}

//發(fā)送相應請求
Http.prototype.send=function(data){
    this.xhq.send(JSON.stringify(data));
}

//為url添加查詢字符串輔助方法
Http.prototype.addQuery = function (url, data) {
    for (var i in data) {
        url += (url.indexOf('?') === -1 ? '?' : '&');
        url += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]);
    }
    return url;
}

2.測試代碼

var http=new Http();
http.request('get','text.json',null,{key: 'value'})
    .then(function(status,data){
        console.log(data);
    },function(status,data){
        console.log(status);
    })
    .success(function(status,data){
        console.log(status);
    })
    .send(null);

http.post('text.json',{name: 'jc',num: 1})
    .then(function(status,data){
        console.log(data);
    },function(status,data){
        console.log(status);
    })
    .success(function(){
        console.log('ready');
    })
    .send({name: 'jc',num: 1});

• 紅寶書中提到，必須在調(diào)用open之前指定readystatechange事件處理程序才能確保瀏覽器兼容性，這里為了能夠鏈式調(diào)用在open之后通過DOM2級方法綁定了多個事件處理程序，在chorme下測試通過荠耽，應該還有更好的實現(xiàn)方法
• 在過程函數(shù)中返回this對象自身的引用達成鏈式調(diào)用，但是并沒有檢查輸入?yún)?shù)的類型比藻，可能會導致問題
• 可以使用anywhere搭建一個簡單的本地服務器铝量，測試ajax方法