AJAX基础教程－3 Dynamic Content

js 代码

1. <script type=< span="">"text/javascript">   
2. var xmlHttp;   
3. //创建xmlHttp对象   
4.     function createXMLHttpRequest() {   
5.         if (window.ActiveXObject) {   
6.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
7.         }   
8.         else if (window.XMLHttpRequest) {   
9.         xmlHttp = new XMLHttpRequest();   
10.         }   
11.     }   
12.     //读取指定xml文件的操作   
13.     function doSearch() {   
14.         createXMLHttpRequest();   
15.         xmlHttp.onreadystatechange = handleStateChange;   
16.         xmlHttp.open("GET", "dynamicContent.xml", true);   
17.         xmlHttp.send(null);   
18.     }   
19.        
20.     function handleStateChange() {   
21.         if(xmlHttp.readyState == 4) {   
22.             if(xmlHttp.status == 200) {   
23.             clearPreviousResults(); //清除以前的结果集   
24.             parseResults(); //解析结果集生成制定的html表单   
25.             }   
26.         }   
27.     }   
28.        
29.     //清除以前的结果集   
30.     function clearPreviousResults() {   
31.         var header = document.getElementById("header");   
32.         if(header.hasChildNodes()) {   
33.         header.removeChild(header.childNodes[0]);   
34.         }   
35.         var tableBody = document.getElementById("resultsBody");   
36.         while(tableBody.childNodes.length > 0) {   
37.         tableBody.removeChild(tableBody.childNodes[0]);   
38.         }   
39.     }   
40.        
41.     //解析结果集   
42.     function parseResults() {   
43.         var results = xmlHttp.responseXML;   
44.         var property = null;   
45.         var address = "";   
46.         var price = "";   
47.         var comments = "";   
48.         var properties = results.getElementsByTagName("property");   
49.         for(var i = 0; i < properties.length; i++) {   
50.         property = properties[i];   
51.         address = property.getElementsByTagName("address")[0].firstChild.nodeValue;   
52.         price = property.getElementsByTagName("price")[0].firstChild.nodeValue;   
53.         comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;   
54.         addTableRow(address, price, comments);   
55.         }   
56.         var header = document.createElement("h2");   
57.         var headerText = document.createTextNode("Results:");   
58.         header.appendChild(headerText);   
59.         document.getElementById("header").appendChild(header);   
60.         document.getElementById("resultsTable").setAttribute("border", "1");   
61.     }   
62.        
63.     //添加表行数据   
64.     function addTableRow(address, price, comments) {   
65.         var row = document.createElement("tr");   
66.         var cell = createCellWithText(address);   
67.         row.appendChild(cell);   
68.         cell = createCellWithText(price);   
69.         row.appendChild(cell);   
70.         cell = createCellWithText(comments);   
71.         row.appendChild(cell);   
72.         document.getElementById("resultsBody").appendChild(row);   
73.     }   
74.        
75.     function createCellWithText(text) {   
76.         var cell = document.createElement("td");   
77.         var textNode = document.createTextNode(text);   
78.         cell.appendChild(textNode);   
79.         return cell;   
80.     }   
81. </script>  

xml 代码

1. xml version="1.0" encoding="UTF-8"?>  
2. <properties>  
3. <property>  
4. <address>812 Gwyn Aveaddress>  
5. <price>$100,000price>  
6. <comments>Quiet, serene neighborhoodcomments>  
7. property>  
8. <property>  
9. <address>3308 James Ave Saddress>  
10. <price>$110,000price>  
11. <comments>Close to schools, shopping, entertainmentcomments>  
12. property>  
13. <property>  
14. <address>98320 County Rd 113address>  
15. <price>$115,000price>  
16. <comments>Small acreage outside of towncomments>  
17. property>  
18. properties>