几种创建XMLHttpRequest对象的方法
XMLHttpRequest对象，也就是Ajax交互的核心对象。
这里列举三种创建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 = , 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 = ; 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 = , 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>
几种创建XMLHttpRequest对象的方法的更多相关文章
- 不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结
XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpReques ...
- 创建XMLHttpRequest对象方法
~~~ //创建XMLHttpRequest对象 function creatXmlHttpRequest() { var xmlHttp; try{ //非IE浏览器使用 xmlHttp = new ...
- 用js创建XMLHttpRequest对象池[转]
//使用literal语法定义一个对象:XMLHttp var XMLHttp = { //定义第一个属性,该属性用于缓存XMLHttpRequest对象的数组 XMLHttpRequestPool: ...
- Ajax学习系列——创建XMLHttpRequest对象
Ajax - 创建XMLHttpRequest对象 首先介绍什么是XMLHttpRequest: XMLHttpRequest是Ajax的基础.中文可以解释为可扩展超文本传输请求.术语缩写为XHR. ...
- 创建XMLHttpRequest对象
创建XMLHttpRequest对象 XMLHttpRequest对象: 用于在后台与服务器交换数据,可以在不重新加载整个页面的情况下,对页面的部分内容进行更新. 创建XMLHttpRequest对象 ...
- Ajax 学习之创建XMLHttpRequest对象------Ajax的核心
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- AJAX - 创建 XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject ...
- 创建 XMLHttpRequest 对象时IE的兼容问题解决办法
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象.如果支持,则创建 XMLHttpRequest 对象.如果不支持,则创建 ActiveXO ...
- Javascript 中创建自定义对象的方法（设计模式）
Javascript 中创建对象,可以有很多种方法. Object构造函数/对象字面量: 抛开设计模式不谈,使用最基本的方法,就是先调用Object构造函数创建一个对象,然后给对象添加属性. var ...
随机推荐
- JSONP使用
一.什么是JSONP jsonp是一种规则,它是利用创建html的script快的方式,将远端url放到src属性中,并以函数的形式执行远程返回值中的函数. jsonp的出现是为了解决浏览器同源策略的 ...
- LeetCode题目_Reverse Integer
最近在LeetCode上做题,写点东西记录一下,虽然自己做的都是些很水的题目,但是重在练手. 题号7:Reverse Integer,题目描述: Reverse digits of an intege ...
- 怎样在QML应用中创建一个Context Menu
我们在非常多的系统中看见能够在屏幕的一个地方长按,然后就能够依据当前显示的上下文弹出一个菜单. 菜单中能够有一些选项,比方删除,改动该项.这样的一般在ListView或GridView中常见.今天,我 ...
- Linux下多线程的重要知识点
线程属性: typedef struct { int detachstate; 线程的分离状态 int ...
- python插入记录后获取最后一条数据的id
python插入记录后取得主键id的方法(cursor.lastrowid和conn.insert_id()) 参考:https://blog.csdn.net/qq_37788558/article ...
- webpack无法通过 IP 地址访问 localhost 解决方案
解决方案: 在config里面的index.js里面的module.exports下面的dev下面的host:'localhost' 改为 host:'0.0.0.0',就可以访问啦!
- U盘安装CentOS7笔记
准备工具: 8G左右U盘; 最新版UltraISO; CentOS7光盘镜像; CentOS7的镜像文件可以在网易的开源镜像站或者阿里云的开源镜像站下载,地址分别是:http://mirrors.16 ...
- 如何查看java class文件的jdk版本
方法1: 用二进制的查看方式打开该class文件,参考如下: 只看第一行数据,前面8个字节CA FE BA BE 是固定的,之后4个字节00 00 是次版本号,次版本号后面的4个字节(00 33) ...
- 如何理解PHP的单例模式
单例模式就是让类的一个对象成为系统中的唯一实例,避免大量的 new 操作消耗的资源. PHP的单例模式实现要求: 1.一个private的__construct是必须的,单例类不能在其它类中实例化,只 ...
- 如何在mysql中存储音乐和图片文件
如何在mysql中存储音乐和图片文件? 果你想把二进制的数据,比如说图片文件和HTML文件,直接保存在你的MySQL数据库,那么这篇文章就是为你而写的! 我将告诉你怎样通过HTML表单来储存这些文件, ...