載入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;
}

上面的函數使用很簡單,比如把擷取到的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文檔內容的操作
});

具體執行個體請到攝影欄目看,那些圖片都是從imgdata.xml中載入過來的.其實,Flickr有完善且強大的API機制,但還沒弄太明白.改天嘗試直接產生一個JSON檔案讀相應的圖片資料,那樣會更方便.

 

原文發佈於Mr.Think的部落格: http://mrthink.net/js-jq-xml-function/