# javascript快速入門25--瀏覽器中的XML
## 打開XML
首先,直接從瀏覽器中打開XML文件,瀏覽器會對其進行格式良好性檢查,如果不符合XML語法規范則顯示出錯,如果格式良好,再檢查是否包含樣式表(CSS或XSL),如果包含樣式表,則用樣式表格式化XML文檔然后顯示,如果沒有,則顯示經過格式化的XML源碼(不同瀏覽器顯示方式不一樣).注意,瀏覽器只對XML進行格式良好性檢查,而不對其進行有效性檢查!如何在XML文檔中引入樣式表?示例:
```
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="test.css"?>
```
如果是使用XSL,只需將上面的type屬性值改成text/xsl即可!
## XMLHttpRequest對象的responseXML屬性
XMLHttpRequest對象的responseXML屬性用來獲取從服務器端返回的XML文件,如果沒有則為null.注意,只有在服務器環境下,請求一個以.xml為后綴的文件返回的才會是一個XML DOM,在本地請求一個XML文件,返回的仍是文本文件.如果要使用服務器腳本生成字符串,要返回XML,必須加上一些頭信息
```
//JS Code
var xhr = XHR();//XHR為之前所寫的可以跨瀏覽器創建XMLHttpRequest對象的函數
xhr.open("get","test.php",true);
xhr.onreadystatechange = function () { if (xhr.readyState==4 && xhr.status == 200) { //輸出root
alert(xhr.responseXML.documentElement.nodeName);//可以使用DOM 2 Core的一些屬性和方法
}
};
xhr.send(null); //PHP Code
header("Content-Type:text/xml");//發送MIME信息
echo <<<XML <?xml version="1.0" encoding="gbk"?>
<root />
XML;
```
### 更簡單的方法:直接加載XML文件
瀏覽器也提供了直接加載XML文件的方法,但也僅僅火狐與Windows平臺上的IE支持而已.同樣,兩者之間的實現也有很大的差別的!
#### IE中的XML DOM
微軟在JavaScript中引入了用于創建ActiveX對象的ActiveXObject類。ActiveXObject的構造函數只有一個參數——要進行實例化的ActiveX對象的字符串代號。例如,XML DOM對象的第一個版本稱為Microsoft.XmlDom。所以,要創建這個對象的實例,使用以下代碼:
```
var xmlDom = new ActiveXObject("Microsoft.XmlDom");
```
IE中的XML DOM支持的最新版本是5.0,IE中存在以下版本的XML DOM實現:
* Microsoft.XmlDom(最原始的)
* MSXML2.DOMDocument
* MSXML2.DOMDocument.3.0
* MSXML2.DOMDocument.4.0
* MSXML2.DOMDocument.5.0
自然地,只要可能,大家都會選擇最新的XML DOM的版本,因為新版會提高速度,添加一些新的功能如驗證等。但是,如果嘗試創建不存在于客戶端機器上的ActiveX對象,IE就會拋出錯誤并停止所有執行。所以,為確保使用了正確的XML DOM版本,也為避免任何其他錯誤,我們可以創建一個函數來測試每個XML DOM字符串,出現錯誤即捕獲:
```
function XMLDOM() { var xmlDomVers = [ "Microsoft.XmlDom", "MSXML2.DOMDocument", "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument.4.0", "MSXML2.DOMDocument.5.0" ]; for (var i=xmlDomVers.length-1;i>=0;i--) { try { var xmlDom = new ActiveXObject(xmlDomVers[i]); return xmlDom;
} catch(e) {continue;}
}
}
```
接下來就是載入XML. 微軟的XML DOM有兩種載入XML的方法:loadXML()和load()。loadXML()方法可直接向XML DOM輸入XML字符串.load()方法用于從服務器上載入XML文件。不過,load()方法只可以載入與包含JavaScript的頁面存儲于同一服務器上的文件,也就是說,不可以通過其他人的服務器載入XML文件。 load方法還有兩種載入文件的模式:同步和異步。以同步模式載入文件時,JavaScript代碼會等待文件完全載入后才繼續執行代碼;而以異步模式載入時,不會等待,可以使用事件處理函數來判斷文件是否完全載入了。默認情況下,文件按照異步模式載入。要進行同步載入,只需設置async特性為false:
```
//Only For IE
var xmlDom = XMLDOM();
xmlDom.loadXML("<root />");
alert(xmlDom.documentElement.nodeName); var xml = XMLDOM();
xml.async = false;//同步載入
xml.load("test.xml");
alert(xml.documentElement.firstChild.nodeValue); //同步加載時需要使用readystatechange事件監聽
var xml2 = XMLDOM();
xml2.async=true;//可以不指定,默認是異步載入的
xml2.onreadystatechange = function () {//必須在調用load方法前分配此事件處理函數
if (xml2.readyState==4) {//readyState的含義和XHR對象是一樣的
//注意這里沒有使用this,因為IE下的ActiveXObject很特殊,使用this會出錯
alert(xml2.xml);//與innerHTML屬性類似,IE中的xml屬性返回XML字符串形式的源碼
//但注意,IE中的XMLDOM對象的xml屬性是只讀的
}
};
xml2.load("test.xml");
```
在嘗試將XML載入到XML DOM對象中時,無論使用loadXML()方法還是load()方法,都有可能出現XML格式不正確的情況。為解決這個問題,微軟的XML DOM的parseError的特性包含了關于解析XML代碼時所遇到的問題的所有信息。
parseError特性實際上是包含以下特性的對象:
* errorCode——表示所發生的錯誤類型的數字代號(當沒有錯誤時為0)
* filePos——錯誤發生在文件中的位置
* line——遇到錯誤的行號
* linepos——在遇到錯誤的那一行上的字符的位置
* reason——對錯誤的一個解釋
* srcText——造成錯誤的代碼
* url——造成錯誤的文件的URL(如果可用)
當直接對parseError自身取值,它會返回errorCode的值,也就是說可以這樣進行檢查
```
if (xmlDom.parseError===0) {
alert("沒有出錯!");
} else { var er = xmlDom.parseError;
alert("XML解析出錯!錯誤信息如下:\n\
錯誤代號:"+er.errorCode+"\n\
文件:"+er.filePos+"\n\
行:"++er.line+"\n\
字符:"+er.linepos+"\n\
相關信息:"+er.reason+"\n\");
}
```
#### Mozilla中的XML DOM
與Mozilla其他方面一樣,它提供的XML DOM版本要比IE的更加標準。 Mozilla中的XML DOM實際上是它的JavaScript實現,也就是說它不僅與瀏覽器一起衍化,同時它能可靠地在Mozilla支持的所有平臺上使用。因此與不能在Macintosh上使用XML DOM的IE不同,Mozilla的支持跨越了平臺的界限。另外,Mozilla的XML DOM實現了支持DOM Level 2 的功能,而微軟的,僅支持DOM Level 1。
DOM標準指出,document.implementation對象有個可用的createDocument()方法。Mozilla嚴格遵循了這個標準,可以這樣創建XML DOM:
```
var xmlDom = document.implementation.createDocument("","",null);
```
createDocument()的三個參數分別是文檔的命名空間URL,文檔元素的標簽名以及一個文檔類型對象(總是為null,因為在Mozilla中還沒有對文檔類型對象的支持)。前面這行代碼創建一個空的XML DOM。要創建包含一個文檔元素的XML DOM,只需將標簽名作為第二個參數:
```
var xmlDom = document.implementation.createDocument("","root",null);
```
這行代碼創建了代表XML代碼<root/>的XML DOM。如果在第一個參數中指定了命名空間URL,可進一步定義文檔元素:
```
var xmlDom = document.implementation.createDocument("http://www.x-do.org","root",null);
```
這行代碼創建了表示<root xmlns="http://www.x-do.org"/>的XML DOM
與微軟的XML DOM不同,Mozilla只支持一個載入數據的方法:load()。Mozilla中的load()方法和IE中的load()工作方式一樣。只要指定要載入的XML文件,以及同步還是異步(默認)載入。如果同步載入XML文件,代碼基本上IE差不多:
```
var xmlDom = document.implementation.createDocument("","root",null);
xmlDom.async = false;//同步載入
xmlDom.load("test.xml");
```
與IE不同的是,同步載入時,并沒有readychange事件,而只有load事件,并且只有加載完畢一種狀態!
```
var xmlDom = document.implementation.createDocument("","root",null);
xmlDom.async = true;//異步載入
xmlDom.onload = function () {
alert(this.documentElement.childNodes.item(0).tagName); //對于JS,訪問節點列表既可以用item方法,又可用數字下標,而其它語言則不一定能使用下標
};
xmlDom.load("test.xml");
```
另外,麻煩的是,Mozilla的XML DOM不支持loadXML()方法。要將XML字符串解析為DOM,必須使用DOMParser對象,使用其parseFromString方法傳入XML字符串表現形式:
```
var xmlParser = new DOMParser(); var xmlDom = xmlParser.parseFromString("<root />","text/xml");//該方法返回一個XML DOM對象
//第二個參數text/xml也可以是application/xml,兩者都用來解析XML
//還可以是application/xhtml+xml,用來解析XHTML,只能用這三種MIME
```
與直接解析XML字符串相對應的獲取XML字符串的方法,IE中XML DOM對象具有只讀的xml屬性,而Mozilla 則沒有相對應的屬性,但是,Mozilla提供了可以用于同樣的目的的XMLSerializer對象:
```
var serializer= new XMLSerializer(); var xmlStr = serializer.serializeToString(xmlDom,"text/xml"); //xmlDom為一個XML DOM節點對象
//而text/xml也可為application/xml
```
對于XML 解析錯誤,Mozilla的實現方式非常麻煩,它不像IE那樣提供一個對象來表示錯誤,而是將錯誤信息作為一個XML文檔返回,要獲取具體的錯誤信息,還必須用解析其中的字符串!
```
var xmlParser = new DOMParser(); var xmlDom = xmlParser.parseFromString("<root><child></root>","text/xml");
alert(xmlDom.documentElement.nodeName);//將返回parsererror,因為文檔解析出錯時
var serializer = new XMLSerializer(); var str = serializer.serializeToString(xmlDom,"text/xml");
alert(str);//將輸出類似下面內容
<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"> XML解析錯誤:不符合的記號.預期:</child>。
位置:file:///E:/XML/test.html
行:1,列:16:<sourcetext><root><child></root>
---------------^</sourcetext></parsererror>
```
而從其中抽取出諸如行號這些錯誤信息,只好使用正則表達式了!但是由于瀏覽器的語言設置不同,使用正則表達式也是困難重重的! 可以看到,雖然Mozilla對XML DOM的實現更標準,但是使用起來是非常不方便的!
## 跨瀏覽器的XML DOM構造函數
說它跨瀏覽器,其實也僅僅是兼容Mozilla與Windows上的IE而已,而對于其它瀏覽器,則可以降級,考慮使用XHR的responseXML,雖然XHR對象該屬性沒有提供什么高級的方便的方法,但用于讀取XML已經足夠了!
```
if (document.implementation && document.implementation.createDocument) { //W3C
var getXMLDOM=function () {//獲取一個XMLDOM對象
return document.implementation.createDocument("","",null);
},
loadXMLFile=function (xmlDom,url,callback) { if (xmlDom.async===true) {
xmlDom.onload=function () { if (xmlDom.documentElement.nodeName=="parsererror") { throw new Error("XML Parse Error:"+xmlDom.documentElement.firstChild.nodeValue);
} else {
callback.call(xmlDom);
}
};
}
xmlDom.load(url); return xmlDom;
},
loadXMLString=function (xmlDom,s) { var p = new DOMParser(); var newDom=p.parseFromString(s,"text/xml"); if (newDom.documentElement.nodeName=="parsererror") { throw new Error("XML Parse Error:"+newDom.documentElement.firstChild.nodeValue);
} while (xmlDom.firstChild) {
xmlDom.removeChild(xmlDom.firstChild);
} for (var i=0,n;i<newDom.childNodes.length;i++) {
n=xmlDom.importNode(newDom.childNodes[i],true); //importNode用于把其它文檔中的節點導入到當前文檔中
//true參數同時導入子節點
xmlDom.appendChild(n);
} return xmlDom;
},
getXML=function (xmlNode) { var s= new XMLSerializer(); return s.serializeToString(xmlNode,"text/xml");
};
} else if (window.ActiveXObject) { //IE
var getXMLDOM=function () { return new ActiveXObject("Microsoft.XmlDom");
},loadXMLFile=function (xmlDom,url,callback) {
xmlDom.onreadystatechange=function () { if (xmlDom.readyState===4) { if (xmlDom.parseError.errorCode===0) {
callback.call(xmlDom);
} else { throw new Error("XML Parse Error:"+xmlDom.parseError.reason);
}
}
};
xmlDom.load(url); return xmlDom;
},loadXMLString=function (xmlDom,s) {
xmlDom.loadXML(s); if (xmlDom.parseError.errorCode!==0) { throw new Error("XML Parse Error:"+xmlDom.parseError.reason);
} return xmlDom;
},
getXML=function (xmlNode) { return xmlNode.xml;
};
}
```
- 介紹
- HTML/CSS 教程
- 第 1 章 HTML5 概述
- 第 2 章 基本格式
- 第 3 章 文本元素
- 第 4 章 超鏈接和路徑
- 第 5 章 分組元素
- 第 6 章 表格元素
- 第 7 章 文檔元素
- 第 8 章 嵌入元素
- 第 9 章 音頻和視頻
- 第 10 章 表單元素[上]
- 第 10 章 表單元素[中]
- 第 10 章 表單元素[下]
- 第 11 章 全局屬性和其他
- 第 12 章 CSS 入門
- 第 13 章 CSS 選擇器[上]
- 第 14 章 CSS 顏色與度量單位
- 第 15 章 CSS 文本樣式[上]
- 第 15 章 CSS 文本樣式[下]
- 第 16 章 CSS 盒模型[上]
- 第 16 章 CSS 盒模型[下]
- 第 17 章 CSS 邊框與背景[上]
- 第 17 章 CSS 邊框與背景[下]
- 第 18 章 CSS 表格與列表
- 第 19 章 CSS 其他樣式
- 第 20 章 CSS3 前綴和 rem
- 第 21 章 CSS3 文本效果
- 第 21 章 CSS3 文本效果
- 第 23 章 CSS3 邊框圖片效果
- 第 24 章 CSS3 變形效果[下]
- 第 25 章 CSS3 過渡效果
- 第 26 章 CSS3 動畫效果
- 第 27 章 CSS 傳統布局[上]
- 第 27 章 CSS 傳統布局[下]
- 第 28 章 CSS3 多列布局
- 第 29 章 CSS3 彈性伸縮布局[上]
- 第 29 章 CSS3 彈性伸縮布局[中]
- 第 29 章 CSS3 彈性伸縮布局[下]
- 第 30 章 使用 Emmet 插件
- Bootstrap 教程
- 第 1 章 Bootstrap 介紹
- 第 2 章 排版樣式
- 第 3 章 表格和按鈕
- 第 4 章 表單和圖片
- 第 5 章 柵格系統
- 第 6 章 輔組類和響應式工具
- 第 7 章 圖標菜單按鈕組件
- 第 8 章 輸入框和導航組件
- 第 9 章 路徑分頁標簽和徽章組件
- 第 10 章 巨幕頁頭縮略圖和警告框組件
- 第 11 章 進度條媒體對象和 Well 組件
- 第 12 章 列表組面板和嵌入組件
- 第 13 章 模態框插件
- 第 14 章 下拉菜單和滾動監聽插件
- 第 15 章 標簽頁和工具提示插件
- 第 16 章 彈出框和警告框插件
- 第 17 章 按鈕和折疊插件
- 第 18 章 輪播插件
- 第 19 章 附加導航插件
- 第 20 章 項目實戰--響應式導航[1]
- 第 20 章 項目實戰--響應式輪播圖[2]
- 第 20 章 項目實戰--首頁內容介紹[上][3]
- 第 20 章 項目實戰--首頁內容介紹[下][4]
- 第 20 章 項目實戰--資訊內容[5,6]
- 第 20 章 項目實戰--案例和關于[7]
- javaScript 教程
- javascript快速入門1--JavaScript前世今生,HelloWorld與開發環境
- javascript快速入門2--變量,小學生數學與簡單的交互
- javascript快速入門3--分支判斷與循環
- javascript快速入門4--函數與內置對象
- javascript快速入門5--數組與對象
- javascript快速入門6--Script標簽與訪問HTML頁面
- javascript快速入門7--ECMAScript語法基礎
- javascript快速入門8--值,類型與類型轉換
- javascript快速入門9--引用類型
- javascript快速入門10--運算符,語句
- javascript快速入門11--正則表達式
- javascript快速入門12--函數式與面向對象
- javascript快速入門13--BOM——瀏覽器對象模型(Browser Object Model)
- javascript快速入門14--DOM基礎
- javascript快速入門15--節點
- javascript快速入門15--表單
- javascript快速入門16--表格
- javascript快速入門17--事件
- javascript快速入門18--樣式
- javascript快速入門19--定位
- javascript快速入門20--Cookie
- javascript快速入門21--DOM總結
- javascript快速入門22--Ajax簡介
- javascript快速入門23--XHR—XMLHttpRequest對象
- javascript快速入門24--XML基礎
- javascript快速入門25--瀏覽器中的XML
- javascript快速入門26--XPath
- javascript快速入門27--XSLT基礎
- PHP 教程
- 第一章 如何加載運行已發布的PHP項目
- 第二章 PHP基礎
- 第三章 操作符與控制結構
- 第四章 數學運算
- 第五章 數組
- 第六章 目錄與文件
- 第七章 自定義函數
- 第八章 字符串處理
- 第九章 正則表達式
- 第十章 日期與時間
- 第十一章 表單與驗證
- 第十二章 會話控制
- 第十三章 上傳文件
- 第十四章 處理圖像
- 第十五章 MySQL 數據庫
- 第十六章 PHP 操作MySQL
- 第十七章 面向對象基礎
- 第十八章 面向對象的特性
- 第十九章 面向對象的工具