Ajax+JavaScript+DOM解析XML并动态创建table

Ajax+JavaScript+DOM解析XML并动态创建table

  <  % @ page  language  = "java"  import  = "java.util.*"  pageEncoding  = "utf-8"  %  >
<!  DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  >
  <  html  >

  <  head  >
  <  meta  http - equiv  = "Content-Type"  content  = "text/html; charset=utf-8"  /  >
 
  <  script  >
var ajaxObject;
function createAjax()
{
   if (window.ActiveXObject)
   {
      ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if(window.XMLHttpRequest)
   {
      ajaxObject = new XMLHttpRequest();
   }
}



function showText()
{
   createAjax();
   ajaxObject.onreadystatechange = backCall;
   ajaxObject.open("GET", "userInfo.xml", true);
   ajaxObject.send(null);
}

function backCall()
{
   if (ajaxObject.readyState == 4)
   {
      if (ajaxObject.status == 200)
      {
         var tableClear = document.getElementById("mytable").childNodes;
         for(var i = 0; i  <  tableClear .length; i ++ )
         {
            var temp  = tableClear[i];
             document.getElementById("mytable").removeChild(temp);
         }

         var xmlString  = ajaxObject.responseXML;
          var beanString  = xmlString.getElementsByTagName("bean")[0];
          var className  = beanString.getAttribute("class");
          document.getElementById("className").innerText  = document.getElementById("className").innerText  + className;
         var autowire  = beanString.getAttribute("autowire");
          document.getElementById("autowire").innerText  = document.getElementById("autowire").innerText  + autowire;

         var propertyString  = xmlString.getElementsByTagName("property")[0];
          var propertyName  = propertyString.getAttribute("name");
          document.getElementById("property").innerText  = document.getElementById("property").innerText  + propertyName;

         var propsString  = xmlString.getElementsByTagName("props")[0];
          var propString  = propsString.getElementsByTagName("prop");
          for(var i  = 0;  i < propString.length;
         i ++ )
         {
            var tempPropString  = propString[i];

             var newRow  = document.getElementById("mytable").insertRow();

             var mytd1  = newRow.insertCell();
             var mytd2  =  newRow.insertCell();

             mytd1.innerHTML  = tempPropString.getAttribute("key");

             mytd2.innerHTML  = tempPropString.childNodes[0].nodeValue;

          }


      }
   }


}


 < / script  >
  <  / head  >

  <  body  >
  <  div  id  = "className"   >
className :
  <  / div  >
  <  div  id  = "autowire"   >
autowire :
  <  / div  >
  <  div  id  = "property"   >
property :
  <  / div  >
  <  div  id  = "propertyName"   >
  <  / div  >

  <  div  id  = "mydiv"   >
  <  table  id  = "mytable"  width  = "90%"  border  = "1px"   >
  <  / table  >
  <  / div  >
  <  input  type  = "button"  onclick  = "showText()"  value  = "click me!"
name  = "button"  /  >
  <  / body  >

  <  / html  >

<? xml version="1.0" encoding="UTF-8" ?>
<! DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" " http://www.springframework.org/dtd/spring-beans.dtd" >
< beans >
     <!--  管理触发器  -->
     < bean
         class ="org.springframework.scheduling.quartz.SchedulerFactoryBean"
        autowire ="no" >
         < property  name ="quartzProperties" >
             < props >
                 < prop  key ="org.quartz.scheduler.instanceId" >
                    instance_1
                 </ prop >
                 < prop  key ="org.quartz.scheduler.rmi.export" > false </ prop >
                 < prop  key ="org.quartz.scheduler.rmi.proxy" > false </ prop >
                 < prop  key ="org.quartz.threadPool.class" >
                    org.quartz.simpl.SimpleThreadPool
                 </ prop >
                 < prop  key ="org.quartz.threadPool.threadCount" > 5 </ prop >
                 < prop  key ="org.quartz.jobStore.class" >
                    org.quartz.simpl.RAMJobStore
                 </ prop >
             </ props >
         </ property >
     </ bean >
</ beans >