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

原创 2007年09月14日 13:38:00
 
DOM(p35)
DOM(文档对象模型)是一个W3C规约,可以以一种独立于平台的语言的方式访问和修改一个文档的内容和结构。换句话说,就是表示和处理一个HTML或XML文档的常用方法。
DOM的设计是以对象管理组织(OMG)的规约为基础的,可以用于任何编程语言。
DOM实际上是以面向对象方式描述的对象模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个数形表示。
 
 
 
 
使用innerHTML属性创建动态内容(p37)
       结合使用HTML元素的innerHTML属性,responseText属性就会变得非常有用。
       innerHTML属性是一个非标准的属性,是一个简单的串,表示一组开始标记和结束标记之间的内容。
       通过结合使用responseText和innerHTML,服务器就能“生产”或生成HTML内容,由浏览器使用innerHTML属性来“消费”或处理。
Document.getElementById(“results”).innerHTML = xmlHttp.responseText;
<div id=”results”></div>
 
 
 
W3C DOMJavaScript(p40)
       W3C提供的定义:文档对象模型(DOM)是与平台和语言无关的接口,允许程序和脚本动态地访问和更新文档的内容、结构和样式。文档可以进一步处理,处理的结果可以放回到所提供的页面中。
       W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM,JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分,这就使得JavaScript可以访问元素的属性和方法。
 
 
 
用于处理XML文档的DOM元素属性(p41)
ChildNodes: 返回当前元素所有子元素的数组
 
firstChild: 返回当前元素的第一个下级子元素
 
lastChild: 返回当前元素的最后一个子元素
 
nextSibling: 返回紧跟在当前元素后面的元素
 
nodeValue: 指定表示元素值的读/写属性
 
parentNode: 返回元素的父节点
 
previousSibling: 返回紧邻当前元素之前的元素
 
 
 
用于遍历XML文档的DOM元素方法(p41)
getElementById(id) (document): 获取有指定唯一ID属性文档中的元素
 
getElementsByTagName(name): 返回当前元素中有指定标记名的自元素的数组
 
hasChildNodes(): 返回一个布尔值,指示元素是否有子元素
 
getAttribute(name): 返回元素的属性值,属性由name指定
 
 
 
使用遵循W3C DOMJavaScript读取XML文档:
parseXML.xml
<?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>
 
parseXML.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
    <title>parseXML.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;
      var requestType = "";
     
      function createXMLHttpRequest() {
     
        if (window.ActiveXObject) {
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
          xmlHttp = new XMLHttpRequest();
       
      }
     
      function startRequest(requestedList) {
        requestType = requestedList;
        createXMLHttpRequest();
        xmlHttp.onreadystatechange = handleStateChange;
        xmlHttp.open("GET", "parseXML.xml", true);
        xmlHttp.send(null);
      }
     
      function handleStateChange() {
        if (xmlHttp.readyState == 4) {
          if (xmlHttp.status == 200) {
            if (requestType == "north") {
              listNorthStates();
            } else if (requestType == "all") {
              listAllStates();
            }
          }
        }
      }
     
      //得到所有的州
      function listAllStates() {
        var xmlDoc = xmlHttp.responseXML;            //得到服务器返回的XML文档
        //alert(xmlDoc.getElementsByTagName("states")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);
//alert(xmlDoc.getElementsByTagName("states")[0].firstChild.nextSibling.childNodes[0].childNodes[0].nodeValue);
//alert(xmlDoc.getElementsByTagName("states")[0].lastChild.previousSibling.childNodes[0].childNodes[0].nodeValue);
        var allStates = xmlDoc.getElementsByTagName("state");        //获取文档中所有标记名为state的元素
                                                          //getElementsByTagName返回包含所有state元素的数组
       
        outputList("All States in Document", allStates);
      }
     
      //得到北部地区的各个州
      function listNorthStates() {
        var xmlDoc = xmlHttp.responseXML;              //得到服务器返回的XML文档
        var northNode = xmlDoc.getElementsByTagName("north")[0];      //获得XML文档中的north元素
                                                             //getElementsByTagName方法返回一个数组
 
        var out = "Northern States";
        var northStates = northNode.getElementsByTagName("state");       //得到north元素的state子元素
       
        outputList("Northern States", northStates);
      }
     
      //从state元素获取州名
      /*
        在XML文档中,文本本身被认为是一个节点,而且必须是另外某个元素的子元素。
        由于表示州名的文本实际上是state元素的子元素,所以必须先从state元素获取文本元素,
        再从这个文本元素得到其文本内容
      */
      function outputList(title, states) {
        var out = title;
        var currentState = null;
        for (var i=0; i<states.length; i++) {
         currentState = states[i];            //通过迭代得到当前元素
          out = out + "/n- " + currentState.childNodes[0].nodeValue;     //childNodes属性得到文本元素
                                                                  //nodeValue属性返回表示州名的文本内容
        }
        alert(out);
      }
    //-->
    </script>
 </head>
 
 <body>
    <form action="#">
      <input type="button" value="all" onclick="startRequest('all');" />
      <input type="button" value="northern" onclick="startRequest('north');" />
    </form>
 </body>
</html>
 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

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

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

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

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

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

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

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

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

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

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

python 更加抽象

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

标准库:一些最爱 re re模块包含对正则表达式的支持,因为曾经系统学习过正则表达式,所以基础内容略过,直接看python对于正则表达式的支持。 正则表达式的学习,见《Mastering Reg...

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

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

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

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

Java基础教程学习笔记

以下内容是学习毕向东Java基础视频教程时做的笔记:下载笔记源文件 Java platform(平台)  版本: Java SE:Standard Edition  标准版         ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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