谈 Html 调用 XML 体会

昨天因工作需要考虑静态htm查询数据，因工作很急，改用描点技术定位到指定资源，早上到公司就着手考虑是否可以通过xml方式实现，查得资料：

< html >
< head >
     < title > 中文标识的xml数据调用 </ title >
</ head >
< body >
     < xml  id ="CNxml"  src ="xml3.xml" ></ xml >
   
   请输入要查询名字:
< input  type ="text"  id ="m"  width ="3"  size ="5" >< input  type ="button"  value ="查找"  onclick ="query()" >
< br >< br >

< input  type ="text"  id ="title" >< br >
< textarea  cols ="30"  rows ="10"  id ="content" ></ textarea >

   
    
     < h2 >
        表格调用xml数据并分页现显示 </ h2 >
     < table >
         <!--  列名单独作为一个表是为了不让它重复出现  -->
         < tr >
             < td  width ="50" >
                姓名 </ td >
             < td  width ="50" >
                性别 </ td >
             < td  width ="50" >
                年龄 </ td >
         </ tr >
     </ table >
     < table  id ="ygTable"  datasrc ="#CNxml"  datapagesize ="3" >
         <!--  "DATAPAGESIZE"是设定每页显示的记录数  -->
         <!--  本table的标志，是用来控制页的滚动的行为对象  -->
         < tr >
             < td  width ="50" >
                 < span  datafld ="姓名" ></ span >
             </ td >
             < td  width ="50" >
                 < span  datafld ="性别" ></ span >
             </ td >
             < td  width ="50" >
                 < span  datafld ="年龄" ></ span >
             </ td >
         </ tr >
     </ table >
   
    
     < br >
     <!-- 该javascrip脚本函数实现页跳转功能 -->

     < script  language ="javascript" >   
function go(pageNum)    
{
ygTable.firstPage();          
for(var i=1; i<pageNum; i++)     //不知道定位函数所以用循环来寻找应当到的页数
ygTable.nextPage();
}

function query()
{
      //得到文章的标题
     // s=document.all.Text.XMLDocument;
      temp=CNxml.selectSingleNode("/员工表/员工[姓名='"+m.value+"']/性别");
      if(temp==null)    title.value='没有这个标题';
      else title.value=temp.text;
      //得到文章的内容
      temp=CNxml.selectSingleNode("/员工表/员工[姓名='"+m.value+"']/年龄");
      if(temp==null)    content.value='没有内容';
      else content.value=temp.text;
      
      ygTable.dataSrc="CNxml";
}


function CreateXML(){ 

      var xmldoc, xmlnode; 

     xmldoc = new ActiveXObject("Msxml2.DOMDocument.4.0"); 

     xmldoc.load("C://XML.xml"); 

     schar = '/r'; 

     xmlhead = '<?xml version="1.0" encoding="UTF-16" ?>'+schar; 

     xmltitle = '<documenttitle="information">'+schar; 

     xmlnode = ''; 

     for(var i=0;i<10;i++){ 

         xmlnode = xmlnode + '<xmlnode type="node" name="node'+i+'" />'+schar; 

     } 

     xmlfoot = '</document>'; 

     strXML = xmlhead+xmltitle+xmlnode+xmlfoot; 

     xmldoc.loadXML(strXML); 

     xmldoc.save("C://XML.xml"); 

} 

</ script >  
}
     </ script >

     < a  href ="javascript:go(1)" > 1 </ a >   < a  href ="javascript:go(2)" > 2 </ a >   < a  href ="javascript:go(3)" >
        3 </ a >
     < br >
     <!--  onclick行为中，是以本table为主体对象调用的函数，可见这种方法实现份也是多么的简单  -->
     < input  type ="button"  value ="第一页"  name ="B1"  onclick ="ygTable.firstPage()" >
     < input  type ="button"  value ="上一页"  name ="B2"  onclick ="ygTable.previousPage()" >
     < input  type ="button"  value ="下一页"  name ="B3"  onclick ="ygTable.nextPage()" >
     < input  type ="button"  value ="最后一页"  name ="B4"  onclick ="ygTable.lastPage()" >
     <!--  页跳转功能，同样用到了上面javascript定义的脚本程序函数  -->
     < input  type ="text"  name ="pageto"  value ="1"  size ="5" >
     < input  type ="button"  value ="跳转"  onclick ="go(pageto.value)" >
</ body >
</ html >

xml3：

<? xml version="1.0" encoding="gb2312"  ?>
< 员工表 >
   < 员工 >
     < 姓名 > 张易 </ 姓名 >
     < 性别 > 男 </ 性别 >
     < 年龄 > 23 </ 年龄 >
   </ 员工 >
   < 员工 >
     < 姓名 > 张晴 </ 姓名 >
     < 性别 > 女 </ 性别 >
     < 年龄 > 23 </ 年龄 >
   </ 员工 >
   < 员工 >
     < 姓名 > 笑哈哈 </ 姓名 >
     < 性别 > 女 </ 性别 >
     < 年龄 > 23 </ 年龄 >
   </ 员工 >
   < 员工 >
     < 姓名 > 张晴 </ 姓名 >
     < 性别 > 男 </ 性别 >
     < 年龄 > 23 </ 年龄 >
   </ 员工 >
   < 员工 >
     < 姓名 > 555 </ 姓名 >
     < 性别 > 女 </ 性别 >
     < 年龄 > 23 </ 年龄 >
   </ 员工 >
   < 员工 >
     < 姓名 > 666 </ 姓名 >
     < 性别 > 女 </ 性别 >
     < 年龄 > 23 </ 年龄 >
   </ 员工 >
   < 员工 >
     < 姓名 > 999 </ 姓名 >
     < 性别 > 男 </ 性别 >
     < 年龄 > 23 </ 年龄 >
   </ 员工 >
   < 员工 >
     < 姓名 > 777 </ 姓名 >
     < 性别 > 女 </ 性别 >
     < 年龄 > 23 </ 年龄 >
   </ 员工 >
   < 员工 >
     < 姓名 > 888 </ 姓名 >
     < 性别 > 女 </ 性别 >
     < 年龄 > 23 </ 年龄 >
   </ 员工 >
</ 员工表 >

功能很不错，但是查询后需要重新绑定数据，这点还没实现，不过获得自己认为新的东西，与大家分享，还是不错！