ajax操作xml文件

最新推荐文章于 2021-08-06 00:55:35 发布

boyle0630

最新推荐文章于 2021-08-06 00:55:35 发布

阅读量885

点赞数

文章标签： xml ajax xmlhttprequest function comments properties

本文链接：https://blog.csdn.net/boyle0630/article/details/1902188

版权

本文介绍了一种使用JavaScript和XMLHttpRequest实现动态更新网页内容的方法。通过AJAX技术，可以在不重新加载整个页面的情况下从服务器获取数据并更新指定部分的内容。文中提供了两个示例，一个展示如何搜索价格范围内的房地产列表，并动态显示结果；另一个则演示了如何解析XML响应来列出特定条件的数据。

摘要由CSDN通过智能技术生成

<!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;
var price1;
var price2;
function createXMLHttpRequest()
{
    if (window.ActiveXObject)
  {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}
    else if (window.XMLHttpRequest)
  {xmlHttp = new XMLHttpRequest();}
}
function doSearch()
{
    price1=parseFloat(document.all("price1").value)
    price2=parseFloat(document.all("price2").value)
    if(price1 > price2)
    {
        var temp=price1;
        price1=price2;
        price2=temp;
    }
    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");   //span
    if(header.hasChildNodes())
  {header.removeChild(header.childNodes[0]);}
    var tableBody = document.getElementById("resultsBody"); //tbody
    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");
    var num=0;
    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;
        var priceval=price.substring(1)
        priceval=parseFloat(priceval.replace(',',''))
        comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;
        if(priceval>=price1 && priceval<=price2)
        {
            addTableRow(address, price, comments);
            num=num+1;
        }
    }
    var header = document.createElement("h2");
    var headerText = document.createTextNode("Results:");
    header.appendChild(headerText);
    if(num==0)
    {
        var noresultText=document.createTextNode("查無此價格的記錄！");
        header.appendChild(noresultText);
    }
    document.getElementById("header").appendChild(header);
    document.getElementById("resultsTable").setAttribute("border", "0");
}
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 name="price1">
   <option value="50000">$50,000</option>
   <option value="100000">$100,000</option>
            <option value="150000">$150,000</option>
        </select> to
        <select name="price2">
            <option value="100000">$100,000</option>
            <option value="150000">$150,000</option>
            <option value="200000">$200,000</option>
        </select>
    <input type="button" value="搜索" οnclick="doSearch();"/>
</form>
<span id="header"></span>
<table id="resultsTable" width="75%" border="0">
    <tbody id="resultsBody">
    </tbody>
</table>
</body>
</html>

<?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>$141,000</price>
        <comments>Close to schools, shopping, entertainment</comments>
    </property>
    <property>
        <address>98320 County Rd 113</address>
        <price>$155,000</price>
        <comments>Small acreage outside of town</comments>
    </property>
<property>
  <address>98320 County Rd 336</address>
  <price>$168,000</price>
  <comments>Small acreage outside of town</comments>
</property>
<property>
  <address>3388 Green Ave FT</address>
  <price>$150,000</price>
  <comments> shopping, entertainment</comments>
</property>
</properties>

二

<body>
    <h1>Process XML Document of U.S. States</h1><br/><br/>
    <form action="#">
        <input type="button" value="View All Listed States" οnclick="startRequest('all');"/>
        <br/><br/>
        <input type="button" value="View All Listed Northern States" οnclick="startRequest('north');"/>
    </form>
</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<states>
    <north>
        <state>Minnesota</state>
        <state>Iowa</state>
        <state>North Dakota</state>
    </north>
    <south>
        <state>Texas</state>
        <state>Oklahoma</state>
        <state>Louisiana</state>
    </south>
    <east>
        <state>New York</state>
        <state>North Carolina</state>
        <state>Massachusetts</state>
    </east>
    <west>
        <state>California</state>
        <state>Oregon</state>
        <state>Nevada</state>
    </west>
</states>