摘要:IE vs. FireFox 系列 - 使用 XMLHTTP 讀取遠端檔案
摘要 :
為了讓網頁在各種瀏覽器中都可以使用,
所以想在這作一系列的探討,
討論各個瀏覽器之間的差異與如何讓你的網頁可以相容於各個瀏覽器!!
前言
要作一個網站,在之前算是很容易,因為大多數都是使用IE,但現在,強制使用者使用IE的話,你的網站將可能會越來越少人瀏覽,
因此,如何設計出任何瀏覽器適用的網站,已經變成是一個網頁設計師要面臨的嚴重問題.
在此,我將與大家分享一些我在這方面所遇到的問題與經驗.
面臨的問題 - 使用 XMLHTTP 讀取遠端檔案
有時,為了方便使用者操作網頁,我們會使用javascript調試xmlhttp,
讓網頁中的資料可以即時更新,但又不需要將整個網頁重新載入,
使用IE的話,我們都習慣使用下面的方式來呼叫
var xmlDom = new ActiveXObject("Microsoft.XMLHTTP");
var strData = "code=123";
xmlDom.open("POST","default.asp",false);
xmlDom.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xmlDom.send(strData);
var strData = "code=123";
xmlDom.open("POST","default.asp",false);
xmlDom.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xmlDom.send(strData);
但,在firefox,這樣的程式是不會有反應的,
因為firefox並不支援
new ActiveXObject("Microsoft.XMLHTTP")
在firefox中,必須使用下面的方式才行
new XMLHttpRequest()
其實在IE中,有時你也會發現有人使用
new ActiveXObject("Msxml2.XMLHTTP")
不過這就要看client所支援的xmlhttp是什麼版本的...
所以,為了讓大多數的瀏覽器都可以使用,
一般的想法是先判斷瀏覽器的種類,然後在建立相對應的物件,
不過,google提供了另一個做法,
就是直接建立物件,如果發生錯誤就在建立另一個試試,
程式寫法如下:
function jb()
{
var A=null;
try
{
A=new ActiveXObject("Msxml2.XMLHTTP")
} catch(e) {
try
{
A=new ActiveXObject("Microsoft.XMLHTTP")
} catch(oc) {
A=null
}
}
if ( !A && typeof XMLHttpRequest != "undefined" )
{
A=new XMLHttpRequest()
}
return A
}
{
var A=null;
try
{
A=new ActiveXObject("Msxml2.XMLHTTP")
} catch(e) {
try
{
A=new ActiveXObject("Microsoft.XMLHTTP")
} catch(oc) {
A=null
}
}
if ( !A && typeof XMLHttpRequest != "undefined" )
{
A=new XMLHttpRequest()
}
return A
}
這段是從Google Suggest的js中擷取出來的,
如此一來,只要將程式改成
var xmlDom = jb();
var strData = "code=123";
xmlDom.open("POST","default.asp",false);
xmlDom.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xmlDom.send(strData);
var strData = "code=123";
xmlDom.open("POST","default.asp",false);
xmlDom.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xmlDom.send(strData);
就可以了,
至於, new ActiveXObject("Microsoft.XMLHTTP") 跟 new XMLHttpRequest()
在功能上有沒有什麼差異,這就要等你去發掘了,
因為我的問題,到這已經算是解決了...