HTML/Ajax/XML資料互動：HTML通過Ajax讀取XML的儲存資訊
阿新 • • 發佈：2019-01-22
介紹：
上一篇Ajax文章中對Ajax的XHR物件作出了介紹，這篇部落格介紹下如果使用Ajax從服務端獲取資料。之前分析
過，Ajax是向服務端請求服務的，說白了就是想資料庫中進行資訊驗證或取存。本篇部落格沒有使用資料庫而是採用了
XML儲存資料，這樣大家看的也清楚。能明白來龍去脈。
分析實現過程：
需要的檔案：HTML頁面、【.js】檔案、【.XML】檔案。
實現的思路：
首先在HTML設定好提交事件，並且設定一個div（或其它）容器，準備接受資料；
其次是在js檔案中寫好使用Ajax的五個步驟，（將open方法的URL地址改成專案中Xml檔案所在的地址）。
最後使用Xml語言寫入一些儲存的資料，方便查詢。
程式碼：
HTML：
<span style="font-family:SimSun;font-size:18px;"><html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="ReadXmk.js"></script> <title>Ajax/XML</title> </head> <body> <form id="form1" runat="server"> <div id="CDShow"> <button onclick="loadXMLDoc('XMLFile1.xml')">獲取詳細資訊</button> </div> </form> </body> </html> </span>
JavaScript（Ajax）：
<span style="font-family:SimSun;font-size:18px;">function loadXMLDoc(url) { //alert(url); var xmlhttp; var txt, x, xx, i; //建立Ajax物件。解決不同瀏覽器相容問題 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //alert(1); //響應服務 xmlhttp.onreadystatechange = function () { //4表示請求處理中；200表示處理OK； if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //拼接table 表格 //建立table，表頭為title 和artist和county txt = "<table border='1'><tr><th>Title</th><th>Artist</th><th>County</th></tr>"; //從xml中獲取CD標籤裡的內容 x = xmlhttp.responseXML.documentElement.getElementsByTagName("CD"); for (i = 0; i < x.length; i++) { //新增新的一行，標籤內容為Title txt = txt + "<tr>"; xx = x[i].getElementsByTagName("TITLE"); { try { txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; } catch (er) { txt = txt + "<td> </td>"; } } xx = x[i].getElementsByTagName("COUNTRY"); { try { txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; } catch (er) { txt = txt + "<td> </td>"; } } xx = x[i].getElementsByTagName("ARTIST"); { try { txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; } catch (er) { txt = txt + "<td> </td>"; } } txt = txt + "</tr>"; } //完成table表格拼接 txt = txt + "</table>"; //將table插入 document.getElementById('CDShow').innerHTML = txt; } } //xmlhttprequest 的方法 open 和send xmlhttp.open("GET", url, true); xmlhttp.send(); alert("載入完成！"); }</span>
XML：
<span style="font-family:SimSun;font-size:18px;"><CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>...</CD>
<CD>...</CD>
...
<CATALOG/></span>效果：
觸發單擊事件後：
學習資料：JavaScript入門經典
W3C教程
總結：
Ajax中的onReadyStateChange被回撥函式賦值，這是實現非同步呼叫的關鍵點，另外回撥函式直接操作DOM，
所以才能實現區域性的重新整理，而不是整個頁面的重新整理。
學習還很單純，有說的不對的，請指出，謝謝！！！