简易AJAX实现

• 基于浏览器的XHR对象来实现，所以首先了解下这个对象基本内容
  • status 属性 :连接状态，会随连接状态自己改变，200状态是联通状态
  • readyState 属性 :连接状态属性，默认有4种状态
  • responseText 属性 :用来装载返回内容的对象,在返回成功后，该值为返回的内容
  • onreadystatechange 方法 :连接状态改变后会触发的回调函数
  • open(method,url,true) 方法 :建立连接，定义method，url,还有是否异步，默认异步
  • send(data) 方法：发送内容data;open方法执行后建立连接，再用send方法发送
  • setRequestHeader(key,value) 方法：设置发送的header，有重复则覆盖
• 其中基本的原理就是用onreadystatechange这个方法绑定回调函数，用来执行异步加载后的方法

具体实现

function AJAX (){
    //实例ajax连接
    var http = function (url, content, method,callback,header) {
        var http_request ;
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        if (!http_request) {
            console.log('xhr实例不成功')
            return false;
        }
        //装饰方法,返回带callback的改变状态方法
        var stateChangeHandler = function(fun) {
            return function(){
                 if (http_request.readyState == 4) {
                    if (http_request.status == 200) {
                        if (!fun) return;
                        fun(http_request.responseText);
                    } else {
                        alert('There was a problem with the request.');
                    }
                }
            }  
        }
        http_request.onreadystatechange = stateChangeHandler(callback);//绑定状态改变方法
        http_request.open(method, url, true);//建立连接，定义方法，url，是否异步
        if (header) {
            for (var i in header) {
                http_request.setRequestHeader(i,header[i]);
            }  
        }
        http_request.send(content);//发送内容
    } 
    return {
        //post 方法,传输键值,但对非json
        post:function(url,data,callback){
            try{
                if(typeof data!="object")    throw "not object";
                var urlcode = "";
                for (var i in data) {
                    urlcode = urlcode + i + "=" + data[i] + "&";
                }
                urlcode = urlcode.substring(0,urlcode.length-1);
                var header = {"Content-Type":"application/x-www-form-urlencoded"};
                return new http(url,urlcode,"post",callback,header);
            }
            catch(err){
                console.log(err)
            }            
        },
        //get 方法
        get:function(url,callback){
            return new http(url,"","get",callback);
        },
        //post方法传送json
        json:function(url,data,callback){
            var header = {'Content-Type':'application/json'};
            return new http(url,JSON.stringify(data),"post",callback,header);
        },
        //可以设置header的ajax方法,默认所有数据不做处理
        ajax:function(url,header,data,method,callback){
            return new http(url,data,method,callback,header);
        }
    }
}

这里说明一下，每个人都有自己的使用习惯，就像json方法，我该不该在js里面用JSON.stringify()？还是说应该留着让使用者自己来格式化成字符串呢？一个大神和我说过，自己做的东西和那些别人的框架最大的区别就是别人会考虑使用者的感受，而我们自只会随自己喜好。。。

//基本实例
<script type="text/javascript">
    var M = new AJAX();
    var sendData = { "name":"test","password":"password","uid":"uid"};
    var testData = {"name":"test","array":["A","B"]};
    M.post("./servers/test.php",sendData,function (data) {
        console.log(data)
    })
    M.get("./servers/get.php?bookid=1",function (data) {
        console.log(data)
    })
    M.json("./servers/json.php",testData,function(data){
        console.log(data)
    })
    M.ajax('./servers/json.php',{'Content-Type':'application/json'},JSON.stringify(testData),'post',function(data){
        console.log(data)
    })
</script>

//get.php
<?php 
    echo json_encode($_GET);
?>
//json.php
<?php 
    $json = file_get_contents("php://input");
    echo $json;
?>
//post.php
<?php
    echo json_encode($_POST);
?>