AJAX基础教程－3 Dynamic Content

js 代码

<script type=< span="">"text/javascript">
var xmlHttp;
//创建xmlHttp对象
    function createXMLHttpRequest() {
        if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
        }
    }
    //读取指定xml文件的操作
    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(); //解析结果集生成制定的html表单
            }
        }
    }

    //清除以前的结果集
    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>

xml 代码

<!---->xml version="1.0" encoding="UTF-8"?>
<properties>
<property>
<address>812 Gwyn Aveaddress>
<price>$100,000price>
<comments>Quiet, serene neighborhoodcomments>
property>
<property>
<address>3308 James Ave Saddress>
<price>$110,000price>
<comments>Close to schools, shopping, entertainmentcomments>
property>
<property>
<address>98320 County Rd 113address>
<price>$115,000price>
<comments>Small acreage outside of towncomments>
property>
properties>

• Dynamic Content.rar (1.7 KB)
• 下载次数: 13

分享到：

AJAX基础教程－4 GetAndPostExample | AJAX基础教程－2 ParseXML

• 2007-02-10 17:24
• 浏览 1070
• 评论(0)
• 查看更多

相关推荐

具有动态内容的jQuery模式对话框

在提供的压缩包文件中，`jQuery-Modal-Dialog-with-Dynamic-Content.pdf`可能是关于这个主题的详细教程或示例代码的文档，而`jQuery_SourceCode.zip`则可能包含了实现这一功能的源代码，你可以参考其中的实现细节，...

与web交换数据的原理讲解

例如，POST请求可以通过设置Content-Type为"application/json"，并将JSON数据作为请求体发送。 4. **接收JSON数据**：服务器端接收到JSON数据后，通过JSON库（如Java的Jackson或Gson）进行解析成对象，便于进一步...

网页制作完全手册

《网页制作完全手册》是一本综合性的教程，涵盖了HTML、DHTML和CSS等网页制作的基础到高级技术。这本书是为那些想要深入理解网页设计和开发的初学者和专业人士准备的，旨在提供一个全面的指导，帮助读者从零开始构建...