Jquery揭秘系列:ajax原生js实现详解(推荐)


Posted in Javascript onJune 08, 2016

讲到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实现详解(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
微信小程序实现多图上传
Jun 19 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 #Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 #Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 #Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 #Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 #Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 #Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 #Javascript
You might like
DOMXML函数笔记
2006/10/09 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
vue router demo详解
2017/10/13 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
详解JavaScript 的变量
2019/03/08 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
python交易记录整合交易类详解
2019/07/03 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
办公室文秘自我评价
2013/09/21 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
关于感谢信的范文
2015/01/23 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
新学期家长寄语2016
2015/12/03 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
《春酒》教学反思
2016/02/22 职场文书
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript