脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → XML/RSS → XML示例 → xml+xsl+javascript取值及修改数据

javascript xml xsl取值及数据修改

 更新时间：2008年06月21日 23:01:24   作者：  
前几天公司要用xml快速方便的存取属性N多的数据,跟sinoly合作研究了一下.做了一个小例子.

3.index.html--用javascript导入数据并能修改xml里的数据.

<!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实现。
            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--浏览器及操作系统识别(取自javascript高级程序设计)
7.xmldom.js--不同浏览器xml操作统一(取自javascript高级程序设计) 

相关文章

最新评论