ajax解析xml

 

java解析xml

案例：

  html:

  <!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=utf-8" />

<title>java解析xml</title>

<style type="text/css">

  #div{

        background-color:#CCC;

        width:300px;

        height:150px;

        }

</style>

<script type="text/javascript" src="../include/ajaxUtil.js"></script>

<script type="text/javascript">

 //定义两个行数

  function getXml(){

        //定义url

        var url="ajax-xml.xml";

        //定义参数 随便没用

        var params="a="+1;

        //调用ajax

        get(url,params,processXmlData);

        }

       

  function processXmlData(xhr){

        //接收返回的数据 注意是XML不是Text

        var reText=xhr.responseXML;

       

        //解析xml并且显示到表格里

        var emplist=reText.getElementsByTagName("emp");

        var table=document.createElement("table");

            table.setAttribute("border",1);

        //alert(emplist.length);

        //遍历解析每个emp标签

        for(var i=0;i<emplist.length;i++){

            

             var tr=document.createElement("tr");

             var childs=emplist[i].childNodes;

          

             for(var j=0;j<childs.length;j++){

                  

               if(childs[j].nodeType==1){

                      var td=document.createElement("td");

                            //alert(childs[j].firstChild.nodeValue);

                            alert(childs[j].nodeName);

                 var text=document.createTextNode(childs[j].firstChild.nodeValue);

          

                            td.appendChild(text);

                            tr.appendChild(td);

                            }

                   }

            table.appendChild(tr);

 

             }

             document.getElementById("div").appendChild(table);

        }       

  

 getXml();

</script>

</head>

 

<body>

 

 <div id="div"></div>

 

</body>

</html>

 

ajaxUtil.js:

 

function get(url1,params,methodName){

  /*

 ajax使用的基本步骤：

 

 1、初始化ajax引擎

 2、封装url（设定要请求的路径）

 3、打开ajax引擎（同步方式、异步的方式；本次传输使用get还是post）

 4、将要请求的信息通过引擎发送到服务器进行处理

 5、监听服务器返回给ajax引擎的处理状态

 6、判断是否交互完毕，如果交互完毕则取出返回的数

  */    

  //初始化ajax引擎

  var xhr = new XMLHttpRequest();//这种方式只针对ie浏览器，并且ie6以下还有问题。

  var url=url1+"?"+params+"&r="+Math.random();

 

  //alert(url);

  //打开引擎

  xhr.open("get",url,true);   //readyState=1

 

  //发送请求

  xhr.send(null);   //readyState=2

 

  //监听readyState值的改变，每次改变都会执行下面额函数 

  xhr.onreadystatechange=function (){

       

        //如果等于4，表明交互完毕 ，我们可以取出服务器返回的内容

        if(xhr.readyState==4){

           

      //动态调用方法，为什么说是动态呢？方法的名称是个变量methodName

                 methodName(xhr);

                

        }

       

  }

 

}

 

//$$（）方法用于方便取出 id="id" 的对象

function $$(id){

     

      return document.getElementById(id);

}

 

 

ajax-xml:

  <?xml version="1.0" encoding="utf-8"?>

<list>

  <rows>

 

    <emp>

         <empno>38</empno>

         <ename>凤姐</ename>

         <esex>不男不女</esex>

         <esalary>2000</esalary>

      </emp>

     

       <emp>

         <empno>438</empno>

         <ename>凤姐2</ename>

         <esex>人妖</esex>

         <esalary>-2000</esalary>

      </emp>

     

   </rows>

</list>