讲到ajax这个东西,我们要知道两个对象XMLHTTPRequest和ActiveXObject ,提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。XMLHTTPRequest基本上算是标准化了,兼容大部分浏览器ActiveXObject这玩儿意儿是微软的东西,所以是为了兼容IE版本,我们用的只是它的xmlHTTP功能。

为了功能的明确和清晰,我们把这个ajax代码分为5个部分:

  • 对象的创建
  • onreadystatechange句柄处理
  • 参数拼接
  • Get功能实现
  • Post功能实现

1.对象的创建 :

 首先创建用作 XMLHttpRequest 对象的 XMLHttp 变量。把它的值设置为 null。
按照 web 标准创建对象 (Mozilla, Opera 以及 Safari):XMLHttp=new XMLHttpRequest()
按照微软的方式创建对象,在 Internet Explorer 6 及更高的版本可用:XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")

如果捕获错误,则尝试更老的方法 (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实现的更多相关文章

  1. Jquery揭秘系列:Validation实现

    之前讲了一部分揭秘系列的东西,由于年初的时候在改项目,也没有写下去.现在开始闲下来了,会继续写没写完的东西,各种原生js实现Jquery的功能. 转入正题,说一下今天要讲的东西. 相信很多tx在项目里 ...

  2. 抛开jQuery,拾起原生JS的DOM操作

    常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...

  3. Jquery揭秘系列:谈谈bind,one,live,delegate事件及实现

    在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate等等. 我们先看看他们的定义,直接进入主题: bind( )方法用于将一个处理程 ...

  4. Jquery揭秘系列:谈谈bind,one,live,delegate,on事件及实现

    在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate,on等等. on() jQuery事件绑定.on()简要概述及应用 看源码发现 ...

  5. Jquery揭秘系列:实现$.fn.extend 和$.extend函数

    前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数. 其他的不多说,直接切入主题吧! 先来看看这两个函数的区别: $.fn.extend是为查询的 ...

  6. Jquery揭秘系列:实现 ready和bind事件

    讲这一节之前,先回顾之前的一篇<小谈Jquery>里面的代码: (function (win) { var _$ = function (selector, context) { retu ...

  7. 第110天:Ajax原生js封装函数

    一.Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHtt ...

  8. ajax 原生js封装ajax [转]

    /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @ ...

  9. ajax原生js封装

    不带注释的 function ajax(json) { json.type = json.type ? json.type : 'get'; json.async = json.async == fa ...

随机推荐

  1. IE7浏览器窗口大小改变事件执行多次bug(转)

    var resizeTimer = null; $(window).resize(function() { if (resizeTimer) clearTimeout(resizeTimer); re ...

  2. 2016第16本:TED演讲的秘密

    花0.01元抢购了<得到APP>中的<成甲说书:TED演讲的秘密>,不到30分钟的音频,感觉全是干货,基本不用看原书了.如果在以后的演讲中随便应用几条都可以让演讲水平提升一大截 ...

  3. ImageLoader配合ImageSwitcher的使用

    先在MyApplication中初始化ImageLoader initImageLoader(getApplicationContext()); /** * 初始化ImageLoader * 如果你经 ...

  4. IOS开发基础知识--碎片46

    1:带中文的URL处理 // http://static.tripbe.com/videofiles/视频/我的自拍视频.mp4 NSString *path = (__bridge_transfer ...

  5. # iOS 10 适配 # 适配刷新控件 以MJRefresh 为例

    在iOS10中ScrollView 添加了一个refreshControl的东西 - - 不知道水果公司做了什么  导致原有的刷新控件类刷新后frame.y 向下偏移了20 起初以为是水果调整了sta ...

  6. AndroidStudio配置gradle,让App自动签名

    最近开发关于微信一系列功能,发现分享.支付必须要打包签名才能测试,太耽误事了,耗时耗力...在网上扒拉扒拉资料,发现有很多前辈都处理过类似问题,非常感谢大家的分享,参考链接:http://blog.c ...

  7. Windows 双网卡指定网络出口

    主要命令: ipconfig route ping tracert     指定外网路由通过本地以太网连接出去 route add -p 0.0.0.0 mask 0.0.0.0 192.168.10 ...

  8. 基于显卡的光栅化渲染器Gaius计划

    决定实现一个基于显卡的光栅化渲染器,能将一些基于显卡的新算法融入其中.

  9. iPhone被盗后怎么?这篇文章只办针对iOS7后的系统

    中午准备去吃饭的时候,今天看到Tungbaby的手机被盗后怎么做?http://www.jianshu.com/p/f13f49cd9b90 碰巧我的手机也被盗了.就来分享下我的经验吧.由于我当时是在 ...

  10. Linux系统查看系统是32位还是64位方法总结

    这篇博客是总结.归纳查看Linux系统是32位还是64位的一些方法,很多内容来自网上网友的博客.本篇只是整理.梳理这方面的知识,方便自己忘记的时候随时查看. 方法1:getconf LONG_BIT ...