AJAX基础教程——学习笔记(三)

原创 2007年09月14日 13:40:00

使用W3C DOM动态编辑页面的属性和方法(p46)

document.createElement(tagName):  文档对象上的createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数,就会生成一个div元素

 

document.createTextNode(text):  文档对象的createTextNode方法会创建一个包含静态文本的节点

 

<element>.appendChild(childNode):  将指定的节点增加到当前元素的子节点列表(作为一个新的子节点)。例如,可以增加一个option元素,作为select元素的子节点

 

<element>.getAttribute(name): 

<element>.setAttribute(name, value):  获得和设置元素中name属性的值

 

<element>.insertBefore(newNode, targetNode):  将节点newNode作为当前元素的子节点插到targetNode元素前面

 

<element>.removeAttribute(name):  从元素中删除属性name

 

<element>.removeChild(childNode):  从元素中删除子元素childNode

 

<element>.replaceChild(newNode, oldNode):  将节点oldNode替换为节点newNode

 

<element>.hasChildnodes():  返回一个布尔值,指示元素是否有子元素

 

 

 

使用W3C DOM动态编辑页面

dynamicContent.xml

<?xml version="1.0" encoding="UTF-8"?>

<propertys>

  <property>

    <address>812 Gwyn Ave</address>

    <price>100000</price>

    <comments>Quiet,serene neighbordood</comments>

  </property>

  <property>

    <address>3308 James Ave s</address>

    <price>110000</price>

    <comments>Close to schools,shopping,entertainment</comments>

  </property>

  <property>

    <address>98320 County Rd 113</address>

    <price>115000</price>

    <comments>Small acreage outside of town</comments>

  </property>

</propertys>

 

dynamicContent.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>dynamicContent.html</title>

   

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

   

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

   

    <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");    //得到IDheader的元素

        if (header.hasChildNodes()) {              //删除span元素的第一个(也是唯一的)子节点

          header.removeChild(header.childNodes[0]);

        }

       

        var tableBody = document.getElementById("resultsBody");

        while (tableBody.childNodes.length > 0) {      //tbody节点还有子节点(tr元素)

          tableBody.removeChild(tableBody.childNodes[0]);    //则删除第一个字子节点,直到再没有子节点为止

        }

      }

     

      function parseResults() {

        var results = xmlHttp.responseXML;

       

        var property = null;

        var address = "";

        var price = "";

        var comments = "";

       

        var minPrice = document.all.minPrice.value;

        var maxPrice = document.all.maxPrice.value;

       

        var properties = results.getElementsByTagName("property");  //获得XML文档中所有property元素的数组

        for (var i=0; i<properties.length; i++) {     //获得propertyaddresspricecomments里的文本内容

          property = properties[i];

          address = property.getElementsByTagName("address")[0].firstChild.nodeValue;

          price = property.getElementsByTagName("price")[0].firstChild.nodeValue;

          comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;

         

          if (price!=minPrice && price<=maxPrice) {

            addTableRow(address, price, comments);

          }

        }

       

        var header = document.createElement("h2");     //创建一个<h2>元素

        var headerText = document.createTextNode("Results:");   //创建内容是Results:的文本节点

        header.appendChild(headerText);     //将文本节点增加到<h2>元素中

        document.getElementById("header").appendChild(header);   //<h2>节点增加<span id="header">

       

        document.getElementById("resultsTable").setAttribute("border","1");    //设置<table id="resultsTable">border属性为1

      }

     

      //创建一个表行

      function addTableRow (address, price, comments) {

        var row = document.createElement("tr");     //创建<tr>元素

        var cell = createCellWithText(address);     //tr元素追加一个新创建的td元素

        row.appendChild(cell);

       

        cell = createCellWithText(price);

        row.appendChild(cell);

       

        cell = createCellWithText(comments);

        row.appendChild(cell);

       

        document.getElementById("resultsBody").appendChild(row);     //将创建好的行增加到表的tbody元素中

      }

     

      //创建表列

      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="minPrice">

          <option value="50000">$50,000</option>

          <option value="100000">$100,000</option>

          <option value="150000">$150,000</option>

        </select>

      to

         <select name="maxPrice">

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

     

      <span id="header"></span>

     

      <table id="resultsTable" width="75%" border="0">

        <tbody id="resultsBody">

        </tbody>

      </table>

    </form>

  </body>

</html>

 

相关文章推荐

Python学习笔记【三】——《python基础教程》:: 使用字符串

第3章 使用字符串

我的学习笔记——CSS基础教程

刚开始学习CSS,摘录给自己看嘚。。

《Python基础教程》学习笔记——列表

列表:Python的“苦力” 列表是序列的一种,它是可变的。list函数可以将其他序列转换为列表list1 = list('hello') print list1 list2 = list((1,2...

python基础教程_学习笔记13:标准库:一些最爱——sys

标准库:一些最爱 sys sys这个模块让你能够访问与python解释器联系紧密的变量和函数。 sys模块中一些重要的函数和变量 函数/变量 描述 argv 命令行参数,包括脚本名称 e...

《Python 基础教程》学习笔记——字典

字典:Python中唯一内建的映射类型-----------创建字典----------phonebook = {'Alice':'2341','Beth':'9102','Cecil':'3258'...

Python学习笔记【六】——《python基础教程》:: 抽象

第6章 抽象6.3. 创建函数 判断函数是否可调用。 Python3.0前,使用内建函数callable(func) Python3.0后,使用表达式hasattr(func, __call__)...

Python学习笔记【七】——《python基础教程》:: 更加抽象

python 更加抽象

python基础教程_学习笔记15:标准库:一些最爱——fileinput

标准库:一些最爱 fileinput 重要的函数 函数 描述 input([files[,inplace[,backup]]) 便于遍历多个...

《jQuery基础教程》学习笔记(一)——jQuery事件

《JQuery基础教程》学习笔记(一)——jQuery事件 一、事件处理程序综述 总的来说,jQuery用于响应网页的加载事件都是通过事件处理程序 $(document).ready() 来处...

Java基础教程学习笔记

以下内容是学习毕向东Java基础视频教程时做的笔记:下载笔记源文件 Java platform(平台)  版本: Java SE:Standard Edition  标准版            Ja...
  • luck638
  • luck638
  • 2013年01月25日 11:55
  • 566
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX基础教程——学习笔记(三)
举报原因:
原因补充:

(最多只允许输入30个字)