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
• 浏览 1035
• 评论(0)
• 查看更多

相关推荐

AJAX基础教程－6 Dynamic List

**AJAX基础教程－6 Dynamic List** 在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种不刷新整个页面即可更新部分网页内容的技术。在本教程中，我们将深入探讨如何利用AJAX实现动态列表（Dynamic List）...

Ajax-jQuery-Ajax-Dynamic-Select.zip

Ajax-jQuery-Ajax-Dynamic-Select.zip,从数据库中获取筛选记录的简单应用程序,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分...

AJAX基础教程－9 AutoComplete

**AJAX基础教程－9 AutoComplete** 在Web开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛用于实现页面的无刷新更新，提供更好的用户体验。本教程将聚焦于一个常见的应用场景——AutoComplete功能，它...

AJAX基础教程－5 Ajax Validate

**标题：“AJAX基础教程－5 Ajax Validate”** 在学习Web开发时，AJAX（Asynchronous JavaScript and XML）技术是一个重要的组成部分，它允许我们在不刷新整个页面的情况下与服务器进行交互，提升用户体验。本教程...

AJAX视频教程-冯威和源程序代码 ppt

AJAX视频教程-冯威和源程序代码 ppt 里面既有视频 也有源代码，需要的可以下载看看，绝不骗人，我分享的是百度云链接，不会失效

AJAX基础教程-AJAX编程(Javascript实现).rar

- **Ajax基础教程(做为字典最好了).chm**：这可能是一个关于AJAX基础的离线帮助文档，详细解释了AJAX的基本概念和技术点。 - **ajax教程.chm**：另一个AJAX教程，可能包含更多的示例和实践指导。 - **AJAX教程(威...

Ajax.基础教程-3

然而，基于标题“Ajax基础教程-3”以及描述中的相同关键词，我们可以推断出这部分文档应当是关于Ajax技术的教程系列的一部分。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够...

AJAX基础教程－8 Tool Tips

**AJAX基础教程－8 Tool Tips** 在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种不刷新整个页面即可更新部分网页内容的技术。在AJAX的帮助下，我们可以创建交互性更强、用户体验更好的Web应用程序。本...

AJAX基础教程－7 AutoRefresh Page

**标题解析：** "AJAX基础教程－7 AutoRefresh Page" 指的是一个关于使用AJAX技术实现页面自动刷新的教程。AJAX (Asynchronous JavaScript and XML) 是一种在无需重新加载整个网页的情况下更新部分网页内容的技术。...

Ajax 基础教程---第二部分压缩文件

一本不错的ajax基础书籍。

Ajax 基础教程---第一部分压缩文件

一本不错的ajax基础书籍。

Ajax 基础教程---第三部分压缩文件

一本不错的ajax基础书籍。