Ajax读取XML数据

• 最早的Ajax推出的时候实际上只给出了两类数据

  • 文本数据:最初只是虚妄简单的返回一些处理标记(后来功能得到了扩充)
  • XML数据:是为了携带更多的数据返回,

• 假设有如下的XML数据

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<shop>
	<book id="1">
		<name>美好的未来</name>
		<year>2</year>
		<price>56100</price>
	</book>
	<book id="2">
		<name>新的世界,新的你</name>
		<year>3</year>
		<price>56.6</price>
	</book>
	<book id="3">
		<name>java入门到跑路</name>
		<year>111</year>
		<price>100</price>
	</book>
</shop>

• 希望可以将这些XML数据交个前台页面进行输出,xml本身结构只适合数据传输使用,不适合数据显示使用,所以为了可以让其进行数据的显示,需要对接收到的xml数据执行DOM处理.
• 编写XML读取操作

<script type="text/javascript">
    //保存XMLHttpRequest对象的变量
    var xmlHttpRequest;
    window.onload=function(){

        //为提交按钮绑定函数
        document.getElementById("read").addEventListener("click",function(){
            //得到用户输入的提交内容
            read();
        },false)
    }

    //创建XMLHttpRequest对象的方法
    function createXMLHttpRequest(){

        if(window.XMLHttpRequest){
            xmlHttpRequest = new XMLHttpRequest();
         //判断是否为IE6的浏览器
        }else if(ActiveXObject){
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHttp");
        }
    }
    //提交请求方法
    function read(){
        createXMLHttpRequest();
        //使用XMLHttpRequest对象设置请求类型
        //设置请求参数接收位置
        xmlHttpRequest.open("post","book.xml");
        //发送请求
        xmlHttpRequest.send(null);
        //针对服务器请求,做出回应处理
        xmlHttpRequest.onreadystatechange = function(){
           if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
               //取得XML文件的DOM对象
               var domVar = xmlHttpRequest.responseXML;
               var books = domVar.getElementsByTagName("book");
               for(var x = 0; x < books.length;x++){
                    var id = books[x].getAttribute("id");
                    var name = books[x].getElementsByTagName("name")[0].firstChild.nodeValue;
                    var year = books[x].getElementsByTagName("year")[0].firstChild.nodeValue;
                    var price = books[x].getElementsByTagName("price")[0].firstChild.nodeValue;
                    //在表格中添加一行数据
                    addRow(id,name,year,price);
               }

           }
        }
    }
    function addRow(id,name,year,price){
        //得到表格的元素
        var tableEle = document.getElementById("readTable");
        //创建一行新的数据行
        var newtr = document.createElement("tr");
        //创建三个td元素
        var idtd = document.createElement("td");
        idtd.appendChild(document.createTextNode(id));

        var nametd = document.createElement("td");
        nametd.appendChild(document.createTextNode(name));

        var yeartd = document.createElement("td");
        yeartd.appendChild(document.createTextNode(year));

        var pricetd = document.createElement("td");
        pricetd.appendChild(document.createTextNode(price));

        newtr.appendChild(idtd);
        newtr.appendChild(nametd);
        newtr.appendChild(yeartd);
        newtr.appendChild(pricetd);

        tableEle.append(newtr);
    }
</script>

• 页面效果

• 如果要读取的是XML数据,则可以使用responseText()和responseXML()两种方法.

  • responseText()方法返回的是文本数据
  • responseXML()方法返回的是节点数据

• 通过以上的代码可以发现,使用Ajax获取得到"book.xml"文件中的数据之后,再将数据交个read()函数处理,动态生成页面.

• 如果Ajax从服务器端读取xml文件的数据后,动态生成页面的任务,就不需要服务器端的程序完成,而是交由客户端完成,这样可以大大提高代码整体的效率,做到客户端和服务器端的代码分离.