4、将使用W3C DOM动态生成页面——ajax基础笔记

最新推荐文章于 2022-05-24 22:26:21 发布

junJZ_2008

最新推荐文章于 2022-05-24 22:26:21 发布

阅读量96

点赞数

分类专栏： JavaScript 文章标签： Ajax XML JavaScript XHTML Microsoft ViewUI

JavaScript 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

使用W3C DOM动态生成页面

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

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>

<script type="text/javascript">
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.length > 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>
  <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>

运行结果：