[JavaScript][AJAX][JQuery]利用回调接口封装AJAX类|原生JavaScript的AJAX写法优化
来源:互联网 发布:打码识别软件 编辑:程序博客网 时间:2024/05/18 15:07
>简介
之前基于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函数了。
阅读全文
0 0
- [JavaScript][AJAX][JQuery]利用回调接口封装AJAX类|原生JavaScript的AJAX写法优化
- 原生JavaScript封装Ajax
- 原生JavaScript封装ajax
- Javascript封装原生ajax请求
- 原生javascript的ajax
- javascript的ajax写法!
- JavaScript 原生和JQuery 的Ajax
- 原生javascript 和jQuery的ajax用法
- 【ThinkPHP】Ajax,利用原生JavaScript的Ajax实现
- JavaScript Ajax封装 类似jQuery Ajax
- JavaScript封装Ajax(类JQuery中$.ajax()方法)
- JavaScript封装Ajax(类JQuery中$.ajax()方法)
- ajax 异步封装-函数 javascript原生
- 用原生javascript封装ajax技术
- 原生JavaScript封装ajax,可以直接使用
- JavaScript的原生Ajax解析
- ajax的原生写法
- 原生ajax的写法
- 2016 ACM-ICPC 亚洲区域赛北京站E题 What a Ridiculous Election (BFS预处理)
- Angular Material Menu 组件
- JAVA类加载和反射介绍
- HDU 4465 Candy 纯数学
- 图片缩放库--PhotoView的基本使用
- [JavaScript][AJAX][JQuery]利用回调接口封装AJAX类|原生JavaScript的AJAX写法优化
- 关于html二三事
- 【Linux环境配置】安装JDK
- Angular 动画
- 《维特根斯坦—天才之为责任》读书笔记 -- Tell them I've had a wonderful life
- kmp 模板
- 图像分割单词
- 闰年
- C++事务型内存技术规范:第1章(英文)