AJAX学习笔记（二）

最新推荐文章于 2024-11-03 23:16:52 发布

wkcgy

最新推荐文章于 2024-11-03 23:16:52 发布

阅读量490

点赞数

分类专栏： JavaScript 文章标签： ajax xmlhttprequest function javascript comments header

本文链接：https://blog.youkuaiyun.com/wkcgy/article/details/6216925

版权

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

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"></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" οnclick="startRequest('all');" /> <br /> <br /> <input type="button" value="View All Listed Northern States" οnclick="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"></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" οnclick="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>

这一部分相对来说比较难，但是尽快掌握。。。持续更新.....