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

2017-10-05 21:23:32来源:CSDN作者:Shenpibaipao人点击

分享

>简介

之前基于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()的缺陷




相关文章

    无相关信息

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台