4、将使用W3C DOM动态生成页面——ajax基础笔记

junJZ_2008 · 发表于 2013-1-23 02:26:37

使用W3C DOM动态生成页面

dynamicContent.xml清单：
<?xml version="1.0" encoding="UTF-8"?><properties> <property> <address>812 Gwyn Ave</address> <price>$100,000</price> <comments>Quiet, serene neighborhood</comments> </property> <property> <address>3308 James Ave S</address> <price>$110,000</price> <comments>Close to schools, shopping, entertainment</comments> </property> <property> <address>98320 County Rd 113</address> <price>$115,000</price> <comments>Small acreage outside of town</comments> </property> </properties>dynamicContent.html清单：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Dynamically Editing Page Content</title><script type="text/javascript">var xmlHttp;function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); }} function doSearch() { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "dynamicContent.xml", true); xmlHttp.send(null);} function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { clearPreviousResults(); parseResults(); } }}//清除以前查询的结果function clearPreviousResults() { var header = document.getElementById("header"); if(header.hasChildNodes()) { header.removeChild(header.childNodes[0]); } var tableBody = document.getElementById("resultsBody"); while(tableBody.childNodes.length > 0) { tableBody.removeChild(tableBody.childNodes[0]); }}//解析服务器返回的结果function parseResults() { var results = xmlHttp.responseXML; var property = null; var address = ""; var price = ""; var comments = ""; var properties = results.getElementsByTagName("property"); for(var i = 0; i < properties.length; i++) { property = properties; address = property.getElementsByTagName("address")[0].firstChild.nodeValue; price = property.getElementsByTagName("price")[0].firstChild.nodeValue; comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue; //创建表格行 addTableRow(address, price, comments); } var header = document.createElement("h2"); var headerText = document.createTextNode("Results:"); header.appendChild(headerText); document.getElementById("header").appendChild(header); document.getElementById("resultsTable").setAttribute("border", "1");}//创建表格行function addTableRow(address, price, comments) { var row = document.createElement("tr"); var cell = createCellWithText(address); row.appendChild(cell); cell = createCellWithText(price); row.appendChild(cell); cell = createCellWithText(comments); row.appendChild(cell); //把创建好的行添加到表格里 document.getElementById("resultsBody").appendChild(row);}//创建单元格function createCellWithText(text) { var cell = document.createElement("td"); var textNode = document.createTextNode(text); cell.appendChild(textNode); return cell;}</script></head><body> <h1>Search Real Estate Listings</h1> <form action="#"> Show listings from <select> <option value="50000">$50,000</option> <option value="100000">$100,000</option> <option value="150000">$150,000</option> </select> to <select> <option value="100000">$100,000</option> <option value="150000">$150,000</option> <option value="200000">$200,000</option> </select> <input type="button" value="Search" /> </form> <span id="header"> </span> <table id="resultsTable" width="75%" border="0"> <tbody id="resultsBody"> </tbody> </table></body></html>运行结果：

		自动登录	找回密码
密码			立即注册