`
wangtong40
  • 浏览: 248696 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

AJAX基础教程－3 Dynamic Content

AjaxXMLJavaScriptMicrosoftHTML 
阅读更多
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>  
分享到：
| AJAX基础教程－2 ParseXML
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics