`

4、将使用W3C DOM动态生成页面——ajax基础笔记

AjaxXMLJavaScriptXHTMLMicrosoft 
阅读更多

使用W3C DOM动态生成页面

dynamicContent.xml清单：

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

dynamicContent.html清单：

<!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;

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");
    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>
</head>

<body>
  <h1>Search Real Estate Listings</h1>
  
  <form action="#">
    Show listings from 
        <select>
            <option value="50000">$50,000</option>
            <option value="100000">$100,000</option>
            <option value="150000">$150,000</option>
        </select> 
        to 
        <select>
            <option value="100000">$100,000</option>
            <option value="150000">$150,000</option>
            <option value="200000">$200,000</option>
        </select> 
    <input type="button" value="Search" onclick="doSearch();"/>    
  </form>  
  
  <span id="header">
  
  </span>

  <table id="resultsTable" width="75%" border="0">
    <tbody id="resultsBody">
    </tbody>
  </table>
</body>
</html>

运行结果：


分享到：
| 3、将响应解析为XML——ajax基础笔记
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    w3c-dom.jar 包

    w3c-dom.jar 包 dom解析xml使用 包 免积分下载

    W3C DOM操作

    DOM W3C标准操作XML读取,添加,删除,修改的一些简单代码,希望在关键的时候能帮上大家解决一些问题,能帮上的话,请大家多多捧场,没帮上的话,还请大家多多指教,谢谢

    Ajax基础教程（扫描版）

    3.1.3 使用w3c dom动态编辑页面 45 3.2 发送请求参数 52 3.2.1 请求参数作为xml发送 59 3.2.2 使用json向服务器发送数据 64 3.3 小结 70 第4章 实现基本ajax技术 71 4.1 完成验证 71 4.2 读取响应首部 75 ...

    w3c 生成xml 文件

    w3c 生成xml 文件w3c 生成xml 文件w3c 生成xml 文件

    动态创建html内容时所用的W3C DOM属性和方法

    动态创建html内容时所用的W3C DOM属性和方法

    w3school HTML DOM 中文教程

    w3school HTML DOM中文教程,网页格式，首页为index.html

    使用dom4j解析XML

    dom4j是一种解析XML文档的开放源代码XML框架。本文介绍如何使用包含在dom4j中的解析器创建并修改...与W3C DOM API相比，使用dom4j所包含的解析器的好处是dom4j拥有本地的XPath支持。DOM解析器不支持使用XPath选择节点。

    w3s dom+js+php+ 很多 教程

    w3s dom+js+php+ 很多 教程 w3s dom+js+php+ 很多 教程 w3s dom+js+php+ 很多 教程 w3s dom+js+php+ 很多 教程

    dom4j-1.6.1 + w3cschool.CHM离线帮助文档

    dom 解析技术是 W3C 组织制定的，而所有的编程语言都对这个解析技术使用了自己语言的特点进行实现。 Java 对 dom 技术解析标记也做了实现。 sun 公司在 JDK5 版本对 dom 解析技术进行升级：SAX（ Simple API for ...

    W3School Ajax教程

    W3School Ajax教程 Ajax 教程 整理的W3School Ajax教程

    DOM4J jar包和W3CSchool.chm的文档包含XPath的教程

    使用DOM4J解析xml的jar包和W3CSchool.chm的文档包含XPath的教程

    W3C DOM模型参考手册

    这不是DHTML的DOM模型参考手册，而是W3C的DOM模型。 该资料来源于Mozilla开发网站，目前Mozilla已经不再提供该文档的下载了。

    dom4j基础入门文档（SAX,DOM,XPATH）

    dom4j基础入门文档,与 W3C DOM API 相比，使用 dom4j 所包含的解析器的好处是 dom4j 拥有本地的 XPath 支持。

    w3c school完全学习手册

    这里要提供给大家的就是由该网站内容整理的CHM手册——离线版的W3C School网站，方便大家在Web开发时使用。 该手册包含了HTML、XHTML、CSS、XML、DOM、Javascript、Ajax、DHTML、Wap、PHP……等等众多技术的教程、...

    JavaScript DOM学习第一章 W3C DOM简介

    在这一章我主要介绍已经被新一代的浏览器所支持的W3C 第一级的DOM。对他的运作做一个大概的了解并且让你知道你可以对他们做什么。 首先是对于DOM的一些建议和DOM设计的目的，然后我会告诉你什么是节点（nodes）并且...

    从W3C School整理的最全的Web开发chm手册

    这里要提供给大家的就是由该网站内容整理的CHM手册——离线版的W3C School网站，方便大家在Web开发时使用。 该手册包含了HTML、XHTML、CSS、XML、DOM、Javascript、Ajax、DHTML、Wap、PHP……等等众多技术的教程、...

    ajax教程——w3school (1-2)

    本资源是下载自w3school的，因为是把整个网站下载下来了，所以ajax，javascript等等都在这里面 其他的几个资源只要标注有w3school的，都是这个资源，用为甚么用多个标签，就是希望大家都能找到这个资源 资源一共两个...

    w3c school Web 全套教程

    这里要提供给大家的就是由该网站内容整理的CHM手册——离线版的W3C School网站，方便大家在Web开发时使用。 该手册包含了HTML、XHTML、CSS、XML、DOM、Javascript、Ajax、DHTML、Wap、PHP……等等众多技术的教程、...

    详解JavaScript对W3C DOM模版的支持情况

    本文档对象模型允许访问所有的文档内容和...此外，这里是文档属性，可以使用W3C DOM访问列表：  文档方法在W3C DOM： 此模型支持所有传统DOM提供的方法。此外，这里是由W3C DOM支持的方法列表：  示例: 这是(访问

Magicbox
Global site tag (gtag.js) - Google Analytics