一个简单的例子先-CSDN博客

本文链接：https://blog.csdn.net/elia1208/article/details/5283685

在WebContent下做成下面的文件

1,dynamicContent.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<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; // callback函数
    xmlHttp.open("GET", "dynamicContent.xml", true);
    xmlHttp.send(null);
}

function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            clearPreviousResults();
            parseResults();
        }
    }
}

function parseResults() {
    var results = xmlHttp.responseXML;
    var property = null;
    var address = "";
    var price = "";
    var comments = "";
    var priceFrom = "";
    var priceTo = "";
    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.replace(",","").replace("$","");
        comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;
        priceFrom = parseInt(document.getElementById("priceFrom").value);
        priceTo = parseInt(document.getElementById("priceTo").value);
        price = parseInt(price);

        if(price >= priceFrom && price <= priceTo){
        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 id="priceFrom">
            <option value="50000">$50,000</option>
            <option value="100000">$100,000</option>
            <option value="150000">$150,000</option>
        </select>
        to
        <select id="priceTo">
            <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>

2。dynamicContent.xml

<?xml version="1.0" encoding="UTF-8"?>
<properties>
    <property>
        <address>812 Gwyn Ave</address>
        <price>$80,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>$15,000</price>
        <comments>Small acreage outside of town</comments>
    </property>
</properties>