Ajax基础（二）

最新推荐文章于 2024-07-16 20:32:10 发布

zjxcs

最新推荐文章于 2024-07-16 20:32:10 发布

阅读量758

点赞数

分类专栏： Html 文章标签： ajax xmlhttprequest 文档 xml html function

本文链接：https://blog.csdn.net/zjxcs/article/details/1222785

版权

Html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

三与服务器通讯：发送请求和处理响应

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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using responseText with innerHTML</title>

function startRequest(){
    createXMLHttpRequest();
    xmlHttp.onreadystatechange=handleStateChange;
    xmlHttp.open("get","innerHTML.XML",true);
    xmlHttp.send(null);
}

function handleStateChange(){
    if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
           document.getElementById("results".innerHTML)=xmlHttp.responseText;
        }
    }
}
</script>

</head>

innerHTML.xml
<table border="1">
   <tbody>
      <tr>
         <th>Activity Name</th>
         <th>Location</th>
         <th>Time</th>
      </tr>
      <tr>
         <td>Waterskiing</td>
         <td>dock #1</td>
         <td>9:00 AM</td>
      </tr>
      <tr>
         <td>Volleyball</td>
         <td>East Court</td>
         <td>2:00 PM</td>
      </tr>
      <tr>
         <td>Hiking</td>
         <td>Trail 3</td>
         <td>3:30 PM</td>
      </tr>
   </tbody>
</table>

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的子元素文本，取文本的值。

附录1. 用于处理XML文档的DOM元素属性
childNodes	返回当前元素所有子元素的数组
firstChild	返回当前元素第一个下级子元素
lastChild	返回当前元素的最有一个子元素
nextSibling	返回紧跟在当前元素后面的元素
nodeValue	指定表示元素的读/写属性
parentNode	返回元素的父节点
previousSibling	返回紧邻当前元素之前的元素

附录2. 用于遍历XML文档的DOM元素方法
getElementById(id) \|document)	获取有指定唯一ID属性值文档中的元素
getElementByTagName(name)	返回当前元素中有指定标记名的子元素的数组
hasChildNodes()	返回一个布尔值，指示元素是否有子元素
getAttribute(name)	返回元素的属性值，属性由name指定

附录3. 动态创建内容时所用的W3C DOM属性和方法
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()	返回一个布尔值，指示元素是否有子元素

未完待续...

zjxcs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax基础（二）

三与服务器通讯：发送请求和处理响应1、XMLHttpRequest提供两个可以访问服务器响应的属性 responseText 将响应提供为一个串 responseXML 将响应提供为一个XML对象2、使用innerHTML属性创建动态内容HTML元素的innerHTML属性是一个简单的串，表示一组开始标记和结束标记之间的内容。通过结合使用responseText
复制链接

扫一扫