AJAX基础与实践(四)

yifeng

浏览: 53194 次
性别:
来自: 北京

最近访客更多访客>>

tttiiillll

darkread

squall

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

Ajax JavaScript XML HTML Microsoft

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"?>　　　　　　

　　　　<north>

　　　　　　　　<state>Minnesota</state>

　　　　　　　　<state>North　Dakota</state>

　　　　</north>

　　　　<south>

　　　　　　　　<state>Texas</state>

　　　　　　　　<state>Oklahoma</state>

　　　　　　　　<state>Louisiana</state>

　　　　</south> 　

　<east>

　　　　　　　　<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>

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>

</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"?>

<comments>Quiet, serene neighborhood</comments>

</property>

<address>3308 James Ave S</address>

<comments>Close to schools, shopping,entertainment</comments>

</property>

<address>98320 County Rd 113</address>

<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>

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>

</select> to

</select>

</form>

</table>

</body>

</html>

Ø 运行界面，点击“search”按钮，如下图：

Ø 总结：

1、在parseResults 函数中使用XMLHttpRequest对象的responseXML 属性得到的XML 文挡。

2、利用DOM方法来解析XML文档。

3、 addTableRow 函数建立一个表。

4、就这么多!你已经成功地读取了服务器返回的XML 文档，而且动态创建了一个结果表。

作者：周大庆（zhoudaqing）
网址：http://www.blogjava.net/yifeng
>>>转载请注明出处！<<<

分享到：

AJAX基础与实践(五) | AJAX基础与实践(三)

2008-08-26 02:42
浏览 742
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论