加載xml文檔的函數(原生JavaScript版及 jQuery版)
近幾天折騰了個攝影頁面，記錄平時拍的一些影像碎片，修改Wordpress的Filkr相冊插件嫌麻煩，于是所有圖片的地址都是以靜態形式寫進去。覺著很麻煩，特別是添加圖片時。怎么辦？我想到了強大的xml。何不將所有的圖片路徑數據集中放在一個xml文檔中，然后用JavaScript加載該文檔，再把數據一條條插進去，這樣就不用每次到頁面中寫html代碼了(JSON可以更簡潔的解析,但本文是講xml的，哈)。
如何用JavaScript加載xml文檔？ Google 一下，大把的信息，但MS都是有缺陷的(起碼我沒找到一個全兼容的)，不兼容，比如w3school版本 .怎么辦?自己折騰吧，查了JavaScript權威指南，又看了網上一些寫法，然后整理出一個原則上是全兼容的加載xml函數。經過本人測試的有：ie6/7/8，FF(Geckos)，Chrome(Webkit)，Opera，沒裝Safira，但她和Chrome一樣的核,應該沒問題。
原生JavaScript版本
function loadXml(fileName){
//@mrthink.net
var xmlDoc = null;
if (window.ActiveXObject) {//寫給ie系
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;//這句別漏掉,否則 IE系會報完成該操作所需的數據還不可用
//xmlDoc.loadXML(fileName);//這個是用來加載xml字符串的
xmlDoc.load(fileName);//如果用的是xml 文件。
}
else
if (document.implementation && document.implementation.createDocument) {//webkit,Geckos,Op 內核的
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", fileName, false);//類型,文件名,是否緩存
xmlhttp.send(null);
xmlDoc = xmlhttp.responseXML;
}
else {
xmlDoc = null;
}
return xmlDoc;
}
//@mrthink.net
var xmlDoc = null;
if (window.ActiveXObject) {//寫給ie系
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;//這句別漏掉,否則 IE系會報完成該操作所需的數據還不可用
//xmlDoc.loadXML(fileName);//這個是用來加載xml字符串的
xmlDoc.load(fileName);//如果用的是xml 文件。
}
else
if (document.implementation && document.implementation.createDocument) {//webkit,Geckos,Op 內核的
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", fileName, false);//類型,文件名,是否緩存
xmlhttp.send(null);
xmlDoc = xmlhttp.responseXML;
}
else {
xmlDoc = null;
}
return xmlDoc;
}
上面的函數使用很簡單，比如把獲取到的xml文檔賦值給var xmlDom=loadXml(‘i.xml’)；然后你就可以像操作普通DOM一樣操作xml文檔內容了。
至于jQuery版本的我就不多說了，有兩種方法，兼容性她都為你考慮了，并且調用特別簡單，如果你手頭有鋒利的jQuery 一書，可以在第326頁找到相關信息。下面貼出代碼：
基于jQuery版本
//可以指定參數的方法@mrthink.net
$.ajax({
//這個是萬能的,不單單可以讀xml
url:'i.xml', //xml文檔路徑
type:'GET', //請求方式
dataType:'xml',//文檔類型
timeout:1000,//超時時長
cache:false,//是否緩存
error:function(){alert('Oh,oh,Error!Haha!');},//這個是拋出加載失敗的信息,比js的智能吧
success:function(xml){
alert('Yeah! Success!');//在這里執行對 xml文檔內容的操作
}
});
//更簡潔的方法
$.get('i.xml',function(xml){
alert('Yeah! Success!');//在這里執行對 xml文檔內容的操作
});
$.ajax({
//這個是萬能的,不單單可以讀xml
url:'i.xml', //xml文檔路徑
type:'GET', //請求方式
dataType:'xml',//文檔類型
timeout:1000,//超時時長
cache:false,//是否緩存
error:function(){alert('Oh,oh,Error!Haha!');},//這個是拋出加載失敗的信息,比js的智能吧
success:function(xml){
alert('Yeah! Success!');//在這里執行對 xml文檔內容的操作
}
});
//更簡潔的方法
$.get('i.xml',function(xml){
alert('Yeah! Success!');//在這里執行對 xml文檔內容的操作
});
具體實例請到攝影欄目看，那些圖片都是從imgdata.xml中加載過來的。其實，Flickr有完善且強大的API機制,但還沒弄太明白。改天嘗試直接生成一個JSON文件讀相應的圖片數據，那樣會更方便。
全站熱搜
留言列表
