javascript xml xsl取值及數(shù)據(jù)修改

更新時間：2008年06月21日 23:01:24 作者：

前幾天公司要用xml快速方便的存取屬性N多的數(shù)據(jù),跟sinoly合作研究了一下.做了一個小例子.

3.index.html--用javascript導入數(shù)據(jù)并能修改xml里的數(shù)據(jù).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>測試</title>
</head>
<link rel="Stylesheet" type="text/css" href="focusform.css"/>
<script language="javascript" src="form.js"></script>
<script type="text/javascript" src="detect.js"></script>
<script type="text/javascript" src="xmldom.js"></script>
<script type="text/javascript">
//載入xml與xsl文件
    var oxml = new XmlDom();
    var oxsl = new XmlDom();
    oxml.async = false;//同步載入
    oxsl.async = false;
    oxml.load("example.xml");
    oxsl.load("example.xsl");
    if (oxml.parseError != 0) {
        var oError = oxml.parseError;
        alert("An error occurred:\nError Code: "
              + oError.errorCode + "\n"
              + "Line: " + oError.line + "\n"
              + "Line Pos: " + oError.linepos + "\n"
              + "Reason: " + oError.reason);
    }
    if (oxsl.parseError != 0) {
        var oError = oxsl.parseError;
        alert("An error occurred:\nError Code: "
              + oError.errorCode + "\n"
              + "Line: " + oError.line + "\n"
              + "Line Pos: " + oError.linepos + "\n"
              + "Reason: " + oError.reason);
    }
    var sResult = oxml.transformNode(oxsl);
    //alert(sResult);
//一些操作
function btnSub(){
    var fes = document.forms[0].elements;
    for(var i = 0;i<fes.length;i++){
        var name = fes[i].name;
        if(name.indexOf('re_')!=-1){
            var xmlid=name.substring(3,name.length);
            var obj;// =  oxml.getElementById("items_1");//xml的dom里沒有這個方法?
            var oItems1 = oxml.getElementsByTagName("items");//也可以用xpath實現(xiàn)。
            var oItems2 = oxml.getElementsByTagName("item");
            for(var j=0;j<oItems1.length;j++){
                if(oItems1[j].getAttribute('id')==xmlid){
                    obj = oItems1[j];
                    break;
                }
            }
            for(var j=0;j<oItems2.length;j++){
                if(oItems2[j].getAttribute('id')==xmlid){
                    obj = oItems2[j];
                    break;
                }
            }
            if(obj){
                obj.childNodes[0].text = fes[i].value;
            }else{
                alert("在xml中未找到id為"+xmlid+"的items或item");
            }
        }
        if(name.indexOf('of_')!=-1){
            var xmlid=name.substring(3,name.length);
            var oItems1 = oxml.getElementsByTagName("items");
            var oItems2 = oxml.getElementsByTagName("item");
            for(var j=0;j<oItems1.length;j++){
                if(oItems1[j].getAttribute('id')==xmlid){
                    obj = oItems1[j];
                    break;
                }
            }
            for(var j=0;j<oItems2.length;j++){
                if(oItems2[j].getAttribute('id')==xmlid){
                    obj = oItems2[j];
                    break;
                }
            }
            if(obj){
                obj.childNodes[1].text = fes[i].value;
            }else{
                alert("在xml中未找到id為"+xmlid+"的items或item");
            }
        }
    }
    alert(oxml.xml);
    //alert(oxml.childNodes[2].xml);
    return false;
}

</script>
</head>

<body>
<form name="form1" action="test.jsp" method="post" onsubmit="return btnSub();">
<script type="text/javascript">
    document.write(sResult);
</script>
</form>
</body>
</html>
需要用到的輔助文件
4.focusform.css--樣式文件
5.form.js文本框的效果
6.detect.js--瀏覽器及操作系統(tǒng)識別(取自javascript高級程序設計)
7.xmldom.js--不同瀏覽器xml操作統(tǒng)一(取自javascript高級程序設計)