>简介
之前基于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;
}
);
---------------------------
同样,你可以到这里找到原生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
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函数了。