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 相关文章推荐
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
javascript基础知识讲解
Jan 11 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 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
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
基于jquery的3d效果实现代码
2011/03/23 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
python调试神器PySnooper的使用
2019/07/03 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
给排水工程师岗位职责
2013/11/21 职场文书
铁路工务反思材料
2014/02/07 职场文书
公司搬迁通知
2015/04/20 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
JS封装cavans多种滤镜组件
2022/02/15 Javascript
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL