- 浏览: 51557 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
hw361062491:
mac 系统在那里配置呢???
Vibrant Ink Theme for IntelliJ IDEA -
godspeed666:
请教个问题,我第一次使用idea写s2sh,遇到个问题,str ...
IntelliJ IDEA 目录技巧 -
gongmingwind:
最后没有结束啊
LDAP学习者必看 -
spiritfrog:
没有图吗?
Vibrant Ink Theme for IntelliJ IDEA -
matrixbug:
SB!BS!
openldap界面管理工具—JXplorer
responseXML 将响应解析为XML
Ø 浏览器把XML 看作是遵循W3C DOM 的XML文档。
Ø W3C DOM 指定了一组很丰富的API ,可用于搜索和处理XML 文挡。
W3C DOM
Ø W3C 提供的定义:
文档对象模型(DOM) 是与平台和语言无关的接口,允许程序和脚本动态地访问和更新文档的内容、结构和样式。文档可以进一步处理,处理的结果可以放回到所提供的页面中。
W3C DOM 和JavaScript区别?
Ø DOM 是面向HTML 和XML 文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。
Ø JavaScript 则是用于访问和处理DOM 的语言。
Ø 如果没有DOM , JavaScript 根本没有Web 页面和构成页面元素的概念。文档中的每个元素都是DOM 的一部分,这就使得JavaScript 可以访问元素的属性和方法。
DOM元素属性
Ø 用于处理XML 文挡的DOM 元素属性:
属性名 |
描述 |
childNodes |
返回当前元素的所有子元素的数组 |
firstChild |
返回当前元素的第一个下级子元素 |
lastChild |
返回当前元素的最后一个子元素 |
nextSibling |
返回紧跟在当前元素后面的元素 |
nodeValue |
指定表示元素值得读/写属性 |
parentNode |
返回元素的父节点 |
previousSibling |
返回紧邻当前元素之前的元素 |
DOM元素方法
Ø 用于遍历XML文挡的DOM 元素方法
方法名 |
描述 |
getElementById(id) (document) |
获取有指定唯一ID属性值文档中的元素 |
getElementsByTagName(name) |
返回当前元素中有指定标记名的子元素的数组 |
hasChildNodes() |
返回一个布尔值,指示元素之否有子元素 |
getAttribute(name) |
返回元素的属性值,属性由name指定 |
DEMO responseXML + DOM
Ø DEMO
服务器返回的美国州名列表 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> |
Ø parseXML.html内容
<html> <head> <title>Parsing XML Responses with the W3C DOM</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <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 listAllStates() { var xmlDoc = xmlHttp.responseXML; var allStates = xmlDoc.getElementsByTagName("state"); outputList("All States in Document", allStates); } 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); } </script> </head> <body onload="startRequest();"> </body> </html> |
使用W3C DOM 动态编辑页面
Ø 使用W3C DOM 动态编辑页面
Ø 动态创建内容时所用的W3C DOM 属性和方法
属性、方法名 |
描述 |
document.createElement(tagName) |
文档对象上的createElement 方法可以创建由tagName指定的元素。如果以串div作为方法参数,就会动态生成一个div元素 |
document.createTextNode(data) |
文档对象的createTextNode方法会创建一个包含静态文本的节点 |
<Element>.appendChild(newChild) |
appendChild方法将指定的节点增加到当前元素的子节点列表(作为一个新的子节点。)例如,可以增加一个option元素,作为select元素的子节点 |
<Element>. getAttribute(name) |
这个方法获得元素中name属性的值 |
<Element>. setAttribute(name,value) |
这个方法设置元素中name属性的值 |
<Element>.insertBefore(newChild, refChild) |
这个方法将节点newChild作为当前元素的子节点插入refChild元素前面 |
<Element>.removeAttribute(name) |
这个方法从元素中删除属性name |
<Element>.removeChild(oldChild) |
这个方法从元素中删除子元素oldChild |
<Element>.replaceChild(newChild, refChild) |
这个方法将节点refChild替换为节点newChild |
<Element>.hasChildNodes() |
这个方法返回一个布尔值,指示元素是否有子元素 |
DEMO 使用responseXML+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 HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Dynamically Editing Page Content</title> <script type="text/javascript" language="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 > 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; } </script> </head> <body> <form action="#" > <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> |
Ø 运行界面,点击“search”按钮,如下图:
Ø 总结:
1、 在parseResults 函数中使用XMLHttpRequest对象的responseXML 属性得到的XML 文挡。
2、 利用DOM方法来解析XML文档。
3、 addTableRow 函数建立一个表。
4、 就这么多!你已经成功地读取了服务器返回的XML 文档,而且动态创建了一个结果表。
作者:周大庆(zhoudaqing)
网址:http://www.blogjava.net/yifeng
>>>转载请注明出处!<<<
发表评论
-
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2008-08-26 01:43 757jQuery中文入门指南,翻译加实例,jQuery的起点教程 ... -
AJAX基础与实践(一)
2008-08-26 02:29 727AJAX历史 Ø 2005年2月, Adaptive ... -
AJAX基础与实践(二)
2008-08-26 02:31 1013XMLHttpRequest(XHR) Ø 浏览器可以 ... -
AJAX基础与实践(三)
2008-08-26 02:39 709创建XHR发送请求 Ø 如下: ... -
AJAX基础与实践(五)
2008-08-26 02:47 740发送请求参数 Ø 目前我们已经讲了 1、 使用Ajax ... -
AJAX基础与实践(六)
2008-08-26 02:57 796AJAX以 JSON 发送请求数据 Ø 使用XML 向 ...
相关推荐
ajax基础与实践教程,含php json实例
AJAX基础与实践,简单实现一个在线聊天室
本教程利用json构建Ajax应用,ppt格式。
涵盖Web应用的发展,Ajax基础,Web通讯,XMLHttpRequest对象详解,同时详细讲解和推荐了Ajax开发工具箱,例如JSDoc,Firefox拓展,DOMInspector,JSLint等等,以及JsUnit测试等。同时为了提升前端技术,第八章详细...
《Ajax模式与最佳实践》探索了将Ajax和REST组合为单一解决方案的动态Web应用。REST的一个主要的优点是,像Ajax一样,它能够与当今现存的技术配合使用。已经有数以百万计的客户端为支持Ajax应用做好了准备,同时,也...
Ajax不是一种技术,而是多种技术的组合: 使用XHTML和CSS来呈现数据 使用DOM实现动态显示和交互 使用XML和XSLT实现数据交换与操作 使用XMLHttpRequest实现异步数据的发送与接收 使用JavaScript将XHTML、DOM 、XML和...
本书共分为15章,从初识ASP.NET AJAX开始,首先介绍了ASP.NET AJAX基础知识和结构,然后介绍了ASP.NET AJAX Control Toolkit中的全部控件,如AutoComplete、PasswordStrength、CollapsiblePanel、Tabs、...
ajax相关的技术,基础的应用,详细的代码
本书主要内容包括JSP基础实例、JSP数据库实例、JavaBean技术、Servlet技术、Ajax基本技术、Ajax高级技术、Ajax数据库操作、Ajax时尚技术、Ajax常用框架和实现OA系统。本书实例来源于作者多年工作实践,基本囊括了...
本书主要内容包括JSP基础实例、JSP数据库实例、JavaBean技术、Servlet技术、Ajax基本技术、Ajax高级技术、Ajax数据库操作、Ajax时尚技术、Ajax常用框架和实现OA系统。本书实例来源于作者多年工作实践,基本囊括了...
ajax入门教程,包含pptajax基础与实践教程
Ajax入门与提高(ppt)·····从基础的学习到实践!全面认识ajax
本书共分为15章,从初识ASP.NET AJAX开始,首先介绍了ASP.NET AJAX基础知识和结构,然后介绍了ASP.NET AJAX Control Toolkit中的全部控件,如AutoComplete、PasswordStrength、CollapsiblePanel、Tabs、...
本书共分为15章,从初识ASP.NET AJAX开始,首先介绍了ASP.NET AJAX基础知识和结构,然后介绍了ASP.NET AJAX Control Toolkit中的全部控件,如AutoComplete、PasswordStrength、CollapsiblePanel、Tabs、...
本书共分为15章,从初识ASP.NET AJAX开始,首先介绍了ASP.NET AJAX基础知识和结构,然后介绍了ASP.NET AJAX Control Toolkit中的全部控件,如AutoComplete、PasswordStrength、CollapsiblePanel、Tabs、...
“本书很好地兼顾了理论和实践,Web程序员均将从中获益匪浅。” ——Jason Salas,微软MVP Ajax结合了THTML、CSS和JavaScript等技术。使Web开发人员能够创建更复杂、响应更及时的用户 界面。为用户带来更加丰富的...
本书共分为15章,从初识ASP.NET AJAX开始,首先介绍了ASP.NET AJAX基础知识和结构,然后介绍了ASP.NET AJAX Control Toolkit中的全部控件,如AutoComplete、PasswordStrength、CollapsiblePanel、Tabs、...
本书共分为15章,从初识ASP.NET AJAX开始,首先介绍了ASP.NET AJAX基础知识和结构,然后介绍了ASP.NET AJAX Control Toolkit中的全部控件,如AutoComplete、PasswordStrength、CollapsiblePanel、Tabs、...
本书共分为15章,从初识ASP.NET AJAX开始,首先介绍了ASP.NET AJAX基础知识和结构,然后介绍了ASP.NET AJAX Control Toolkit中的全部控件,如AutoComplete、PasswordStrength、CollapsiblePanel、Tabs、...
要精通java必看的经典书籍:Ajax中文手册(快速上手),hibernat培训,JavaScript源码大全 v1.0,Struts快速学习指南,全新java基础实践教程,Spring+in+Action中文版