几种创建XMLHttpRequest对象的方法
2015-06-22 20:29
1056 查看
XMLHttpRequest对象,也就是Ajax交互的核心对象。
这里列举三种创建Ajax对象的方法。
第一种:
第一种第一个是判断window.XMLHttpRequest对象是否存在,存在则返回。不存在则检测IE浏览器的ActiveObject各个版本的不同对象。总的来说这种写法try和catch嵌套很多。看着有点晕
第二种:
第二种方法是W3School上面的方法,看起来很简洁,但是没有版本检测。在IE6下可以正常运行!低版本IE5-没有测过不知道,但是也是不推荐的写法。新版本跟老版本的IE在不同版本对XHR对象的处理不太一样,项目中还是推荐要写入版本号。
第三种:
第三种是来自Professional JavaScript for Web中文名《JavaScript高级程序设计(第3版)》这本书然后经过自己修改理解得到的。首先判断有没有支持XMLHttpRequest对象,有得话直接返回。没有的话检测IE的ActiveObject对象是否存在,存在则循环创建一个由新到老的版本号作为参数的对象,如果有错误则跳过错误继续创建低级的版本。有一步要注意,就是第一次运行的时候将函数的activeXString对象缓存为已经测试完毕的versions[i]版本参数,然后在第二次就不会执行if里面的东西,直接到return new ActiveXObject(argument.callee.activeXString)这句。这种写法是比较推荐的,逻辑比较清晰。而且没有像第一种那样用N个try和catch嵌套创建,而是通过数组和for循环创建。大师果然写的代码就是不一样,很严谨和扩展性很好的代码写法。
第四种是double Net提议的用惰性函数的写法
孤陋寡闻,了解了一下什么叫惰性函数,也谢谢double Net这位朋友的提醒 :)
惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了。
确实第三种代码没有考虑到惰性函数的优点的那部分,即是一次检测之后重写构造方法。
虽然看到这里我对与创建XHR对象的方法已经觉得够完美了,但是感觉上面的代码也不是我的菜,for里面嵌套好多代码,跟自己的代码习惯不太符合(有点处女座了请原谅^_^。。。)
第五种方法是后面才发现的
这里列举三种创建Ajax对象的方法。
第一种:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="author" content="manfredHu"> <meta name="website" content="http://www.cnblogs.com/manfredHu/"> </head> <body> <script type="text/javascript"> //IE8-中创建XHR对象的第一种方法 function getXHR() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else { window.XMLHttpRequest = function() { try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e1) { try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e2) { throw new Error("XMLHttpRequest is not supported"); } } } } } var XHR = getXHR(); console.log(XHR); </script> </body> </html>
第一种第一个是判断window.XMLHttpRequest对象是否存在,存在则返回。不存在则检测IE浏览器的ActiveObject各个版本的不同对象。总的来说这种写法try和catch嵌套很多。看着有点晕
第二种:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="author" content="manfredHu"> <meta name="website" content="http://www.cnblogs.com/manfredHu/"> </head> <body> <script type="text/javascript"> //IE8-中创建XHR对象的第二种方法 function getxhr() { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } console.log(xmlhttp); } var XHR = getxhr(); console.log(XHR); </script> </body> </html>
第二种方法是W3School上面的方法,看起来很简洁,但是没有版本检测。在IE6下可以正常运行!低版本IE5-没有测过不知道,但是也是不推荐的写法。新版本跟老版本的IE在不同版本对XHR对象的处理不太一样,项目中还是推荐要写入版本号。
第三种:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="author" content="manfredHu"> <meta name="website" content="http://www.cnblogs.com/manfredHu/"> </head> <body> <script type="text/javascript"> //IE8-中创建XHR对象的第三种方法 function createXHR() { if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); //IE7+和其他浏览器支持的 } else if (typeof ActiveXObject != "undefined") { //IE7-支持的 if (typeof arguments.callee.activeXString != "string") { var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len; for (i = 0, len = versions.length; i < len; i++) { try { new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (e) { } } } return new ActiveXObject(arguments.callee.activeXString); //返回ActiveXObject对象 } else { //全部不支持,抛出错误 throw new Error("don't support XMLHttpRequest"); } } var XHR = createXHR(); console.log(XHR); </script> </body> </html>
第三种是来自Professional JavaScript for Web中文名《JavaScript高级程序设计(第3版)》这本书然后经过自己修改理解得到的。首先判断有没有支持XMLHttpRequest对象,有得话直接返回。没有的话检测IE的ActiveObject对象是否存在,存在则循环创建一个由新到老的版本号作为参数的对象,如果有错误则跳过错误继续创建低级的版本。有一步要注意,就是第一次运行的时候将函数的activeXString对象缓存为已经测试完毕的versions[i]版本参数,然后在第二次就不会执行if里面的东西,直接到return new ActiveXObject(argument.callee.activeXString)这句。这种写法是比较推荐的,逻辑比较清晰。而且没有像第一种那样用N个try和catch嵌套创建,而是通过数组和for循环创建。大师果然写的代码就是不一样,很严谨和扩展性很好的代码写法。
第四种是double Net提议的用惰性函数的写法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>第四种创建方法</title> <meta name="author" content="double Net"> </head> <body> <script type="text/javascript"> var XHR = function() { //将浏览器支持的AJAX对象放入一个function中,并且根据固定的顺序放到一个队列里。 for (var AJAXObj = [function() { return new XMLHttpRequest }, function() { return new ActiveXObject("Msxml2.XMLHTTP") }, function() { return new ActiveXObject("Msxml3.XMLHTTP") }, function() { return new ActiveXObject("Microsoft.XMLHTTP") }], val = null, index = 0; index < AJAXObj.length; index++) { //此方法的核心,如果当前浏览器支持此对象就用val保存起来,用保存当前最适合ajax对象的function替换XHR方法,并且结束该循环。这样第二次执行XHR方法时就不需要循环,直接就能得到当前浏览器最适ajax对象。如果都不支持就抛出自定义引用错误。 try { val = AJAXObj[index]() } catch (b) { continue } //假设当前浏览器为标准浏览器,此处执行完毕之后console.log(XHR); //结果为:function () { // return new XMLHttpRequest //};XHR成功替换。 XHR = AJAXObj[index]; break } if (!val) { throw new ReferenceError("XMLHttpRequest is not supported") } return val; }; var xmlObj = XHR(); console.log(xmlObj); </script> </body> </html>
孤陋寡闻,了解了一下什么叫惰性函数,也谢谢double Net这位朋友的提醒 :)
惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了。
确实第三种代码没有考虑到惰性函数的优点的那部分,即是一次检测之后重写构造方法。
虽然看到这里我对与创建XHR对象的方法已经觉得够完美了,但是感觉上面的代码也不是我的菜,for里面嵌套好多代码,跟自己的代码习惯不太符合(有点处女座了请原谅^_^。。。)
第五种方法是后面才发现的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>第五种创建方法</title> </head> <body> <script type="text/javascript"> function createXHR() { if (typeof XMLHttpRequest != "undefined") { //在第一次执行的时候重写createXHR函数 createXHR = function() { return new XMLHttpRequest(); }; } else if (typeof ActiveXObject != "undefined") { createXHR = function() { if (arguments.callee.activeXString != "string") { var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len; for (i = 0, len = versions.length; i < len; i++) { try { new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (ex) { //skip } } } return new ActiveXObject(arguments.callee.activeXString); }; } else { createXHR = function() { throw new Error("No XHR object available."); }; } return createXHR(); } var XHR = createXHR(); alert(XHR); </script> </body> </html>
相关文章推荐
- 网络知识
- wp8将List对象转Json字符串用于网络传输
- 网络设备配置与管理---VLAN间路由实现部门间通信
- 网络设备配置与管理----通过VLAN划分隔离各公司的网络
- LVS在大规模网络环境中的应用
- 网络设备配置与管理----调试Cisco Catalyst交换机
- 【转】关于TCP和UDP协议消息保护边界的介绍
- tcp异常断开的重连解决方法
- Unity+NGUI打造网络图片异步加载和本地缓存工具(一)
- 【转】TCP协议的无消息边界问题
- 黑马程序员--网络编程
- 各网络设备的冲突域和广播域
- 深入理解linux网络技术内幕读书笔记(八)--设备注册与初始化
- Access, Trunk和Hybrid三种vlan模式理解
- 《UNIX网络编程 卷1》之"学习环境搭建"(CentOS 7)
- 聊聊HTTPS和SSL/TLS协议
- Linux网络相关配置
- TCP/IP协议族-----9、网际控制报文协议(ICMP)
- muduo网络图书馆评测
- unix网络编程-编译