[JavaScript][AJAX][JQuery]利用回调接口封装AJAX类|原生JavaScript的AJAX写法优化

>简介

之前基于OOP的思想去封装AJAX的方法，好处就是可以方便的利用OOP思想去继承、重写、扩展，但缺点就在于编码太长，不利于网站的实际传输。

因此，如果只考虑去简单地实现AJAX的功能，我们可以考虑用更简单的回调接口的方法去封装，完成这一步骤，并精简到足以跟JQuery相抗衡的地步。

基于OOP的封装见此：http://blog.csdn.net/shenpibaipao/article/details/78156965

>封装模式

原生JavaScript(以post为例)：

function AJAXpost(url,sendMsg,callback) {
    var xmlHttp;
    if (window.XMLHttpRequest) xmlHttp=new XMLHttpRequest();
    else xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    xmlHttp.open("POST",url,true);
    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlHttp.send(sendMsg);
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState===4 && xmlHttp.status===200){
            callback(xmlHttp);
        }else{
            //失败的回调接口，可以自己定义。一般情况下用不到。
        }
    }
}

实际需要利用post方法发送消息时，导入上面这个脚本片段，然后参考以下例子使用：

AJAXpost("url","key=value & key2=value2",function (xmlHttp) {
    //在里面进行回调后的实际操作，比如我把返回来的数据显示到页面上：
    document.getElementById("result").innerHTML = xmlHttp.responseText;
});

>与JQuery的比较

可以看到，其设计思路和JQuery的$.post方法是一样的：

$.post("/testServlet",
   {
       key:"value",
       key2:"value2"
   },
   function (data) {
       document.getElementById("result").innerHTML = data;
   }
);

相比于之前所说的OOP封装的AJAX，JQuery的好处就是更加简短和便捷。但经过回调接口封装的原生JavaScript，不仅做到了相等量的便捷性，还免去了学习JQuery和导入JQuery.js可能导致的冲突。另外别忘了，对于JQuery，在完成$(document).ready(..)前，还有可能因为文档没有加载完毕而导致脚本无法运作；而这个缺点对于原生的JavaScript来说，是完全不用担心的。

---------------------------

同样，你可以到这里找到原生JavaScript回调接口的封装代码：

https://gitee.com/shenpibaipao/codes/vxajibsqf7ry358tol6cg16

>继续改进使得完美模拟JQuery

如果想要完全做到模仿JQuery，可以添加下面这个函数：

function buildMsg(msg){
    var str = "";
    for (var key in msg){
        if(str!=="")str+="&";
        str+=key;
        str+=("="+msg[key]);
    }
    return str;
}

然后原回调函数就可以变成：(仍旧以post为例)

function AJAXpost(url,sendMsg,callback){
    var xmlHttp;
    if (window.XMLHttpRequest) xmlHttp=new XMLHttpRequest();
    else xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    xmlHttp.open("POST",url,true);
    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlHttp.send(buildMsg(sendMsg))//修改这一行
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState===4 && xmlHttp.status===200){
            callback(xmlHttp);
        }else{
           
        }
    }
}

实际使用时就可以变成：

AJAXpost("url",
    {
        name:"身披白袍",
        job:"扫地僧"
    },
    function (data) {
        alert("在这里使用你的数据:"+data.responseText);
    }
);

这样，就可以完美地模拟了JQuery的便捷写法，并杜绝了$(document).ready()的缺陷。

但是哪怕这样还有问题，因为目前我们只是单纯地在拼凑字符串，而且一旦遇到中文字符或特殊符号如"&"，又是没有办法准确识别和排异的。

解决方法是使用UTF-8去转码，很简单，参见：

http://www.w3school.com.cn/jsref/jsref_encodeURIComponent.asp

事实上JQuery也是这么实现的:

s[s.length] = encodeURIComponent(key) + encodeURIComponent(value)

因此，上面的buildMsg函数就应当如此改写：

function buildMsg(msg){
    var str = "";
    for (var key in msg){
        if(str!=="")str+="&";
        str+=encodeURIComponent(key);//这里
        str+=("="+encodeURIComponent(msg[key]));//和这里
    }
    return str;
}

现在终于可以放心地用这个改写好的原生JavaScript函数了。