三 与服务器通讯:发送请求和处理响应
1、XMLHttpRequest提供两个可以访问服务器响应的属性
responseText 将响应提供为一个串
responseXML 将响应提供为一个XML对象
2、使用innerHTML属性创建动态内容
HTML元素的innerHTML属性是一个简单的串,表示一组开始标记和结束标记之间的内容。
通过结合使用responseText和innerHTML,服务器就能“生产”或生成HTML内容,由浏览器使用innerHTML属性来“消费”或处理
事件触发 承上 创建XMLHttpRequest对象
(函数) 启下 XMLHttpRequest对象响应函数
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" <script type="text/javascript"> function startRequest(){ function handleStateChange(){ </head> <body> |
innerHTML.xml |
3、将响应解析为XML
Content-Type="text/plain" //将响应作为文本发送
Content-Type="text/xml" //将响应按XML格式发送
浏览器把XML看作是遵循W3C DOM的XML文档。
W3C DOM
DOM 文档对象模型,是与平台和语言无关的接口,允许程序或脚本动态地访问和更新文档的内容、结构和样式。
DOM是面向HTML和XML文档API,为文档提供了结构化的表示,并定义了如何通过脚本来访问文档结构。文档中每一个元素都是DOM的一部分,这就使得JavaScript可以访问元素的属性和方法。
<state>Minnesota</state>
在XML文档中,文本本身被认为是一个节点,值为“Minnesota”的文本实际上是state元素的子元素。所以必须先从state元素取得文本元素,再从这个文本元素得到其文本内容。
currentState.childNodes[0].nodeValue
当前元素state,取state的子元素文本,取文本的值。
childNodes | 返回当前元素所有子元素的数组 |
firstChild | 返回当前元素第一个下级子元素 |
lastChild | 返回当前元素的最有一个子元素 |
nextSibling | 返回紧跟在当前元素后面的元素 |
nodeValue | 指定表示元素的读/写属性 |
parentNode | 返回元素的父节点 |
previousSibling | 返回紧邻当前元素之前的元素 |
getElementById(id) |document) | 获取有指定唯一ID属性值文档中的元素 |
getElementByTagName(name) | 返回当前元素中有指定标记名的子元素的数组 |
hasChildNodes() | 返回一个布尔值,指示元素是否有子元素 |
getAttribute(name) | 返回元素的属性值,属性由name指定 |
document.createElement(tagName) | 文档对象上的 createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数,就会生成一个div元素 |
document.createTextNode(text) | 文档对象的createTextNode方法会创建一个包含静态文本的节点 |
<element>.appendChild(chiildNode) | 将指定的节点增加到当前元素的子节点列表(做未一个新的子节点)。例如可以增加一个option元素,作为select元素的子节点 |
<element>.getAttribute(name) | 获得元素中name属性 |
<element>.setAttribute(name,value) | 设置元素中name属性的值 |
<element>.insertBefore(newNode,targetNode) | 将节点newNode作为当前元素的子节点插到targetNode元素的前面 |
<element>.removeChild(childNode) | 从元素中删除属性name |
<element>.replaceChild(newNode,oldNode) | 将节点oldNode替换为节点newNode |
<element>.hasChildnodes() | 返回一个布尔值,指示元素是否有子元素 |
未完待续...