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 = 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>