AJAX 学习笔记(6) 使用W3C DOM动态编辑页面

最新推荐文章于 2022-09-21 16:38:17 发布

apinghappy

最新推荐文章于 2022-09-21 16:38:17 发布

阅读量645

点赞数

分类专栏：开发文章标签： ajax c comments function properties header

本文链接：https://blog.csdn.net/apinghappy/article/details/1724543

版权

开发专栏收录该内容

93 篇文章 0 订阅

订阅专栏

6.使用W3C DOM动态编辑页面

dynamicContent.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Dymanically 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");
        addTableRow("address", "price", "comments");

        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.createElement("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,00</option>
<option value="100000">$100,00</option>
<option value="150000">$150,00</option>
</select>
to
<select>
<option value="100000">$100,00</option>
<option value="150000">$150,00</option>
<option value="200000">$200,00</option>
</select>
<input type="button" value="Search" οnclick="doSearch();" />
</form>

</body>
</html>

dynamicContent.xml

<?xml version="1.0" encoding="utf-8"?>
<properties>
<property>
  <address>812 GWYN Ave</address>
  <price>$100,00</price>
  <comments>Quiet, serene nigthborhood</comments>
</property>
<property>
  <address>3308, James Ave S</address>
  <price>$110,00</price>
  <comments>Close to school</comments>
</property>
<property>
  <address>98320 County Rd 130</address>
  <price>$115,00</price>
  <comments>Small acreage</comments>
</property>
</properties>