AJAX基础教程——学习笔记（三）

来源：互联网发布：aws和阿里云编辑：程序博客网时间：2024/05/01 10:42

使用W3C DOM动态编辑页面的属性和方法(p46)

document.createElement(tagName): 文档对象上的createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素

document.createTextNode(text): 文档对象的createTextNode方法会创建一个包含静态文本的节点

<element>.appendChild(childNode): 将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。例如，可以增加一个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(): 返回一个布尔值，指示元素是否有子元素

使用W3C DOM动态编辑页面

dynamicContent.xml

<?xml version="1.0" encoding="UTF-8"?>

<comments>Quiet,serene neighbordood</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>

</propertys>

dynamicContent.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>dynamicContent.html</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"); //得到ID是header的元素

if (header.hasChildNodes()) { //删除span元素的第一个（也是唯一的）子节点

header.removeChild(header.childNodes[0]);

}

var tableBody = document.getElementById("resultsBody");

while (tableBody.childNodes.length > 0) { //若tbody节点还有子节点（tr元素）

tableBody.removeChild(tableBody.childNodes[0]); //则删除第一个字子节点，直到再没有子节点为止

}

function parseResults() {

var results = xmlHttp.responseXML;

var property = null;

var address = "";

var price = "";

var comments = "";

var minPrice = document.all.minPrice.value;

var maxPrice = document.all.maxPrice.value;

var properties = results.getElementsByTagName("property"); //获得XML文档中所有property元素的数组

for (var i=0; i<properties.length; i++) { //获得property的address、price和comments里的文本内容

property = properties[i];

address = property.getElementsByTagName("address")[0].firstChild.nodeValue;

price = property.getElementsByTagName("price")[0].firstChild.nodeValue;

comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;

if (price!=minPrice && price<=maxPrice) {

addTableRow(address, price, comments);

}

var header = document.createElement("h2"); //创建一个<h2>元素

var headerText = document.createTextNode("Results:"); //创建内容是Results:的文本节点

header.appendChild(headerText); //将文本节点增加到<h2>元素中

document.getElementById("header").appendChild(header); //将<h2>节点增加<span id="header">中

document.getElementById("resultsTable").setAttribute("border","1"); //设置<table id="resultsTable">的border属性为1

}

//创建一个表行

function addTableRow (address, price, comments) {

var row = document.createElement("tr"); //创建<tr>元素

var cell = createCellWithText(address); //向tr元素追加一个新创建的td元素

row.appendChild(cell);

cell = createCellWithText(price);

row.appendChild(cell);

cell = createCellWithText(comments);

row.appendChild(cell);

document.getElementById("resultsBody").appendChild(row); //将创建好的行增加到表的tbody元素中

}

//创建表列

function createCellWithText(text) {

var cell = document.createElement("td");

var textNode = document.createTextNode(text);

cell.appendChild(textNode);

return cell;

}

//-->

</script>

</head>

<body>

<h1>Search Real Estate Listings</h1>

Show listings from

</select>

</select>

</tbody>

</table>

</form>

</body>

</html>