AJAX 简单应用（2）

最新推荐文章于 2024-11-07 12:49:52 发布

lvzk555

最新推荐文章于 2024-11-07 12:49:52 发布

阅读量378

点赞数

文章标签： ajax xmlhttprequest function 引擎 url 服务器

本文链接：https://blog.csdn.net/lvzk555/article/details/7319396

版权

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______________________________________

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>