无标题文�?lt;/title> <script language="javascript"> var elementName = ""; //全局变量�Q�保存Element标记名，使用完毕要清�I? function countTotalElement(node) { //参数node是一个Node对象 var total = 0; if(node.nodeType == 1) { //��查node是否为Element对象 total++; //如果是，计数器加1 elementName = elementName + node.tagName + "\r\n"; //保存标记�? } var childrens = node.childNodes; //获取node的全部子节点 for(var i=0;i<childrens.length;i++) { total += countTotalElement(childrens[i]); //在每个子节点上进行递归操作 } return total; } </script> </head> <body> <a href="javascript:void(0)" onClick="alert('标记��L��Q? + countTotalElement(document) + '\r\n<br /><br />全部标记如下�Q�\r\n' + elementName);elementName='';">开始统�?lt;/a> </body> </html></pre><p align="center"></p><p>　　<strong>例子2 �?sample3_2.htm�Q?br /></strong>　　接下来��用firstChile、lastChild、nextSibling、previousSibling遍历整个文档树。修改一下countTotalElement函数�Q�其他跟sample3_1.htm一��P��</p><pre class="precode">function countTotalElement(node) { //参数node是一个Node对象 var total = 0; if(node.nodeType == 1) { //��查node是否为Element对象 total++; //如果是，计数器加1 elementName = elementName + node.tagName + "\r\n"; //保存标记�? } var childrens = node.childNodes; //获取node的全部子节点 for(var m=node.firstChild; m!=null;m=m.nextSibling) { total += countTotalElement(m); //在每个子节点上进行递归操作 } return total; } </pre><p>　　<strong>B、搜索文档中特定的元�?br /></strong>　　在��用DOM的过�E�中�Q�有时候需要定位到文档中的某个特定节点�Q�或者具有特定类型的节点列表。这�U�情况下�Q�可以调用Document对象的getElementsByTagName()和getElementById()�Ҏ��来实现�?/p><p>　　document.getElementsByTagName()�q�回文档中具有指定标记名的全部Element节点数组�Q�也是NodeList�c�d��Q�。Element出现在数�l�中的顺序就是他们在文档中出现的��序。传递给getElementsByTagName()的参数忽略大��写。比如，惛_��位到�W�一�?lt;table>标记�Q�可以这样写�Q�document.getElementsByTagName(“table�?[0]。例外的�Q�可以��用document.body定位�?lt;body>标记�Q�因为它是唯一的�?/p><p>　　getElementsByTagName()�q�回的数�l�取决于文档。一旦文档改变，�q�回�l�果也立��x��变。相比，getElementById()则比较灵�z�，可以随时定位到目标，只是要实现给目标元素一个唯一的id属性倹{��这个我们在《AJAX开发简略》的“��联菜单”例子中已经使用�q�了�?/p><p>　　Element对象也支持getElementsByTagName()和getElementById()。不同的是，搜烦领域只针对调用者的子节炏V�?/p><p>　　<strong>C、修�Ҏ��档内�?br /></strong>　　遍历整棵文档树、搜索特定的节点�Q�我们最�l�目的之一是要修改文档内容。接下来的三个例子将使用Node的几个常用方法，来演�C�如何修�Ҏ��档内宏V�?/p><p>　　<strong>例子3 -- sample4_1.htm�Q?br /></strong>　　�q�个例子包含三个文本节点和一个按钮。点��L��钮后�Q�三个文本节点和按钮的顺序将被颠倒。程序��用了Node的appendChild()和removeChild()�Ҏ��?/p><pre class="precode"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文�?lt;/title> <script language="javascript"> function reverseNode(node) { // 颠倒节点node的顺�? var kids = node.childNodes; //获取子节点列�? var kidsNum = kids.length; //�l�计子节�Ҏ��L�� for(var i=kidsNum-1;i>=0;i--) { //逆向遍历子节点列�? var c = node.removeChild(kids[i]); //删除指定子节点，保存在c�? node.appendChild(c); //��c攑֜��C��|�上 } } </script> </head> <body> <p>�W�一�?lt;/p> <p>�W�二�?lt;/p> <p>�W�三�?lt;/p> <p><input type="button" name="reverseGo" value="颠�? onClick="reverseNode(document.body)"></p> </body> </html> </pre><p align="center"></p><p>　　<strong>例子4-- sample4_2.htm�Q?br /></strong>　　例子1通过直接操作body的子节点来修�Ҏ��档。在HTML文档中，布局和定位常帔R��过表格<table>来实现。因此，例子4��演�C�操作表格内容，��表格的四个单元行顺序颠倒。如果没有��?lt;tbody>标签�Q�则<table>把全部的<tr>当做是属于一个子节点<tbody>�Q�所以我们采用数�l�缓存的方式�Q�把行数据颠倒一下。这个例子同时也演示了如何��用DOM创徏表格单元行�?/p><pre class="precode"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文�?lt;/title> <script language="javascript"> function reverseTable() { var node = document.getElementsByTagName("table")[0]; //�W�一个表�? var child = node.getElementsByTagName("tr"); //取得表格内的所有行 var newChild = new Array(); //定义�~�存数组�Q�保存行内容 for(var i=0;i<child.length;i++) { newChild[i] = child[i].firstChild.innerHTML; } node.removeChild(node.childNodes[0]); //删除全部单元�? var header = node.createTHead(); //新徏表格行头 for(var i=0;i<newChild.length;i++) { var headerrow = header.insertRow(i); //插入一个单元行 var cell = headerrow.insertCell(0); //在单元行中插入一个单元格 //在单元格中创建TextNode节点 cell.appendChild(document.createTextNode(newChild[newChild.length-i-1])); } } </script> </head> <body> <table width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">�W�一�?lt;/td> </tr> <tr> <td height="25">�W�二�?lt;/td> </tr> <tr> <td height="25">�W�三�?lt;/td> </tr> <tr> <td height="25">�W�四�?lt;/td> </tr> </table> <br> <input type="button" name="reverse" value="开始颠�? onClick="reverseTable()"> </body> </html> </pre><p align="center"></p><p>　　<strong>例子5 -- sample4_3.htm�Q?br /></strong>　　正如我们在Node节点介绍部分所指出的那��P��appendChild()、replaceChild()、removeChild()、insertBefore()�Ҏ��会立��x��变文档的�l�构。下面的例子包含两个表格�Q�我们试着把表��g��的内�Ҏ��换表��g��的内宏V�?/p><pre class="precode"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文�?lt;/title> <script language="javascript"> function replaceContent() { var table1 = document.getElementsByTagName("table")[0]; var table2 = document.getElementsByTagName("table")[1]; var kid1 = table1.firstChild.firstChild.firstChild; //定位�?lt;td>节点 var kid2 = table2.firstChild.firstChild.firstChild; //定位�?lt;td>节点 var repKid = kid2.firstChild; //定位到表��g��<td>内含的TextNode节点 try { //用表��g��的单元格内容替换表格一的单元格内容�Q�表��g��变成没有单元格内�? kid1.replaceChild(repKid,kid1.firstChild); //下面注释如果开放，��出现object error�Q�因��g��已经被改�? //kid2.replaceChild(kid1.firstChild,kid2.firstChild); }catch(e){ alert(e); } } </script> </head> <body> <table width="200" border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td>表格一</td> </tr> </tbody> </table> <br> <table width="200" border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td>表格�?lt;/td> </tr> </tbody> </table> <br> <input type="button" name="replaceNode" value="替换" onClick="replaceContent()"> </body> </html> </pre><p align="center"></p><p>　　注意�Q�当执行kid1.replaceChild(repKid,kid1.firstChild);的时候，table2的子节点已经被�{�U�d��table1了，table2已经没有子节点，不能再调用table2的子节点。看看代码的注释�Q�试着�q�行一下，应该��q��道文档是怎么改变的了�?/p><p>　　<strong>D、往文档��d��新内�?br /></strong>　　在学会遍历、搜索、修�Ҏ��档之后，我们现在试着�|�文档添加新的内宏V��其实没有什么新意，只是利用我们上述提到的Node的属性和�Ҏ��而已�Q�还是操�?lt;table>标记的内宏V��有新意的是�Q�我们要实现一个留�a��ѝ��是的，留言��，你可以往里面留言�Q�只是不能刷新噢�?/p><p>　　<strong>例子6 �?sample5_1.htm�Q?/strong></p><pre class="precode"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文�?lt;/title> <script language="javascript"> function insertStr() { var f = document.form1; var value = f.str.value; if(value!="") { // 从最�l�的TextNode节点开始，慢慢形成<tbody>�l�构 var text = document.createTextNode(value); //新徏一个TextNode节点 var td = document.createElement("td"); //新徏一个td�c�d��的Element节点 var tr = document.createElement("tr"); //新徏一个tr�c�d��的Element节点 var tbody = document.createElement("tbody"); //新徏一个tbody�c�d��的Element节点 td.appendChild(text); //��节点text加入td�? tr.appendChild(td); //��节点td加入tr�? tbody.appendChild(tr); //��节点tr加入tbody�? var parNode = document.getElementById("table1"); //定位到table�? parNode.insertBefore(tbody,parNode.firstChild); //��节点tbody插入到节炚w��? //parNode.appendChild(tbody); //��节点tbody加入节点��N�� } } </script> </head> <body> <form name="form1" method="post" action=""> <input name="str" type="text" id="str" value=""> <input name="insert" type="button" id="insert" value="留言" onClick="insertStr()"> </form> <table width="400" border="1" cellspacing="0" cellpadding="0" id="table1"> <tbody> <tr> <td height="25">�|�友留言列表�Q?lt;/td> </tr> </tbody> </table> </body> </html> </pre><p>　　我们之前说过�Q?lt;table>的子节点�?lt;tbody>�Q?lt;tbody>的子节点才是<tr>�Q?lt;tr>�?lt;td>的父节点�Q�最�?lt;td>内部的TextNode节点。所以，往<table>增加单元��D��要逐��形成�Q�就像往树里面添加一个枝桠一��P��要有叶子有径。看看，�q�个留言��是不是很简单啊。这个例子同时也演示了往<table>表格标记里面增加内容的另一�U�方法�?/p><p align="center"><br /></p><p>　　<strong>E、��用DOM操作XML文档<br /></strong>　　在数据表�C�方面，XML文档更加�l�构化。DOM在支持HTML的基��上提供了一�p�d��的API�Q�支持针对XML的访问和操作。利用这些API�Q�我们可以从XML中提取信息，动态的创徏�q�些信息的HTML呈现文档。处理XML文档�Q�通常遵��@“加载XML文档à提取信息à加工信息à创徏HTML文档”的�q�程。下面的例子演示了如何加载�ƈ处理XML文档�?/p><p>　　�q�个例子包含两个JS函数。loadXML()负责加蝲XML文档�Q�其中既包含加蝲XML文档�?�U�DOM代码�Q�又有实现同��h��作的Microsoft专有API代码。需要提醒注意的是，文档加蝲�q�程不是瞬间完成的，所以对loadXML()的调用将在加载文档完成之前返回。因此，需要传递给loadXML()一个引用，以便文档加蝲完成后调用�?/p><p>　　例子中的另外一个函数makeTable()�Q�则在XML文档加蝲完毕之后�Q��用最后前介绍�q�的DOM应用�~�程接口��d��XML文档信息�Q��ƈ利用�q�些信息形成一个新的table表格�?/p><p>　　<strong>例子7 -- sample6_1.htm�Q?/strong></p><pre class="precode"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文�?lt;/title> <script language="javascript"> function loadXML(handler) { var url = "employees.xml"; if(document.implementation&&document.implementation.createDocument) { var xmldoc = document.implementation.createDocument("", "", null); xmldoc.onload = handler(xmldoc, url); xmldoc.load(url); } else if(window.ActiveXObject) { var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); xmldoc.onreadystatechange = function() { if(xmldoc.readyState == 4) handler(xmldoc, url); } xmldoc.load(url); } } function makeTable(xmldoc, url) { var table = document.createElement("table"); table.setAttribute("border","1"); table.setAttribute("width","600"); table.setAttribute("class","tab-content"); document.body.appendChild(table); var caption = "Employee Data from " + url; table.createCaption().appendChild(document.createTextNode(caption)); var header = table.createTHead(); var headerrow = header.insertRow(0); headerrow.insertCell(0).appendChild(document.createTextNode("姓名")); headerrow.insertCell(1).appendChild(document.createTextNode("职业")); headerrow.insertCell(2).appendChild(document.createTextNode("工资")); var employees = xmldoc.getElementsByTagName("employee"); for(var i=0;i<employees.length;i++) { var e = employees[i]; var name = e.getAttribute("name"); var job = e.getElementsByTagName("job")[0].firstChild.data; var salary = e.getElementsByTagName("salary")[0].firstChild.data; var row = table.insertRow(i+1); row.insertCell(0).appendChild(document.createTextNode(name)); row.insertCell(1).appendChild(document.createTextNode(job)); row.insertCell(2).appendChild(document.createTextNode(salary)); } } </script> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body onLoad="loadXML(makeTable)"> </body> </html><br /><strong>供读取调用的XML文档 �?employees.xml�Q?/strong><br /> <?xml version="1.0" encoding="gb2312"?> <employees> <employee name="J.Doe"> <job>Programmer</job> <salary>32768</salary> </employee> <employee name="A.Baker"> <job>Sales</job> <salary>70000</salary> </employee> <employee name="Big Cheese"> <job>CEO</job> <salary>100000</salary> </employee> </employees> </pre><a name="a75"></a><strong>7.5、处理XML文档</strong><br />　　��q��XML文档的AJAX是不完整的。在本部分未完成之前�Q�有读者说AJAX改名叫AJAH�Q�H应该代表HTML吧）比较合适。应该承认，XML文档在数据的�l�构化表�C�Z��及接口对接上有先天的优势�Q�但也不是所有的数据都应该用XML表示。有些时候单�U�的文本表示可能会更合适。下面先举个AJAX处理�q�回XML文档的例子再讨论什么时候��用XML�?br /><br />7.5.1、处理返回的XML<br />　　 <strong>例子8 -- sample7_1.htm�Q?br /></strong>　　在这个例子中�Q�我们采用之前确定的AJAX开发框�Ӟ��E�微修改一下body内容和processRequest的相应方式，��先前的employees.xml的内容读取出来�ƈ昄��? <p>　　body的内容如下：</p><pre class="precode"><input type="button" name="read" value="��d��XML" onClick="send_request('employees.xml')"> processRequest()�Ҏ��修改如下�Q? // 处理�q�回信息的函�? function processRequest() { if (http_request.readyState == 4) { // 判断对象状�? if (http_request.status == 200) { // 信息已经成功�q�回�Q�开始处理信�? var returnObj = http_request.responseXML; var xmlobj = http_request.responseXML; var employees = xmlobj.getElementsByTagName("employee"); var feedbackStr = ""; for(var i=0;i<employees.length;i++) { // 循环��d��employees.xml的内�? var employee = employees[i]; feedbackStr += "员工�Q? + employee.getAttribute("name"); feedbackStr += " 职位�Q? + employee.getElementsByTagName("job")[0].firstChild.data; feedbackStr += " 工资�Q? + employee.getElementsByTagName("salary")[0].firstChild.data; feedbackStr += "\r\n"; } alert(feedbackStr); } else { //��面不正�? alert("您所��h��的页面有异常�?); } } } </pre><p>　　�q�行一下，看来效果�q�不错：</p><p align="center"></p><a name="_Toc119127385"></a>7.5.2、选择合适的XML生成方式 <p>　　现在的web应用�E�序往往采用了MVC三层剥离的设计方式。XML作�ؓ一�U�数据保存、呈现、交互的文档�Q�其数据往往是动态生成的�Q�通常由JavaBean转换�q�来。由JavaBean转换成XML文档的方式有好几�U�，选择合适的转换方式往往能达��C��半功倍的效果。下面介�l�两�U�常用的方式�Q�以侉K��要的时候根据情况取舍�?/p><p>　　<strong>A、类自行序列化成XML<br /></strong>　　�c�自行序列化成XML��x��个类都实现自��q��toXML()�Ҏ��Q�选择合适的API、适当的XML�l�构、尽量便��L��生成逻辑快速生成相应的XML文档。显�Ӟ��q�种方式必须要求每个�cȝ��写专门的XML生成代码�Q�每个类只能调用自己的toXML()�Ҏ��。应用诸如JDOM�{�一些现成的API�Q�可以减��不��开发投入。例�?是一个利用JDOM的API形成的toXML()<strong>�Ҏ��?/strong></p><p>　　<strong>例子9 -- toXml() �?JDOM 实现 -- Employ�cȝ��toXml()�Ҏ��Q?/strong></p><pre class="precode">public Element toXml() { Element employee = new Element(“employee�?; Employee.setAttribute(“name�?name); Element jobE = new Element(“job�?.addContent(job); employee.setContent(jobE); Element salaryE = new Element(“salary�?.addContent(salary); employee.setContent(salaryE); return employee; } </pre><p>　　JDOM提供了现成的API�Q��得序列化成XML的工作更加简单，我们只需要把toXML()外面包装一个Document�Q�然后��用XMLOutputter把文档写入servlet��可以了。toXml()允许递归调用其子�cȝ��toXML()�Ҏ��Q�以便生成包含子囄��XML文档�?/p><p>　　使用�c�自行序列化成XML的方式，要每个类都实现自��q��toXML()�Ҏ��Q�而且存在数据模型与视图耦合的问题，卌��么�ؓ每个可能的视囄��写独立的toXML()�Ҏ��Q�要么心甘情愿接收冗余的数据�Q�一旦数据结构或者文档发生改变，toXML()��p��做必要的修改�?/p><p>　　<strong>B、页面模板生成XML方式<br /></strong>　　一般的�Q�可以采用通用的页面模板技术来生成XML文档�Q�这个XML文档可以�W�合��M��需要的数据模型�Q�供AJAX灉|��的调用。另外，模板可以采用��M��标记语言�~�写�Q�提高工作效率。下面是一个采用Struts标签库编写的XML文档�Q�输��Z��前提到的employees.xml�Q?/p><p>　　<strong>Sample8_2.jsp�Q?/strong></p><pre class="precode"><%@ page contentType="application/xml; charset=gb2312" import="Employee"%> <%@ page import="java.util.Collection,java.util.ArrayList"%> <?xml version="1.0"?> <%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %> <%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%> <% Employee em1 = new Employee(); em1.setName("J.Doe"); em1.setJob("Programmer"); em1.setSalary("32768"); Employee em2 = new Employee(); em2.setName("A.Baker"); em2.setJob("Sales"); em2.setSalary("70000"); Employee em3 = new Employee(); em3.setName("Big Cheese"); em3.setJob("CEO"); em3.setSalary("100000"); Collection employees = new ArrayList(); employees.add(em1); employees.add(em2); employees.add(em3); pageContext.setAttribute("employees",employees); %> <employees> <logic:iterate name="employees" id="employee"> <employee name="<bean:write name='employee' property='name'/>"> <job><bean:write name="employee" property="job"/></job> <salary><bean:write name="employee" property="salary"/></salary> </employee> </logic:iterate> </employees> </pre><p>　　</p><p>　　采用��面模板生成XML方式�Q�需要�ؓ每个需要的的数据模型徏立一个对立的JSP文�g�Q�用来生成符合规范的XML文档�Q�而不能仅仅在�cȝ��toXML()�Ҏ��中组�l�对象图来实现。不�q�，倒是可以更加方便的确保标记匹配、元素和属性的��序正确以及XML实体正确转义�?/p><p>　　参考资料中Philip McCarthy的文章还描述了一�U�Javascript对象标注的生成方式，本文在此不赘�q�。有兴趣的读者可以自行查看了解�?/p><a></a>7.5.3、如何在使用XML�q�是普通文本间权衡<br />　　使用XML文档��实有其方便之处。不�q�XML文档的某些问题倒是要考虑一下，比如说�g�q�，��x��务器不能立即解析XML文档成�ؓDOM模型。这个问题在一定程度上会媄响AJAX要求的快速反应能力。另外，某些情况下我们�ƈ不需要��用XML来表�C�数据，比如说数据��够简单成只有一个字�W�串而已。就好像我们之前提到的数据校验和�U�联菜单的例子一栗��所以，个�h认�ؓ在下面这些情况下可以考虑使用XML来作为数据表�C�的介质�Q? <ul><li>数据比较复杂�Q�需要用XML的结构化方式来表�C? </li><li>不用考虑带宽和处理效率支�? </li><li>与系�l�其他API或者其他系�l�交互，作�ؓ一�U�数据中转中�? </li><li>需要特定各式的输出视图而文本无法表�C�的 </li></ul><p>　　��M��Q�要认真评估两种表示方式的表�C�成本和效率�Q�选择合适的合理的表�C�方式。　　 </p><p>　　在关于AJAX的系列文章的下一��，我们��综合��用DOM和XML�Q�来实现一个可以持久化的简单留�a��ѝ��另外，�q�将试着模拟MSN Space的部分功能，来体会AJAX的魅力�?a name="a8"></a></p><a><strong>参考文章：</strong></a><br /><br /><table cellspacing="1" cellpadding="4" bgcolor="#000000"><tbody><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">fanscial</td><td valign="top" width="75">标题�Q?/td><td valign="top" width="416">《AJAX��介�?/td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">�|�址�Q?/td><td valign="top" width="641" colspan="3"><a href="/fanscial/archive/2005/08/31/11628.html" target="_blank">http://www.aygfsteel.com/fanscial/archive/2005/08/31/11628.html</a></td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">Amour GUO</td><td valign="top" width="75">标题�Q?/td><td valign="top" width="416">《AJAX内部交流文档�?/td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">�|�址�Q?/td><td valign="top" width="641" colspan="3"><a target="_blank">http://www.dragonson.com/doc/ajax.html</a></td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">MoztwWiki</td><td valign="top" width="75">标题�Q?/td><td valign="top" width="416">《AJAX上手��?/td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">�|�址�Q?/td><td valign="top" width="641" colspan="3"><a target="_blank">http://wiki.moztw.org/index.php/AJAX_%E4%B8%8A%E6%89%8B%E7%AF%87</a></td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">Philip McCarthy</td><td valign="top" width="75">标题�Q?/td><td valign="top" width="416">面向Java开发�h员的Ajax:构徏动态的Java应用�E�序</td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">�|�址�Q?/td><td valign="top" width="641" colspan="3"><a target="_blank">http://kb.csdn.net/java/Articles/200510/bed0423e-5297-49c9-9464-0e3eb733c8b5.html</a></td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">Philip McCarthy</td><td valign="top" width="75">标题�Q?/td><td valign="top" width="416">面向Java开发�h员的Ajax:Ajax的Java对象序列�?/td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">�|�址�Q?/td><td valign="top" width="641" colspan="3"><a target="_blank">http://kb.csdn.net/java/Articles/200510/a5b630cf-a2c2-46f1-8e3b-eadde723e734.html</a></td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">David Flanagan</td><td valign="top" width="75">书名�Q?/td><td valign="top" width="416">《Javascript权威指南�?/td></tr></tbody></table><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/zxfahjz/" target="_blank">zxf</a> 2006-08-15 16:46 <a href="http://www.aygfsteel.com/zxfahjz/archive/2006/08/15/63721.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div> </article> </main></body></html>

zxf — Tue, 15 Aug 2006 08:46:00 GMT

七、AJAX开�?/strong>
　　到这里，已经可以清楚的知道AJAX是什么，AJAX能做什么，AJAX什么地方不好。如果你觉得AJAX真的能给你的开发工作带来改�q�的话，那么�l�箋看看怎么使用AJAX吧�?a name="a71">

7.1、AJAX应用到的技�?/strong>
　　AJAX涉及到的7��Ҏ��术中�Q�个��为Javascript、XMLHttpRequest、DOM、XML比较有用�?br />
A、XMLHttpRequest对象
　　XMLHttpRequest是XMLHTTP�l��g的对象，通过�q�个对象�Q�AJAX可以像桌面应用程序一样只同服务器�q�行数据层面的交换，而不用每�ơ都��h��界面�Q�也不用每次��数据处理的工作都交�l�服务器来做�Q�这��h��减轻了服务器负担又加快了响应速度、羃短了用户�{�待的时间�?
　　IE5.0开始，开发�h员可以在Web��面内部使用XMLHTTP ActiveX�l��g扩展自��n的功能，不用从当前的Web��面��D��可以直接传输数据到服务器或者从服务器接收数据�?Mozilla1.0以及NetScape7则是创徏�l�承XML的代理类XMLHttpRequest�Q�对于大多数情况�Q�XMLHttpRequest对象和XMLHTTP�l��g很相��|��Ҏ��和属性类��|��只是部分属性不同�?/p>
XMLHttpRequest对象初始化：
7.3、简单的�C�Z��
　　接下来，我们利用上面的开发框架来做两个简单的应用�?br />
A、数据校�?br />　　在用��h��册的表单中，�l�常��到要检验待注册的用户名是否唯一。传�l�的做法是采用window.open的弹出窗口，或者window. showModalDialog的对话框。不�q�，�q�两个都需要打开�H�口。采用AJAX后，采用异步方式直接��参数提交到服务器，用window.alert��服务器�q�回的校验信息显�C�出来。代码如下：
　　�?lt;body>之间增加一�D�form表单代码�Q?/p>

用户名：

　　在开发框架的基础上再增加一个调用函敎ͼ�
function userCheck() { var f = document.form1; var username = f.username.value; if(username=="") { window.alert("用户名不能�ؓ�I��?); f.username.focus(); return false; } else { send_request('sample1_2.jsp?username='+username); } }
　　看看sample1_2.jsp做了什么：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %> <% String username = request.getParameter("username"); if("educhina".equals(username)) out.print("用户名已�l�被注册�Q�请更换一个用户名�?); else out.print("用户名尚未被使用�Q�您可以�l�箋�?); %>
　　�q�行一下，嗯，没有弹出�H�口�Q�没有页面刷斎ͼ�跟预想的效果一栗��如果需要的话，可以在sample1_2.jsp中实现更复杂的功能。最后，只要��反馈信息打印出来就可以了�?/p>

B、��联菜�?br />　　我们在第五部分提到利用AJAX改进�U�联菜单的设计。接下来�Q�我们就演示一下如何“按需取数据”�?
　　首先�Q�在中间增加如下HTML代码�Q?/p>

�l�理�?lt;/a>

开发部

　　在框架的基础上增加一个响应函数showRoles(obj)�Q?/p>
//昄��部门下的岗位 function showRoles(obj) { document.getElementById(obj).parentNode.style.display = ""; document.getElementById(obj).innerHTML = "正在��d��数据..." currentPos = obj; send_request("sample2_2.jsp?playPos="+obj); }
　　修改框架的processRequest函数�Q?/p>
// 处理�q�回信息的函�? function processRequest() { if (http_request.readyState == 4) { // 判断对象状�? if (http_request.status == 200) { // 信息已经成功�q�回�Q�开始处理信�? document.getElementById(currentPos).innerHTML = http_request.responseText; } else { //��面不正�? alert("您所��h��的页面有异常�?); } } }
　　最后就是smaple2_2.jsp了：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %>
<%
String playPos = request.getParameter("playPos"); if("pos_1".equals(playPos)) out.print(" �ȝ��?lt;br> 副�ȝ��?); else if("pos_2".equals(playPos)) out.println(" ��d��E�师
软�g工程�?);
%>
　　�q�行一下看看效果：
7.4、文档对象模型（DOM�Q?/strong>
　　文档对象模型�Q�DOM�Q�是表示文档�Q�比如HTML和XML�Q�和讉K��、操作构成文档的各种元素的应用程序接口（API�Q�。一般的�Q�支持Javascript的所有浏览器都支持DOM。本文所涉及的DOM�Q�是指W3C定义的标准的文档对象模型�Q�它以树形结构表�C�HTML和XML文档�Q�定义了遍历�q�个树和��查、修�Ҏ��的节点的�Ҏ��和属性�?br />
7.4.1、DOM��g��的HTML文档�Q�树
　　在DOM��g��Q�HTML跟XML一��h��一�U�树形结构的文档�Q?lt;html>是根�Q�root�Q�节点，�?lt;title>�?lt;body>�?lt;html>的子�Q�children�Q�节点，互相之间是兄弟（sibling�Q�节点；下面才是子节�?lt;table>�?lt;span>�?lt;p>�{�等。如下图�Q?
　　
　　�q�个是不是跟XML的结构有点相似呢。不同的是，HTML文档的树形主要包含表�C�元素、标记的节点和表�C�文本串的节炏V�?/p>7.4.2、HTML文档的节�?br />　　DOM下，HTML文档各个节点被视为各�U�类型的Node对象。每个Node对象都有自己的属性和�Ҏ��Q�利用这些属性和�Ҏ��可以遍历整个文档树。由于HTML文档的复杂性，DOM定义了nodeType来表�C��点的�c�d��。这里列出Node常用的几�U�节点类型：
接口 nodeType帔R�� nodeType�?/td> 备注
Element Node.ELEMENT_NODE 1 元素节点
Text Node.TEXT_NODE 3 文本节点
Document Node.DOCUMENT_NODE 9 document
Comment Node.COMMENT_NODE 8 注释的文�?/td>
DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 document片断
Attr Node.ATTRIBUTE_NODE 2 节点属�?/td>
　　DOM树的根节�Ҏ��个Document对象�Q�该对象的documentElement属性引用表�C�文档根元素的Element对象�Q�对于HTML文档�Q�这个就�?lt;html>标记�Q�。Javascript操作HTML文档的时候，document��x��向整个文档，�?lt;table>�{�节点类型即为Element。Comment�c�d��的节点则是指文档的注释。具体节点类型的含义�Q�请参考《Javascript权威指南》，在此不赘�q��?/p>
　　Document定义的方法大多数是生产型�Ҏ��Q�主要用于创建可以插入文档中的各�U�类型的节点。常用的Document�Ҏ��有：
�Ҏ�� 描述
createAttribute() 用指定的名字创徏新的Attr节点�?/td>
createComment() 用指定的字符串创建新的Comment节点�?/td>
createElement() 用指定的标记名创建新的Element节点�?/td>
createTextNode() 用指定的文本创徏新的TextNode节点�?/td>
getElementById() �q�回文档中具有指定id属性的Element节点�?/td>
getElementsByTagName() �q�回文档中具有指定标记名的所有Element节点�?/td>
　　对于Element节点�Q�可以通过调用getAttribute()、setAttribute()、removeAttribute()�Ҏ��来查询、设�|�或者删除一个Element节点的性质�Q�比�?lt;table>标记的border属性。下面列出Element常用的属性：
属�?/td> 描述
tagName 元素的标记名�U�ͼ�比如
元素为P。HTML文档�q�回的tabName均�ؓ大写�?/td>
　　Element常用的方法：
�Ҏ�� 描述
getAttribute() 以字�W�串形式�q�回指定属性的倹{�?/td>
getAttributeNode() 以Attr节点的�Ş式返回指定属性的倹{�?/td>
getElementsByTabName() �q�回一个Node数组�Q�包含具有指定标记名的所有Element节点的子孙节点，光��序�ؓ在文档中出现的顺序�?/td>
hasAttribute() 如果该元素具有指定名字的属性，则返回true�?/td>
removeAttribute() 从元素中删除指定的属性�?/td>
removeAttributeNode() 从元素的属性列表中删除指定的Attr节点�?/td>
setAttribute() 把指定的属性设�|��ؓ指定的字�W�串��|��如果该属性不存在则添加一个新属性�?/td>
setAttributeNode() 把指定的Attr节点��d��到该元素的属性列表中�?/td>
　　Attr对象代表文档元素的属性，有name、value�{�属性，可以通过Node接口的attributes属性或者调用Element接口的getAttributeNode()�Ҏ��来获取。不�q�，在大多数情况下，使用Element元素属性的最��单方法是getAttribute()和setAttribute()两个�Ҏ��Q�而不是Attr对象�?
7.4.3、��用DOM操作HTML文档
　　Node对象定义了一�p�d��属性和�Ҏ��Q�来方便遍历整个文档。用parentNode属性和childNodes[]数组可以在文档树中上下移动；通过遍历childNodes[]数组或者��用firstChild和nextSibling属性进行��@环操作，也可以��用lastChild和previousSibling�q�行逆向循环操作�Q�也可以枚�D指定节点的子节点。而调用appendChild()、insertBefore()、removeChild()、replaceChild()�Ҏ��可以改变一个节点的子节点从而改变文档树�?
　　需要指出的是，childNodes[]的值实际上是一个NodeList对象。因此，可以通过遍历childNodes[]数组的每个元素，来枚举一个给定节点的所有子节点�Q�通过递归�Q�可以枚举树中的所有节炏V��下表列��Z��Node对象的一些常用属性和�Ҏ��Q?/p>
　　Node对象常用属性：
属�?/td> 描述
attributes 如果该节�Ҏ��一个Element�Q�则以NamedNodeMap形式�q�回该元素的属性�?/td>
childNodes 以Node[]的�Ş式存攑ֽ�前节点的子节炏V��如果没有子节点�Q�则�q�回�I�数�l��?/td>
firstChild 以Node的�Ş式返回当前节点的�W�一个子节点。如果没有子节点�Q�则为null�?/td>
lastChild 以Node的�Ş式返回当前节点的最后一个子节点。如果没有子节点�Q�则为null�?/td>
nextSibling 以Node的�Ş式返回当前节点的兄弟下一个节炏V��如果没有这��L��节点�Q�则�q�回null�?/td>
nodeName 节点的名字，Element节点则代表Element的标记名�U��?/td>
nodeType 代表节点的类型�?/td>
parentNode 以Node的�Ş式返回当前节点的父节炏V��如果没有父节点�Q�则为null�?/td>
previousSibling 以Node的�Ş式返回紧挨当前节炏V��位于它之前的兄弟节炏V��如果没有这��L��节点�Q�则�q�回null�?/td>
　　Node对象常用�Ҏ��Q?/p>
�Ҏ�� 描述
appendChild() 通过把一个节点增加到当前节点的childNodes[]�l�，�l�文档树增加节点�?/td>
cloneNode() 复制当前节点�Q�或者复制当前节点以及它的所有子孙节炏V�?/td>
hasChildNodes() 如果当前节点拥有子节点，则将�q�回true�?/td>
insertBefore() �l�文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在�Q�则删除之再插入到它的位�|��?/td>
removeChild() 从文档树中删除�ƈ�q�回指定的子节点�?/td>
replaceChild() 从文档树中删除�ƈ�q�回指定的子节点�Q�用另一个节�Ҏ��换它�?/td>
　　接下来，让我们��用上�q�的DOM应用�~�程接口�Q�来试着操作HTML文档�?/p>
　　A、遍历文档的节点
　　DOM把一个HTML文档视�ؓ树，因此�Q�遍历整个树是应该是家常侉K��。跟之前说过的一��P��q�里我们提供两个遍历树的例子。通过它，我们能够学会如何使用childNodes[]和firstChile、lastChild、nextSibling、previousSibling遍历整棵树�?/p>
　　例子1-- sample3_1.htm�Q?br />　　�q�个例子使用了childNodes[]和递归方式来遍历整个文档，�l�计文档中出现的Element元素��L��Q��ƈ把Element标记名全部打印出来。需要特别注意的是，在��用DOM�Ӟ��必须�{�文档被装蝲完毕再执行遍历等行�ؓ操作文档。sample3_1.htm具体代码如下�Q?/p>
无标题文�?lt;/title> <script language="javascript"> var elementName = ""; //全局变量�Q�保存Element标记名，使用完毕要清�I? function countTotalElement(node) { //参数node是一个Node对象 var total = 0; if(node.nodeType == 1) { //��查node是否为Element对象 total++; //如果是，计数器加1 elementName = elementName + node.tagName + "\r\n"; //保存标记�? } var childrens = node.childNodes; //获取node的全部子节点 for(var i=0;i<childrens.length;i++) { total += countTotalElement(childrens[i]); //在每个子节点上进行递归操作 } return total; } </script> </head> <body> <a href="javascript:void(0)" onClick="alert('标记��L��Q? + countTotalElement(document) + '\r\n<br /><br />全部标记如下�Q�\r\n' + elementName);elementName='';">开始统�?lt;/a> </body> </html></pre><p align="center"></p><p>　　<strong>例子2 �?sample3_2.htm�Q?br /></strong>　　接下来��用firstChile、lastChild、nextSibling、previousSibling遍历整个文档树。修改一下countTotalElement函数�Q�其他跟sample3_1.htm一��P��</p><pre class="precode">function countTotalElement(node) { //参数node是一个Node对象 var total = 0; if(node.nodeType == 1) { //��查node是否为Element对象 total++; //如果是，计数器加1 elementName = elementName + node.tagName + "\r\n"; //保存标记�? } var childrens = node.childNodes; //获取node的全部子节点 for(var m=node.firstChild; m!=null;m=m.nextSibling) { total += countTotalElement(m); //在每个子节点上进行递归操作 } return total; } </pre><p>　　<strong>B、搜索文档中特定的元�?br /></strong>　　在��用DOM的过�E�中�Q�有时候需要定位到文档中的某个特定节点�Q�或者具有特定类型的节点列表。这�U�情况下�Q�可以调用Document对象的getElementsByTagName()和getElementById()�Ҏ��来实现�?/p><p>　　document.getElementsByTagName()�q�回文档中具有指定标记名的全部Element节点数组�Q�也是NodeList�c�d��Q�。Element出现在数�l�中的顺序就是他们在文档中出现的��序。传递给getElementsByTagName()的参数忽略大��写。比如，惛_��位到�W�一�?lt;table>标记�Q�可以这样写�Q�document.getElementsByTagName(“table�?[0]。例外的�Q�可以��用document.body定位�?lt;body>标记�Q�因为它是唯一的�?/p><p>　　getElementsByTagName()�q�回的数�l�取决于文档。一旦文档改变，�q�回�l�果也立��x��变。相比，getElementById()则比较灵�z�，可以随时定位到目标，只是要实现给目标元素一个唯一的id属性倹{��这个我们在《AJAX开发简略》的“��联菜单”例子中已经使用�q�了�?/p><p>　　Element对象也支持getElementsByTagName()和getElementById()。不同的是，搜烦领域只针对调用者的子节炏V�?/p><p>　　<strong>C、修�Ҏ��档内�?br /></strong>　　遍历整棵文档树、搜索特定的节点�Q�我们最�l�目的之一是要修改文档内容。接下来的三个例子将使用Node的几个常用方法，来演�C�如何修�Ҏ��档内宏V�?/p><p>　　<strong>例子3 -- sample4_1.htm�Q?br /></strong>　　�q�个例子包含三个文本节点和一个按钮。点��L��钮后�Q�三个文本节点和按钮的顺序将被颠倒。程序��用了Node的appendChild()和removeChild()�Ҏ��?/p><pre class="precode"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文�?lt;/title> <script language="javascript"> function reverseNode(node) { // 颠倒节点node的顺�? var kids = node.childNodes; //获取子节点列�? var kidsNum = kids.length; //�l�计子节�Ҏ��L�� for(var i=kidsNum-1;i>=0;i--) { //逆向遍历子节点列�? var c = node.removeChild(kids[i]); //删除指定子节点，保存在c�? node.appendChild(c); //��c攑֜��C��|�上 } } </script> </head> <body> <p>�W�一�?lt;/p> <p>�W�二�?lt;/p> <p>�W�三�?lt;/p> <p><input type="button" name="reverseGo" value="颠�? onClick="reverseNode(document.body)"></p> </body> </html> </pre><p align="center"></p><p>　　<strong>例子4-- sample4_2.htm�Q?br /></strong>　　例子1通过直接操作body的子节点来修�Ҏ��档。在HTML文档中，布局和定位常帔R��过表格<table>来实现。因此，例子4��演�C�操作表格内容，��表格的四个单元行顺序颠倒。如果没有��?lt;tbody>标签�Q�则<table>把全部的<tr>当做是属于一个子节点<tbody>�Q�所以我们采用数�l�缓存的方式�Q�把行数据颠倒一下。这个例子同时也演示了如何��用DOM创徏表格单元行�?/p><pre class="precode"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文�?lt;/title> <script language="javascript"> function reverseTable() { var node = document.getElementsByTagName("table")[0]; //�W�一个表�? var child = node.getElementsByTagName("tr"); //取得表格内的所有行 var newChild = new Array(); //定义�~�存数组�Q�保存行内容 for(var i=0;i<child.length;i++) { newChild[i] = child[i].firstChild.innerHTML; } node.removeChild(node.childNodes[0]); //删除全部单元�? var header = node.createTHead(); //新徏表格行头 for(var i=0;i<newChild.length;i++) { var headerrow = header.insertRow(i); //插入一个单元行 var cell = headerrow.insertCell(0); //在单元行中插入一个单元格 //在单元格中创建TextNode节点 cell.appendChild(document.createTextNode(newChild[newChild.length-i-1])); } } </script> </head> <body> <table width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">�W�一�?lt;/td> </tr> <tr> <td height="25">�W�二�?lt;/td> </tr> <tr> <td height="25">�W�三�?lt;/td> </tr> <tr> <td height="25">�W�四�?lt;/td> </tr> </table> <br> <input type="button" name="reverse" value="开始颠�? onClick="reverseTable()"> </body> </html> </pre><p align="center"></p><p>　　<strong>例子5 -- sample4_3.htm�Q?br /></strong>　　正如我们在Node节点介绍部分所指出的那��P��appendChild()、replaceChild()、removeChild()、insertBefore()�Ҏ��会立��x��变文档的�l�构。下面的例子包含两个表格�Q�我们试着把表��g��的内�Ҏ��换表��g��的内宏V�?/p><pre class="precode"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文�?lt;/title> <script language="javascript"> function replaceContent() { var table1 = document.getElementsByTagName("table")[0]; var table2 = document.getElementsByTagName("table")[1]; var kid1 = table1.firstChild.firstChild.firstChild; //定位�?lt;td>节点 var kid2 = table2.firstChild.firstChild.firstChild; //定位�?lt;td>节点 var repKid = kid2.firstChild; //定位到表��g��<td>内含的TextNode节点 try { //用表��g��的单元格内容替换表格一的单元格内容�Q�表��g��变成没有单元格内�? kid1.replaceChild(repKid,kid1.firstChild); //下面注释如果开放，��出现object error�Q�因��g��已经被改�? //kid2.replaceChild(kid1.firstChild,kid2.firstChild); }catch(e){ alert(e); } } </script> </head> <body> <table width="200" border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td>表格一</td> </tr> </tbody> </table> <br> <table width="200" border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td>表格�?lt;/td> </tr> </tbody> </table> <br> <input type="button" name="replaceNode" value="替换" onClick="replaceContent()"> </body> </html> </pre><p align="center"></p><p>　　注意�Q�当执行kid1.replaceChild(repKid,kid1.firstChild);的时候，table2的子节点已经被�{�U�d��table1了，table2已经没有子节点，不能再调用table2的子节点。看看代码的注释�Q�试着�q�行一下，应该��q��道文档是怎么改变的了�?/p><p>　　<strong>D、往文档��d��新内�?br /></strong>　　在学会遍历、搜索、修�Ҏ��档之后，我们现在试着�|�文档添加新的内宏V��其实没有什么新意，只是利用我们上述提到的Node的属性和�Ҏ��而已�Q�还是操�?lt;table>标记的内宏V��有新意的是�Q�我们要实现一个留�a��ѝ��是的，留言��，你可以往里面留言�Q�只是不能刷新噢�?/p><p>　　<strong>例子6 �?sample5_1.htm�Q?/strong></p><pre class="precode"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文�?lt;/title> <script language="javascript"> function insertStr() { var f = document.form1; var value = f.str.value; if(value!="") { // 从最�l�的TextNode节点开始，慢慢形成<tbody>�l�构 var text = document.createTextNode(value); //新徏一个TextNode节点 var td = document.createElement("td"); //新徏一个td�c�d��的Element节点 var tr = document.createElement("tr"); //新徏一个tr�c�d��的Element节点 var tbody = document.createElement("tbody"); //新徏一个tbody�c�d��的Element节点 td.appendChild(text); //��节点text加入td�? tr.appendChild(td); //��节点td加入tr�? tbody.appendChild(tr); //��节点tr加入tbody�? var parNode = document.getElementById("table1"); //定位到table�? parNode.insertBefore(tbody,parNode.firstChild); //��节点tbody插入到节炚w��? //parNode.appendChild(tbody); //��节点tbody加入节点��N�� } } </script> </head> <body> <form name="form1" method="post" action=""> <input name="str" type="text" id="str" value=""> <input name="insert" type="button" id="insert" value="留言" onClick="insertStr()"> </form> <table width="400" border="1" cellspacing="0" cellpadding="0" id="table1"> <tbody> <tr> <td height="25">�|�友留言列表�Q?lt;/td> </tr> </tbody> </table> </body> </html> </pre><p>　　我们之前说过�Q?lt;table>的子节点�?lt;tbody>�Q?lt;tbody>的子节点才是<tr>�Q?lt;tr>�?lt;td>的父节点�Q�最�?lt;td>内部的TextNode节点。所以，往<table>增加单元��D��要逐��形成�Q�就像往树里面添加一个枝桠一��P��要有叶子有径。看看，�q�个留言��是不是很简单啊。这个例子同时也演示了往<table>表格标记里面增加内容的另一�U�方法�?/p><p align="center"><br /></p><p>　　<strong>E、��用DOM操作XML文档<br /></strong>　　在数据表�C�方面，XML文档更加�l�构化。DOM在支持HTML的基��上提供了一�p�d��的API�Q�支持针对XML的访问和操作。利用这些API�Q�我们可以从XML中提取信息，动态的创徏�q�些信息的HTML呈现文档。处理XML文档�Q�通常遵��@“加载XML文档à提取信息à加工信息à创徏HTML文档”的�q�程。下面的例子演示了如何加载�ƈ处理XML文档�?/p><p>　　�q�个例子包含两个JS函数。loadXML()负责加蝲XML文档�Q�其中既包含加蝲XML文档�?�U�DOM代码�Q�又有实现同��h��作的Microsoft专有API代码。需要提醒注意的是，文档加蝲�q�程不是瞬间完成的，所以对loadXML()的调用将在加载文档完成之前返回。因此，需要传递给loadXML()一个引用，以便文档加蝲完成后调用�?/p><p>　　例子中的另外一个函数makeTable()�Q�则在XML文档加蝲完毕之后�Q��用最后前介绍�q�的DOM应用�~�程接口��d��XML文档信息�Q��ƈ利用�q�些信息形成一个新的table表格�?/p><p>　　<strong>例子7 -- sample6_1.htm�Q?/strong></p><pre class="precode"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文�?lt;/title> <script language="javascript"> function loadXML(handler) { var url = "employees.xml"; if(document.implementation&&document.implementation.createDocument) { var xmldoc = document.implementation.createDocument("", "", null); xmldoc.onload = handler(xmldoc, url); xmldoc.load(url); } else if(window.ActiveXObject) { var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); xmldoc.onreadystatechange = function() { if(xmldoc.readyState == 4) handler(xmldoc, url); } xmldoc.load(url); } } function makeTable(xmldoc, url) { var table = document.createElement("table"); table.setAttribute("border","1"); table.setAttribute("width","600"); table.setAttribute("class","tab-content"); document.body.appendChild(table); var caption = "Employee Data from " + url; table.createCaption().appendChild(document.createTextNode(caption)); var header = table.createTHead(); var headerrow = header.insertRow(0); headerrow.insertCell(0).appendChild(document.createTextNode("姓名")); headerrow.insertCell(1).appendChild(document.createTextNode("职业")); headerrow.insertCell(2).appendChild(document.createTextNode("工资")); var employees = xmldoc.getElementsByTagName("employee"); for(var i=0;i<employees.length;i++) { var e = employees[i]; var name = e.getAttribute("name"); var job = e.getElementsByTagName("job")[0].firstChild.data; var salary = e.getElementsByTagName("salary")[0].firstChild.data; var row = table.insertRow(i+1); row.insertCell(0).appendChild(document.createTextNode(name)); row.insertCell(1).appendChild(document.createTextNode(job)); row.insertCell(2).appendChild(document.createTextNode(salary)); } } </script> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body onLoad="loadXML(makeTable)"> </body> </html><br /><strong>供读取调用的XML文档 �?employees.xml�Q?/strong><br /> <?xml version="1.0" encoding="gb2312"?> <employees> <employee name="J.Doe"> <job>Programmer</job> <salary>32768</salary> </employee> <employee name="A.Baker"> <job>Sales</job> <salary>70000</salary> </employee> <employee name="Big Cheese"> <job>CEO</job> <salary>100000</salary> </employee> </employees> </pre><a name="a75"></a><strong>7.5、处理XML文档</strong><br />　　��q��XML文档的AJAX是不完整的。在本部分未完成之前�Q�有读者说AJAX改名叫AJAH�Q�H应该代表HTML吧）比较合适。应该承认，XML文档在数据的�l�构化表�C�Z��及接口对接上有先天的优势�Q�但也不是所有的数据都应该用XML表示。有些时候单�U�的文本表示可能会更合适。下面先举个AJAX处理�q�回XML文档的例子再讨论什么时候��用XML�?br /><br />7.5.1、处理返回的XML<br />　　 <strong>例子8 -- sample7_1.htm�Q?br /></strong>　　在这个例子中�Q�我们采用之前确定的AJAX开发框�Ӟ��E�微修改一下body内容和processRequest的相应方式，��先前的employees.xml的内容读取出来�ƈ昄��? <p>　　body的内容如下：</p><pre class="precode"><input type="button" name="read" value="��d��XML" onClick="send_request('employees.xml')"> processRequest()�Ҏ��修改如下�Q? // 处理�q�回信息的函�? function processRequest() { if (http_request.readyState == 4) { // 判断对象状�? if (http_request.status == 200) { // 信息已经成功�q�回�Q�开始处理信�? var returnObj = http_request.responseXML; var xmlobj = http_request.responseXML; var employees = xmlobj.getElementsByTagName("employee"); var feedbackStr = ""; for(var i=0;i<employees.length;i++) { // 循环��d��employees.xml的内�? var employee = employees[i]; feedbackStr += "员工�Q? + employee.getAttribute("name"); feedbackStr += " 职位�Q? + employee.getElementsByTagName("job")[0].firstChild.data; feedbackStr += " 工资�Q? + employee.getElementsByTagName("salary")[0].firstChild.data; feedbackStr += "\r\n"; } alert(feedbackStr); } else { //��面不正�? alert("您所��h��的页面有异常�?); } } } </pre><p>　　�q�行一下，看来效果�q�不错：</p><p align="center"></p><a name="_Toc119127385"></a>7.5.2、选择合适的XML生成方式 <p>　　现在的web应用�E�序往往采用了MVC三层剥离的设计方式。XML作�ؓ一�U�数据保存、呈现、交互的文档�Q�其数据往往是动态生成的�Q�通常由JavaBean转换�q�来。由JavaBean转换成XML文档的方式有好几�U�，选择合适的转换方式往往能达��C��半功倍的效果。下面介�l�两�U�常用的方式�Q�以侉K��要的时候根据情况取舍�?/p><p>　　<strong>A、类自行序列化成XML<br /></strong>　　�c�自行序列化成XML��x��个类都实现自��q��toXML()�Ҏ��Q�选择合适的API、适当的XML�l�构、尽量便��L��生成逻辑快速生成相应的XML文档。显�Ӟ��q�种方式必须要求每个�cȝ��写专门的XML生成代码�Q�每个类只能调用自己的toXML()�Ҏ��。应用诸如JDOM�{�一些现成的API�Q�可以减��不��开发投入。例�?是一个利用JDOM的API形成的toXML()<strong>�Ҏ��?/strong></p><p>　　<strong>例子9 -- toXml() �?JDOM 实现 -- Employ�cȝ��toXml()�Ҏ��Q?/strong></p><pre class="precode">public Element toXml() { Element employee = new Element(“employee�?; Employee.setAttribute(“name�?name); Element jobE = new Element(“job�?.addContent(job); employee.setContent(jobE); Element salaryE = new Element(“salary�?.addContent(salary); employee.setContent(salaryE); return employee; } </pre><p>　　JDOM提供了现成的API�Q��得序列化成XML的工作更加简单，我们只需要把toXML()外面包装一个Document�Q�然后��用XMLOutputter把文档写入servlet��可以了。toXml()允许递归调用其子�cȝ��toXML()�Ҏ��Q�以便生成包含子囄��XML文档�?/p><p>　　使用�c�自行序列化成XML的方式，要每个类都实现自��q��toXML()�Ҏ��Q�而且存在数据模型与视图耦合的问题，卌��么�ؓ每个可能的视囄��写独立的toXML()�Ҏ��Q�要么心甘情愿接收冗余的数据�Q�一旦数据结构或者文档发生改变，toXML()��p��做必要的修改�?/p><p>　　<strong>B、页面模板生成XML方式<br /></strong>　　一般的�Q�可以采用通用的页面模板技术来生成XML文档�Q�这个XML文档可以�W�合��M��需要的数据模型�Q�供AJAX灉|��的调用。另外，模板可以采用��M��标记语言�~�写�Q�提高工作效率。下面是一个采用Struts标签库编写的XML文档�Q�输��Z��前提到的employees.xml�Q?/p><p>　　<strong>Sample8_2.jsp�Q?/strong></p><pre class="precode"><%@ page contentType="application/xml; charset=gb2312" import="Employee"%> <%@ page import="java.util.Collection,java.util.ArrayList"%> <?xml version="1.0"?> <%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %> <%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%> <% Employee em1 = new Employee(); em1.setName("J.Doe"); em1.setJob("Programmer"); em1.setSalary("32768"); Employee em2 = new Employee(); em2.setName("A.Baker"); em2.setJob("Sales"); em2.setSalary("70000"); Employee em3 = new Employee(); em3.setName("Big Cheese"); em3.setJob("CEO"); em3.setSalary("100000"); Collection employees = new ArrayList(); employees.add(em1); employees.add(em2); employees.add(em3); pageContext.setAttribute("employees",employees); %> <employees> <logic:iterate name="employees" id="employee"> <employee name="<bean:write name='employee' property='name'/>"> <job><bean:write name="employee" property="job"/></job> <salary><bean:write name="employee" property="salary"/></salary> </employee> </logic:iterate> </employees> </pre><p>　　</p><p>　　采用��面模板生成XML方式�Q�需要�ؓ每个需要的的数据模型徏立一个对立的JSP文�g�Q�用来生成符合规范的XML文档�Q�而不能仅仅在�cȝ��toXML()�Ҏ��中组�l�对象图来实现。不�q�，倒是可以更加方便的确保标记匹配、元素和属性的��序正确以及XML实体正确转义�?/p><p>　　参考资料中Philip McCarthy的文章还描述了一�U�Javascript对象标注的生成方式，本文在此不赘�q�。有兴趣的读者可以自行查看了解�?/p><a></a>7.5.3、如何在使用XML�q�是普通文本间权衡<br />　　使用XML文档��实有其方便之处。不�q�XML文档的某些问题倒是要考虑一下，比如说�g�q�，��x��务器不能立即解析XML文档成�ؓDOM模型。这个问题在一定程度上会媄响AJAX要求的快速反应能力。另外，某些情况下我们�ƈ不需要��用XML来表�C�数据，比如说数据��够简单成只有一个字�W�串而已。就好像我们之前提到的数据校验和�U�联菜单的例子一栗��所以，个�h认�ؓ在下面这些情况下可以考虑使用XML来作为数据表�C�的介质�Q? <ul><li>数据比较复杂�Q�需要用XML的结构化方式来表�C? </li><li>不用考虑带宽和处理效率支�? </li><li>与系�l�其他API或者其他系�l�交互，作�ؓ一�U�数据中转中�? </li><li>需要特定各式的输出视图而文本无法表�C�的 </li></ul><p>　　��M��Q�要认真评估两种表示方式的表�C�成本和效率�Q�选择合适的合理的表�C�方式。　　 </p><p>　　在关于AJAX的系列文章的下一��，我们��综合��用DOM和XML�Q�来实现一个可以持久化的简单留�a��ѝ��另外，�q�将试着模拟MSN Space的部分功能，来体会AJAX的魅力�?a name="a8"></a></p><a><strong>参考文章：</strong></a><br /><br /><table cellspacing="1" cellpadding="4" bgcolor="#000000"><tbody><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">fanscial</td><td valign="top" width="75">标题�Q?/td><td valign="top" width="416">《AJAX��介�?/td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">�|�址�Q?/td><td valign="top" width="641" colspan="3"><a href="/fanscial/archive/2005/08/31/11628.html" target="_blank">http://www.aygfsteel.com/fanscial/archive/2005/08/31/11628.html</a></td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">Amour GUO</td><td valign="top" width="75">标题�Q?/td><td valign="top" width="416">《AJAX内部交流文档�?/td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">�|�址�Q?/td><td valign="top" width="641" colspan="3"><a target="_blank">http://www.dragonson.com/doc/ajax.html</a></td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">MoztwWiki</td><td valign="top" width="75">标题�Q?/td><td valign="top" width="416">《AJAX上手��?/td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">�|�址�Q?/td><td valign="top" width="641" colspan="3"><a target="_blank">http://wiki.moztw.org/index.php/AJAX_%E4%B8%8A%E6%89%8B%E7%AF%87</a></td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">Philip McCarthy</td><td valign="top" width="75">标题�Q?/td><td valign="top" width="416">面向Java开发�h员的Ajax:构徏动态的Java应用�E�序</td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">�|�址�Q?/td><td valign="top" width="641" colspan="3"><a target="_blank">http://kb.csdn.net/java/Articles/200510/bed0423e-5297-49c9-9464-0e3eb733c8b5.html</a></td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">Philip McCarthy</td><td valign="top" width="75">标题�Q?/td><td valign="top" width="416">面向Java开发�h员的Ajax:Ajax的Java对象序列�?/td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">�|�址�Q?/td><td valign="top" width="641" colspan="3"><a target="_blank">http://kb.csdn.net/java/Articles/200510/a5b630cf-a2c2-46f1-8e3b-eadde723e734.html</a></td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">David Flanagan</td><td valign="top" width="75">书名�Q?/td><td valign="top" width="416">《Javascript权威指南�?/td></tr></tbody></table><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/zxfahjz/" target="_blank">zxf</a> 2006-08-15 16:46 <a href="http://www.aygfsteel.com/zxfahjz/archive/2006/08/15/63721.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div> </article> </main></body></html>

接口	nodeType帔R��	nodeType�?/td>	备注
Element	Node.ELEMENT_NODE	1	元素节点
Text	Node.TEXT_NODE	3	文本节点
Document	Node.DOCUMENT_NODE	9	document
Comment	Node.COMMENT_NODE	8	注释的文�?/td>
DocumentFragment	Node.DOCUMENT_FRAGMENT_NODE	11	document片断
Attr	Node.ATTRIBUTE_NODE	2	节点属�?/td>

�Ҏ��	描述
createAttribute()	用指定的名字创徏新的Attr节点�?/td>
createComment()	用指定的字符串创建新的Comment节点�?/td>
createElement()	用指定的标记名创建新的Element节点�?/td>
createTextNode()	用指定的文本创徏新的TextNode节点�?/td>
getElementById()	�q�回文档中具有指定id属性的Element节点�?/td>
getElementsByTagName()	�q�回文档中具有指定标记名的所有Element节点�?/td>

属�?/td>	描述
tagName	元素的标记名�U�ͼ�比如元素为P。HTML文档�q�回的tabName均�ؓ大写�?/td>

�Ҏ��	描述
getAttribute()	以字�W�串形式�q�回指定属性的倹{�?/td>
getAttributeNode()	以Attr节点的�Ş式返回指定属性的倹{�?/td>
getElementsByTabName()	�q�回一个Node数组�Q�包含具有指定标记名的所有Element节点的子孙节点，光��序�ؓ在文档中出现的顺序�?/td>
hasAttribute()	如果该元素具有指定名字的属性，则返回true�?/td>
removeAttribute()	从元素中删除指定的属性�?/td>
removeAttributeNode()	从元素的属性列表中删除指定的Attr节点�?/td>
setAttribute()	把指定的属性设�\|��ؓ指定的字�W�串��\|��如果该属性不存在则添加一个新属性�?/td>
setAttributeNode()	把指定的Attr节点��d��到该元素的属性列表中�?/td>

属�?/td>	描述
attributes	如果该节�Ҏ��一个Element�Q�则以NamedNodeMap形式�q�回该元素的属性�?/td>
childNodes	以Node[]的�Ş式存攑ֽ�前节点的子节炏V��如果没有子节点�Q�则�q�回�I�数�l��?/td>
firstChild	以Node的�Ş式返回当前节点的�W�一个子节点。如果没有子节点�Q�则为null�?/td>
lastChild	以Node的�Ş式返回当前节点的最后一个子节点。如果没有子节点�Q�则为null�?/td>
nextSibling	以Node的�Ş式返回当前节点的兄弟下一个节炏V��如果没有这��L��节点�Q�则�q�回null�?/td>
nodeName	节点的名字，Element节点则代表Element的标记名�U��?/td>
nodeType	代表节点的类型�?/td>
parentNode	以Node的�Ş式返回当前节点的父节炏V��如果没有父节点�Q�则为null�?/td>
previousSibling	以Node的�Ş式返回紧挨当前节炏V��位于它之前的兄弟节炏V��如果没有这��L��节点�Q�则�q�回null�?/td>

�Ҏ��	描述
appendChild()	通过把一个节点增加到当前节点的childNodes[]�l�，�l�文档树增加节点�?/td>
cloneNode()	复制当前节点�Q�或者复制当前节点以及它的所有子孙节炏V�?/td>
hasChildNodes()	如果当前节点拥有子节点，则将�q�回true�?/td>
insertBefore()	�l�文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在�Q�则删除之再插入到它的位�\|��?/td>
removeChild()	从文档树中删除�ƈ�q�回指定的子节点�?/td>
replaceChild()	从文档树中删除�ƈ�q�回指定的子节点�Q�用另一个节�Ҏ��换它�?/td>

免费人成黄页在线观看忧物,日本伊人久久,日本久久亚洲电影