AJAX基础教程——学习笔记（二）

 

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 DOM 和 JavaScript(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 DOM 的 JavaScript 读取 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 >