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 相关文章推荐
javascript tips提示框组件实现代码
Nov 19 Javascript
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
php实现的生成排列算法示例
2019/07/25 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
JS表的模拟方法
2015/02/05 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
js仿360开机效果
2019/12/26 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
python进阶教程之循环对象
2014/08/30 Python
Python迭代用法实例教程
2014/09/08 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
Python的语言类型(详解)
2017/06/24 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
Python中函数参数匹配模型详解
2019/06/09 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
基于Python的OCR实现示例
2020/04/03 Python
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
世界地球日活动总结
2015/02/09 职场文书