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给基本控件的取值、赋值示例
May 23 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
Vue制作Todo List网页
Apr 26 Javascript
webpack4的迁移的使用方法
May 25 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
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下批量挂马和批量清马代码
2011/02/27 PHP
php生成静态页面的简单示例
2014/04/17 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
javascript 对象的定义方法
2007/01/10 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
Javascript函数的参数
2015/07/16 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
django实现后台显示媒体文件
2020/04/07 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
往来会计岗位职责
2013/12/19 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
努力学习保证书
2015/02/26 职场文书
父母教会我观后感
2015/06/17 职场文书
详解Vue的options
2021/05/15 Vue.js
2022漫威和DC电影上映作品
2022/04/05 欧美动漫