• 最早的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檔案的資料後,動態生成頁面的任務,就不需要伺服器端的程式完成,而是交由客戶端完成,這樣可以大大提高程式碼整體的效率,做到客戶端和伺服器端的程式碼分離.