AJAX 简单应用(2)

 

ajax解析xml的思路是

   1、服务端是xml或者输出xml格式的服务器文件
   2、客户端可以使用xhr.responseXML的方式获取整个xml根节点
   3、通过js dom 的document.getElementsByTagName()
      来解析想获取的元素节点
   4、通过获得元素节点及子节点的方式,得到更多的内容。

 

 

_________________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.html______________________________________

<style>
 #div{
  background-color:#CCC;
  width:300px;
  height:150px;
 
  }
</style>
<script language="javascript" src="../../include/ajaxUtil.js"></script>

<script>
//定义两个行数
 function getXml(){
    //定义url
 var url="ajax-xml.xml";
 //定义参数
 var params="a="+1; 
 //调用ajax
 get(url,params,processXmlData);
 }

function processXmlData(xhr){
    //接收返回的数据
    var reText=xhr.responseXML;

 //解析xml并且显示到表格里
 var emplist=reText.getElementsByTagName("emp");
 var table=document.createElement("table");
     table.setAttribute("border","1");
 //遍历解析每个emp标签
 for(var i=0;i<emplist.length;i++){
    var tr=document.createElement("tr");
  var childs=emplist[i].childNodes;
  //alert(i+"子节点个数:"+childs.length);
  for(var j=0;j<childs.length;j++){
    if(childs[j].nodeType==1){
    //创建列
    var td=document.createElement("td");
    //创建文本节点
    var text=document.createTextNode(childs[j].firstChild.nodeValue);
    //将文本追加到td中
    td.appendChild(text);
    //将td追加到行中
    tr.appendChild(td);
    }
   }
        //将tr追加到表格中
     table.appendChild(tr);    
 }
 //将table追加到div中
 $$("div").appendChild(table);
}
getXml();
</script>
</head>

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


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值