Jquery揭秘系列:ajax原生js实现
讲到ajax这个东西,我们要知道两个对象XMLHTTPRequest和ActiveXObject ,提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。XMLHTTPRequest基本上算是标准化了,兼容大部分浏览器ActiveXObject这玩儿意儿是微软的东西,所以是为了兼容IE版本,我们用的只是它的xmlHTTP功能。
为了功能的明确和清晰,我们把这个ajax代码分为5个部分:
- 对象的创建
- onreadystatechange句柄处理
- 参数拼接
- Get功能实现
- Post功能实现
1.对象的创建 :
如果捕获错误,则尝试更老的方法 (Internet Explorer 5.5) :XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
var xhrFactory = function () {
this.init.apply(this, arguments);
}
xhrFactory.prototype = {
init: function () {
this.xhr = this.create();
},
create: function () {
var xhr = null;
try {
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Msxml2.Xmlhttp");
}
}
catch (err) {
xhr = new ActiveXObject("Microsoft.Xmlhttp");
}
return xhr;
}
}
2.onreadystatechange句柄:
readystate: function (timeout,callback) {
this.xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
callback(eval("(" + this.responseText + ")"));
}
else {
setTimeout(function () {
this.xhr.abort();
}, !timeout ? 15000 : timeout);
} }
}
这里面要说一下readyState和status属性。
readyState : 1.创建MLHTTP对象 2.打开与服务器的连接 3 .发送指令 4 等待处理请求结果 。
status: 200.请求成功 400.请求错误。。。还有很多值 ,这里就不一个个说了。
timeout参数是请求过期时间 callback参数,回调对返回数据做了处理,转换成对象。
3.参数拼接
para: function (data) {
var datastr = "";
if (data && Object.prototype.toString.call(data) == "[object Object]") {
for (var i in data) {
for (var i = 0; i < length; i++) {
datastr += i + "=" + data[i] + "&";
}
}
}
return datastr;
}
这里是将传入的对象参数拼接成字符窜,用于ajax请求时发送参数。
4.Get功能实现:
get: function (url, data, callback, async, timeout) {
this.readystate(timeout, callback);
var newurl = url;
var datastr = this.para(data);
newurl = url + "?" + datastr;
this.xhr.open("get", newurl, !async ? true : async);
this.xhr.send(null);
}
get 请求,发送的参数是直接在url上拼接的,而不是在send里面发送,而post方式参数则是在send里面发送。
5.Post功能实现
post: function (url, data, callback, async, timeout) {
this.readystate(timeout, callback);
var newurl = url;
var datastr = this.para(data);
this.xhr.open("post", newurl, !async ? true : async);
this.xhr.setRequestHeader("content-type", "x-www-form-urlencoded");
this.xhr.send(!datastr ? null : datastr);
}
post这里面多了一段代码:this.xhr.setRequestHeader("content-type", "x-www-form-urlencoded");
这段代码其实是说明将整个发送内容作为一个整体进行编码,get则是单个参数进行编码拼接 ,这也是post和get的区别。
调用方式如下 :
var xhr = new xhrFactory();
xhr.post("test.ashx", null, function (data) {
alert(data);
});
Jquery揭秘系列:ajax原生js实现的更多相关文章
- Jquery揭秘系列:Validation实现
之前讲了一部分揭秘系列的东西,由于年初的时候在改项目,也没有写下去.现在开始闲下来了,会继续写没写完的东西,各种原生js实现Jquery的功能. 转入正题,说一下今天要讲的东西. 相信很多tx在项目里 ...
- 抛开jQuery,拾起原生JS的DOM操作
常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...
- Jquery揭秘系列:谈谈bind,one,live,delegate事件及实现
在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate等等. 我们先看看他们的定义,直接进入主题: bind( )方法用于将一个处理程 ...
- Jquery揭秘系列:谈谈bind,one,live,delegate,on事件及实现
在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate,on等等. on() jQuery事件绑定.on()简要概述及应用 看源码发现 ...
- Jquery揭秘系列:实现$.fn.extend 和$.extend函数
前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数. 其他的不多说,直接切入主题吧! 先来看看这两个函数的区别: $.fn.extend是为查询的 ...
- Jquery揭秘系列:实现 ready和bind事件
讲这一节之前,先回顾之前的一篇<小谈Jquery>里面的代码: (function (win) { var _$ = function (selector, context) { retu ...
- 第110天:Ajax原生js封装函数
一.Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHtt ...
- ajax 原生js封装ajax [转]
/* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @ ...
- ajax原生js封装
不带注释的 function ajax(json) { json.type = json.type ? json.type : 'get'; json.async = json.async == fa ...
随机推荐
- IE7浏览器窗口大小改变事件执行多次bug(转)
var resizeTimer = null; $(window).resize(function() { if (resizeTimer) clearTimeout(resizeTimer); re ...
- 2016第16本:TED演讲的秘密
花0.01元抢购了<得到APP>中的<成甲说书:TED演讲的秘密>,不到30分钟的音频,感觉全是干货,基本不用看原书了.如果在以后的演讲中随便应用几条都可以让演讲水平提升一大截 ...
- ImageLoader配合ImageSwitcher的使用
先在MyApplication中初始化ImageLoader initImageLoader(getApplicationContext()); /** * 初始化ImageLoader * 如果你经 ...
- IOS开发基础知识--碎片46
1:带中文的URL处理 // http://static.tripbe.com/videofiles/视频/我的自拍视频.mp4 NSString *path = (__bridge_transfer ...
- # iOS 10 适配 # 适配刷新控件 以MJRefresh 为例
在iOS10中ScrollView 添加了一个refreshControl的东西 - - 不知道水果公司做了什么 导致原有的刷新控件类刷新后frame.y 向下偏移了20 起初以为是水果调整了sta ...
- AndroidStudio配置gradle,让App自动签名
最近开发关于微信一系列功能,发现分享.支付必须要打包签名才能测试,太耽误事了,耗时耗力...在网上扒拉扒拉资料,发现有很多前辈都处理过类似问题,非常感谢大家的分享,参考链接:http://blog.c ...
- Windows 双网卡指定网络出口
主要命令: ipconfig route ping tracert 指定外网路由通过本地以太网连接出去 route add -p 0.0.0.0 mask 0.0.0.0 192.168.10 ...
- 基于显卡的光栅化渲染器Gaius计划
决定实现一个基于显卡的光栅化渲染器,能将一些基于显卡的新算法融入其中.
- iPhone被盗后怎么?这篇文章只办针对iOS7后的系统
中午准备去吃饭的时候,今天看到Tungbaby的手机被盗后怎么做?http://www.jianshu.com/p/f13f49cd9b90 碰巧我的手机也被盗了.就来分享下我的经验吧.由于我当时是在 ...
- Linux系统查看系统是32位还是64位方法总结
这篇博客是总结.归纳查看Linux系统是32位还是64位的一些方法,很多内容来自网上网友的博客.本篇只是整理.梳理这方面的知识,方便自己忘记的时候随时查看. 方法1:getconf LONG_BIT ...