AJAX学习笔记（二）
1. 处理服务器响应
W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分，这就使得 JavaScript可以访问元素的属性和方法。
用于处理XML文档的DOM元素属性
属性名 描述 childNodes 返回当前元素所有子元素的数组 firstChild 返回当前元素的第一个下级子元素 lastChild 返回当前元素的最后一个子元素 nextSibling 返回紧跟在当前元素后面的元素 nodeValue 指定表示元素值的读/写属性 parentNode 返回元素的父节点 previousSibling 返回紧邻当前元素之前的元素 用于遍历XML文档的DOM元素方法 方法名 描述 getElementById(id)(document) 获取有指定惟一ID属性值文档中的元素 getElementsByTagName(name) 返回当前元素中有指定标记名的子元素的数组 hasChildNodes() 返回一个布尔值，指示元素是否有子元素 getAttribute(name) 返回元素的属性值，属性由name指定
2. 使用符合W3C DOM API标准的JavaScript读取XML
实例：parseXML.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>Parsing XML Responses with the W3C DOM</title> <mce:script type="text/javascript"><!-- var xmlHttp; var requestType = ""; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function startRequest(requestedList) { requestType = requestedList; createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "parseXML.xml", true); xmlHttp.send(null); } function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { if(requestType == "north") { listNorthStates(); } else if(requestType == "all") { listAllStates(); } } } } function listNorthStates() { var xmlDoc = xmlHttp.responseXML; var northNode = xmlDoc.getElementsByTagName("north")[0]; var out = "Northern States"; var northStates = northNode.getElementsByTagName("state"); outputList("Northern States", northStates); } function listAllStates() { var xmlDoc = xmlHttp.responseXML; var allStates = xmlDoc.getElementsByTagName("state"); outputList("All States in Document", allStates); } function outputList(title, states) { var out = title; var currentState = null; for(var i = 0; i < states.length; i++) { currentState = states[i]; out = out + "/n " + currentState.childNodes[0].nodeValue; } alert(out); } // --></mce:script> </head> <body> <h1> Process XML Document of U.S. States </h1> <br /> <br /> <form action="#"> <input type="button" value="View All Listed States" onclick="startRequest('all');" /> <br /> <br /> <input type="button" value="View All Listed Northern States" onclick="startRequest('north');" /> </form> </body> </html>
parseXML.xml
<?xml version="1.0" encoding="UTF-8"?> <states> <north> <state>Minnesota</state> <state>Iowa</state> <state>North Dakota</state> </north> <south> <state>Texas</state> <state>Oklahoma</state> <state>Louisiana</state> </south> <east> <state>New York</state> <state>North Carolina</state> <state>Massachusetts</state> </east> <west> <state>California</state> <state>Oregon</state> <state>Nevada</state> </west> </states>
3. 使用W3C DOM动态编辑页面
动态创建内容时所用的W3C DOM方法 属性/方法 描述 document.createElement(tagName) 文档对象上的createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数，就 会生成一个div元素 document.createTextNode(text) 文档对象的createTextNode方法会创建一个包含静态文本的节点 <element>.appendChild(childNode) appendChild方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。例如，可以增加一 个option元素，作为select元素的子节点 <element>.getAttribute(name) <element>.setAttribute(name,value) 这些方法分别获得和设置元素中name属性的值 <element>.insertBefore(newNode,targetNode) 这个方法将节点newNode作为当前元素的子节点插到targetNode元素前面 <element>.removeAttribute(name) 这个方法从元素中删除属性name <element>.removeChild(childNode) 这个方法从元素中删除子元素childNode <element>.replaceChild(newNode,oldNode) 这个方法将节点oldNode替换为节点newNode <element>.hasChildnodes() 这个方法返回一个布尔值，指示元素是否有子元素
实例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> <mce:script type="text/javascript"><!-- //创建XMLHttpRequest对象 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[i]; 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; } // --></mce: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" onclick="doSearch();"/> </form> <span id="header"> </span> <table id="resultsTable" width="75%" border="0"> <tbody id="resultsBody"> </tbody> </table> </body> </html>
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> <property> <address>9820 County Rd 113</address> <price>$155,000</price> <comments>Small acreage outside of town</comments> </property> </properties>
这一部分相对来说比较难，但是尽快掌握。。。持续更新.....