javascript操作xml(增删改查)例子代码

自己做了一个小东西,不是很好,但是对初学来说是一个不错的例子!

包括了stu.hta(是HTML应用程序);
     stu.xml
注意下面的HTML代码必须保存为后缀名为hta否则当对XML文件进行操作(增删改)的时候就会提示没有权限!!

文件stu.hta代码如下:

Java代码 复制代码
  1. <html>   
  2. <head>   
  3. <title> 数据岛的显示 </title>   
  4. <style type="text/css">   
  5. #findPanel   
  6. {   
  7.     position:absolute;   
  8.     width:220px;   
  9.     border:1px solid #666666;   
  10. }   
  11.   
  12. #findPanelTitle   
  13. {   
  14.     height:10px;   
  15.     background-color:#336699;   
  16.     cursor:move;   
  17. }   
  18.   
  19. #findPanelContent   
  20. {   
  21.     padding:5px 5px 5px 5px;   
  22.     background-color:#6699CC;   
  23. }   
  24. </style>   
  25.   
  26. </head>   
  27. <body>   
  28. <SCRIPT LANGUAGE="JavaScript">   
  29. <!--   
  30.   
  31.     var   xmlDoc   =   new   ActiveXObject("Msxml2.DOMDocument");      
  32.     xmlDoc.async   =   false;      
  33.     xmlDoc.resolveExternals   =   false;      
  34.     xmlDoc.load("stu.xml");   
  35.     //alert(xmlDoc.xml);   
  36.     //显示数据   
  37.     function show(){   
  38.         var vbo = document.getElementById("s").value;   
  39.         if(vbo=="显示学生信息"){   
  40.            document.getElementById('info').style.visibility='visible';   
  41.            document.getElementById("s").value="隐藏学生信息";   
  42.          }else{   
  43.             document.getElementById('info').style.visibility='hidden';   
  44.             document.getElementById("s").value="显示学生信息";   
  45.          }   
  46.     }   
  47.     //查找   
  48.     function que(){   
  49.        document.getElementById("ad").style.visibility="visible";   
  50.        document.getElementById("qmd").style.visibility="visible";   
  51.      }   
  52.   
  53.      /**  
  54.       * 解析XML文件函数  
  55.       * @param xmlDoc XML对象  
  56.       * @param name 属性名称 格式如:user.name  
  57.       */  
  58.     function getXMLProperty(xmlDoc, name) {   
  59.      var keys = name.split('.');   
  60.      var node = xmlDoc.documentElement;   
  61.      for(var i=0; i<keys.length; i++) {   
  62.       var childs = node.childNodes;   
  63.       var key = keys[i];   
  64.       for(var k=0; k<childs.length; k++) {   
  65.         var child = childs[k];   
  66.         if(child.nodeName == key) {   
  67.           if(child.childNodes.length == 1) {   
  68.            return child.text;   
  69.            } else {   
  70.             node = child;   
  71.             break;   
  72.            }   
  73.        }   
  74.      }   
  75.    }   
  76.    return "";   
  77.   }   
  78.   //返回父节点(通过节点名字和节点值)   
  79.    function getNod(nam,val){   
  80.       var node = xmlDoc.documentElement;   
  81.       var childs = node.childNodes;      
  82.       for (var i=0;i<childs.length ;i++ )   
  83.       {   
  84.        var child = childs[i];   
  85.        var childms = child.childNodes;   
  86.        for(var k=0;k<childms.length;k++){   
  87.        var childm = childms[k];   
  88.         if(childm.nodeName == nam && (childm.text).substring(0,6)==val){   
  89.          //alert(val);   
  90.          return child;   
  91.         }   
  92.        }   
  93.       }   
  94.       return '';   
  95.    }   
  96.    //通过父节点和子节点名返回子节点值   
  97.    function getNodVal(nods,nam){   
  98.        var childms = nods.childNodes;   
  99.        for(var k=0;k<childms.length;k++){   
  100.        var childm = childms[k];   
  101.         if(childm.nodeName == nam){   
  102.          //alert(childm.text);   
  103.          return childm.text;   
  104.         }   
  105.        }   
  106.          
  107.       return '';   
  108.    }   
  109.    //通过父节点和子节点名返回子节点   
  110.    function getCurNod(nods,nam){   
  111.        var childms = nods.childNodes;   
  112.        for(var k=0;k<childms.length;k++){   
  113.        var childm = childms[k];   
  114.         if(childm.nodeName == nam){   
  115.          //alert(childm.text);   
  116.          return childm;   
  117.         }   
  118.        }   
  119.          
  120.       return '';   
  121.    }   
  122.   
  123.     //开始查找   
  124.     function  query(){   
  125.        var renum = /^/d{5}$/;   
  126.        if(renum.exec(xh.value)){   
  127.        if(xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]")){   
  128.              var nod = getNod('学号',xh.value);   
  129.              //getNodVal(nod,'姓名');   
  130.              //getNodVal(nod,'性别');   
  131.              //getNodVal(nod,'籍贯');   
  132.            /*document.getElementById("xm").value=xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/姓名").text;  
  133.            document.getElementById("xb").value=xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/性别").text;  
  134.            document.getElementById("jg").value=xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/籍贯").text;  
  135.            document.getElementById("xh").disabled="true";   */  
  136.            document.getElementById("xm").value=getNodVal(nod,'姓名');   
  137.            document.getElementById("xb").value= getNodVal(nod,'性别');   
  138.            document.getElementById("jg").value= getNodVal(nod,'籍贯');   
  139.          }else{   
  140.           alert("该学号还没有被占用!");   
  141.          }   
  142.        }else{   
  143.         alert("学号非法!学号5位数字!");   
  144.         return false;   
  145.        }   
  146.     }   
  147.     //修改   
  148.     function mod(){     
  149.         if(info_check()){   
  150.           if(xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]")){   
  151.             if(confirm("确认修改?")){   
  152.               var nod = getNod('学号',xh.value);   
  153.               getCurNod(nod,'姓名').text=xm.value;   
  154.               getCurNod(nod,'性别').text=xb.value;   
  155.               getCurNod(nod,'籍贯').text=jg.value;   
  156.               /*  
  157.               xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/姓名").text=xm.value;  
  158.               xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/性别").text=xb.value;  
  159.               xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/籍贯").text=jg.value;  
  160.               */  
  161.               saveXML();   
  162.               //document.getElementById("xh").disabled="false";   
  163.               document.getElementById("xh").value="";   
  164.               document.getElementById("xm").value="";   
  165.               document.getElementById("xb").value="";   
  166.               document.getElementById("jg").value="";   
  167.               document.getElementById("ad").style.visibility="hidden";   
  168.               document.getElementById("qmd").style.visibility="hidden";   
  169.               alert("修改成功!");   
  170.               location.reload();   
  171.             }   
  172.           }else{   
  173.             alert("该学号还没有被占用!请按学号查询再进行修改!");   
  174.             return false;   
  175.           }   
  176.         }   
  177.     }   
  178.     //新增学生   
  179.     function add(){   
  180.         var  vadd = document.getElementById("add").value;   
  181.         if(vadd=="新增"){   
  182.            document.getElementById("xh").value="";   
  183.            document.getElementById("xm").value="";   
  184.            document.getElementById("xb").value="";   
  185.            document.getElementById("jg").value="";   
  186.            document.getElementById("qmd").style.visibility="hidden";   
  187.            document.getElementById('info').style.visibility='hidden';   
  188.            document.getElementById("s").value="显示学生信息";   
  189.            document.getElementById("ad").style.visibility="visible";   
  190.            document.getElementById("add").value="保存";   
  191.            document.getElementById("can").style.visibility="visible";   
  192.         }else{   
  193.            if(info_check()){   
  194.            add_node();   
  195.            saveXML();   
  196.            document.getElementById("xh").value="";   
  197.            document.getElementById("xm").value="";   
  198.            document.getElementById("xb").value="";   
  199.            document.getElementById("jg").value="";   
  200.            document.getElementById("ad").style.visibility="hidden";   
  201.            document.getElementById("qmd").style.visibility="hidden";   
  202.            document.getElementById("add").value="新增";   
  203.            alert("新增成功!");   
  204.            location.reload();   
  205.            }   
  206.         }   
  207.     }   
  208.        
  209.     //删除学生   
  210.     function del(){   
  211.        var renum = /^/d{5}$/;   
  212.        if(renum.exec(document.getElementById("xh").value)){   
  213.         if(xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]")){   
  214.           if(confirm("确认删除?")){   
  215.             /*var node = xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]");  
  216.             if(node.hasChildNodes()){               
  217.              var kids = node.childNodes;                 
  218.             for(var i=0;i<kids.length;i++){                         
  219.                 del();     
  220.               }     
  221.             }  
  222.              node.parentNode.removeChild(node);  
  223.              */  
  224.               var nod = getNod('学号',xh.value);   
  225.               nod.parentNode.removeChild(nod);   
  226.   
  227.              saveXML();   
  228.              can();   
  229.              alert("删除成功!");   
  230.              location.reload();   
  231.              }   
  232.         }else{   
  233.             alert("该学号还没有被占用!请按学号查询再进行修改!");   
  234.             return false;   
  235.         }   
  236.       }else{   
  237.         alert("学号非法!为5位数字!");   
  238.         return false;   
  239.       }   
  240.     }   
  241.   
  242.   
  243.     //取消新增   
  244.     function can(){   
  245.        document.getElementById("xh").value="";   
  246.        document.getElementById("xm").value="";   
  247.        document.getElementById("xb").value="";   
  248.        document.getElementById("jg").value="";   
  249.        document.getElementById("ad").style.visibility="hidden";   
  250.        document.getElementById("can").style.visibility="hidden";   
  251.        document.getElementById("qmd").style.visibility="hidden";   
  252.        document.getElementById("add").value="新增";   
  253.     }   
  254.     //增加结点   
  255.     function add_node(){   
  256.         var  oxh = xmlDoc.createElement("学号");   
  257.         oxh.appendChild(xmlDoc.createTextNode(xh.value));   
  258.         var  oxm = xmlDoc.createElement("姓名");   
  259.         oxm.appendChild(xmlDoc.createTextNode(xm.value));   
  260.         var  oxb = xmlDoc.createElement("性别");   
  261.         oxb.appendChild(xmlDoc.createTextNode(xb.value));   
  262.         var  ojg = xmlDoc.createElement("籍贯");   
  263.         ojg.appendChild(xmlDoc.createTextNode(jg.value));   
  264.   
  265.         var oxs = xmlDoc.createElement("学生");   
  266.         oxs.appendChild(oxh);   
  267.         oxs.appendChild(oxm);   
  268.         oxs.appendChild(oxb);   
  269.         oxs.appendChild(ojg);   
  270.   
  271.         var parent = xmlDoc.selectSingleNode("/学生管理");   
  272.         if(parent.hasChildNodes())   {      
  273.            parent.insertBefore(oxs,parent.firstChild);      
  274.           }else{      
  275.            parent.appendChild(oxs);      
  276.           }    
  277.     }   
  278.     //保存XML   
  279.     function saveXML(){   
  280.         xmlDoc.save("stu.xml");   
  281.     }   
  282.     //验证新增数据   
  283.     function info_check(){   
  284.       var renum = /^/d{5}$/;   
  285.       var rec = /^[/u4E00-/u9FA5]{2,5}$/;   
  286.       if(!renum.exec(document.getElementById("xh").value)){   
  287.         alert("学号非法!为5位数字!");   
  288.         return false;   
  289.        }   
  290.       if(!rec.exec(xm.value)){   
  291.         alert("姓名非法!只能是中文最少两个字,最多不得超过5个字!");   
  292.         return false;   
  293.       }   
  294.       //alert(xb.value!="男");   
  295.       switch(xb.value){   
  296.        case "男":break;   
  297.        case "女":break;   
  298.        default:alert("性别只能是/"男/"或/"女/"!"); return false;   
  299.       }   
  300.   
  301.   
  302.       if(!rec.exec(jg.value)){   
  303.         alert("籍贯非法!只能是中文最少两个字,最多不得超过5个字!!");   
  304.         return false;   
  305.       }   
  306.       return true;   
  307.     }   
  308.        
  309. //-->   
  310. </SCRIPT>   
  311.   
  312. <input id="s" type=button value="显示学生信息" onclick="show();">   
  313. <input id="que" type=button value="精确查询" onclick="que();">   
  314. <input id="add" type=button value="新增" onclick="add();">   
  315. <input id="can" type=button value="取消" onclick="can();" style="visibility:hidden">   
  316.   
  317. <br>   
  318. <center>   
  319. <div id="ad" style="visibility:hidden">   
  320.   <table><tr><td>学号:   
  321.   <input type=text id="xh" style="ime-mode:disabled" size=5 maxlength=5 onKeyPress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false"><!-- style 用于光闭输入法 onKeyPress 只能输入数字-->   
  322.   </td><td>姓名:   
  323.   <input type=text id="xm" size=10 maxlength=5>   
  324.   </td><td>性别:   
  325.   <input type=text id="xb" size=5 maxlength=5>   
  326.   </td><td>籍贯:   
  327.   <input type=text id="jg" size=10 maxlength=5>   
  328.   </td>   
  329.   </tr>   
  330.   </table>   
  331. </div>   
  332. <div id="qmd" style="visibility:hidden">   
  333.   <table>   
  334.   <tr align="center">     
  335.   <td></td>   
  336.   <td><input id="que" type=button value="查询" onclick="query();"></td>   
  337.   <td><input id="mod" type=button value="修改" onclick="mod();"></td>   
  338.   <td><input id="del" type=button value="删除" onclick="del();"></td>      
  339.   </tr>   
  340.   </table>   
  341. </div>   
  342. </center>   
  343. <div id="findPanel">   
  344.   <div id="findPanelTitle">可拖动</div>   
  345.   <div id="findPanelContent">   
  346.     <input type="text" size="20" value="a" id="key" onkeydown="javascript:ChckSubmit(event);">   
  347.     <input type="button" value="查找" onclick="javascript:OnKeySubmit();">   
  348.   </div>   
  349. </div>   
  350. <script language="javascript">   
  351. <!--   
  352. var findPanel = document.getElementById("findPanel");   
  353. var findPanelTitle = document.getElementById("findPanelTitle");   
  354. var findPanelContent = document.getElementById("findPanelContent");   
  355. var findPanel_orgnX = 50;   
  356. var findPanel_orgnY = 50;   
  357.   
  358. //设置物件位置   
  359. findPanel.style.pixelLeft = document.body.scrollLeft + findPanel_orgnX;   
  360. findPanel.style.pixelTop = document.body.scrollTop + findPanel_orgnY;   
  361. //================================================================================   
  362. var foundCnt = 0//已经找到了的结果的数量   
  363.   
  364. //查找入口函数   
  365. function Find(key)   
  366. {   
  367.     if (key == "")   
  368.     {   
  369.         return;   
  370.     }   
  371.        
  372.     if (document.all)   
  373.     {   
  374.         IEFind(key);   
  375.     }   
  376.     else  
  377.     {   
  378.         NSFind(key);   
  379.     }   
  380. }   
  381.   
  382. //浏览器为 IE 系列   
  383. function IEFind(key)   
  384. {   
  385.     var rng = document.body.createTextRange();   
  386.     var found = false;   
  387.     for (var i=0; i<=foundCnt && (found=rng.findText(key)); i++)   
  388.     {   
  389.         rng.moveStart("character"1); //找到,后移一位以查找下一个   
  390.     }   
  391.        
  392.     if (found)   
  393.     {   
  394.          rng.moveStart("character", -1);   
  395.          rng.findText(key);   
  396.          rng.select();   
  397.          rng.scrollIntoView();   
  398.          foundCnt++;   
  399.     }   
  400.     else  
  401.     {   
  402.         if (foundCnt > 0)   
  403.         {   
  404.             //已经查找一遍,找到有符合条件的结果,重新开始查找   
  405.             foundCnt = 0;   
  406.             IEFind(key);   
  407.         }   
  408.         else  
  409.         {   
  410.             //已经查找一遍,没有找到符合条件的结果   
  411.             alert("文档搜索完毕。");   
  412.         }   
  413.     }   
  414. }   
  415.   
  416. //浏览器为 NS 系列   
  417. function NSFind(key)   
  418. {   
  419.     if (window.find(key))   
  420.     {   
  421.         foundCnt++;   
  422.     }   
  423.     else  
  424.     {   
  425.         var found = false;   
  426.         while (window.find(key, falsetrue))   
  427.         {   
  428.             found = true;   
  429.         }   
  430.            
  431.         if (found)   
  432.         {   
  433.             //已经查找一遍,找到有符合条件的结果,重新查找也已经开始   
  434.             foundCnt = 1;   
  435.         }   
  436.         else  
  437.         {   
  438.             //已经查找一遍,没有找到符合条件的结果   
  439.             alert("文档搜索完毕。");   
  440.         }   
  441.     }   
  442. }       
  443.   
  444. function OnKeySubmit()   
  445. {   
  446.     var key = document.getElementById("key");   
  447.     Find(key.value);   
  448. }   
  449.   
  450. function ChckSubmit(e)   
  451. {   
  452.     if (e.keyCode == 13)   
  453.     {   
  454.         OnKeySubmit();   
  455.     }   
  456. }   
  457. //================================================================================   
  458. function RePosFindPanel()   
  459. {   
  460.     findPanel.style.pixelLeft = document.body.scrollLeft + findPanel_orgnX;   
  461.     findPanel.style.pixelTop = document.body.scrollTop + findPanel_orgnY;   
  462. }   
  463.   
  464. document.body.onscroll = RePosFindPanel;   
  465. document.body.onresize = RePosFindPanel;   
  466. //================================================================================   
  467. //拖拽过程中相关变量   
  468. var draging = false//是否处于拖拽中   
  469. var offsetX = 0;     //X方向左右偏移量   
  470. var offsetY = 0;     //Y方向上下偏移量   
  471.   
  472. //准备拖拽   
  473. function BeforeDrag()   
  474. {   
  475.     if (event.button != 1)   
  476.     {   
  477.         return;   
  478.     }   
  479.     offsetX = document.body.scrollLeft + event.clientX-findPanel.style.pixelLeft;   
  480.     offsetY = document.body.scrollTop + event.clientY-findPanel.style.pixelTop;   
  481.     draging = true;   
  482. }   
  483.   
  484. //拖拽中   
  485. function OnDrag()   
  486. {   
  487.     if(!draging)   
  488.     {   
  489.         return;   
  490.     }   
  491.     //更新位置   
  492.     findPanel_orgnX = event.clientX-offsetX;   
  493.     findPanel_orgnY = event.clientY-offsetY;   
  494.     event.returnValue = false;   
  495.     findPanel.style.pixelLeft = document.body.scrollLeft + event.clientX-offsetX;   
  496.     findPanel.style.pixelTop = document.body.scrollTop + event.clientY-offsetY;   
  497. }   
  498.   
  499. //结束拖拽   
  500. function EndDrag()   
  501. {   
  502.     if (event.button != 1)   
  503.     {   
  504.         return;   
  505.     }   
  506.     draging = false;   
  507. }   
  508.   
  509. findPanelTitle.onmousedown = BeforeDrag;   
  510. document.onmousemove = OnDrag;   
  511. findPanelTitle.onmouseup = EndDrag;   
  512. //-->   
  513. </script>   
  514. <xml id="stu" src="stu.xml">   
  515. </xml>   
  516. <center>   
  517. <div id="info" style="visibility:hidden">   
  518. <table  DATASRC=#stu border=1 style="background-color:#a9eeef; Border-color   
  519. :red;" >   
  520. <caption><h2>学生信息管理</h2></caption>   
  521. <thead>    
  522. <th>学号</th>   
  523. <th>姓名</th>     
  524. <th>性别</th>     
  525. <th>籍贯</th>    
  526. </thead>    
  527. <tr>    
  528. <td>     
  529. <div DATAFLD="学号">     
  530. </td>     
  531. <td>     
  532. <div DATAFLD="姓名">   
  533. </td>     
  534. <td>     
  535. <div DATAFLD="性别">     
  536. </td>     
  537. <td>     
  538. <div DATAFLD="籍贯">    
  539. </td>    
  540. </tr>    
  541. </table>   
  542. </div>   
  543.   
  544.   
  545. </center>   
  546. </body>   
  547. </html>  


xml文件如下(stu.xml)

Java代码 复制代码
  1. <?xml version="1.0" encoding="gb2312"?>   
  2. <学生管理>   
  3.  <学生>              
  4.  <学号>97001</学号>   
  5.  <姓名>王五</姓名>   
  6.  <性别>男   </性别>   
  7.  <籍贯>上海</籍贯>   
  8.  </学生>   
  9.  <学生>              
  10.  <学号>97002</学号>   
  11.  <姓名>李四 </姓名>   
  12.  <性别>男   </性别>   
  13.  <籍贯>浙江 </籍贯>   
  14.  </学生>   
  15.  <学生>               
  16.   <学号>97006    </学号>   
  17.   <姓名>张三 </姓名>   
  18.   <性别>男</性别>   
  19.   <籍贯>浙江</籍贯>   
  20.  </学生>   
  21. </学生管理>  
阅读更多
想对作者说点什么? 我来说一句

flex 操作xml 实现增删改查

2010年04月01日 12KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭