下面小编就为大家带来一篇 Jquery 揭秘系列: ajax 原生 js 实现详解 (推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
讲到 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 实现详解 (推荐) 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0302/265042.html