AJAX进阶学习(分类读取)[转]

sumongh

浏览: 226426 次
性别:
来自: 武汉

最近访客更多访客>>

ItypeLeander

zzk_fj

jessyyao

pengjun170

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax JavaScript 应用服务器浏览器 XML

网上提的很多的一个新概念就是 AJAX 了, 那么, AJAX 是什么呢? 以下内容引用网上资料:

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几种技术：

Ajax（Asynchronous JavaScript + XML）的定义

基于 web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文

类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。

AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。

与传统的web应用比较

传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

关于 AJAX 提出者文档的翻译见这里: Ajax: A New Approach to Web Applications(中英对照) . 您可能想看看到底有什么很酷很炫的 Web 站点用到了 AJAX, 可以看这里: Google Suggest, Google Maps, 还有我个人做的一个小小的例子: AJAX Test.

AJAX 是一个新出现的名词, 但是引用的这几项技术都是老的存在了很久的技术, 甚至, 最大为推崇的 XMLHttpRequest 也不是 W3C 规范的一部分, 而是浏览器很早就内置的一个 JavaScript 对象. 这里的这几个概念中, 目前所见到的最多的应用就是异步更新页面内容这个所说的亮点了. 其他的几个概念: XHTML + CSS, DOM, XML + XSLT, 都是做 WEB 表示层用的很熟很熟的几个技术了(当然, 用 JavaScript 解析 XML 可能用的人不多).

那么, 我就直奔主题: 怎么来用 AJAX 来解决实际的问题了. 现在依然不行, 因为关键的东西还不够. 如前所述, 异步操作的魔法就是 XMLHttpRequest 对象了, 这个对象怎样实现异步?? 那么首先让我们了解一下 XMLHttpRequest(see also The XMLHttpRequest Object).

首先 XMLHttpRequest 对象并非一个 W3C 标准, 它只是主要浏览器都支持的可以通过 JavaScript 在客户端访问其他 URL 内容的一个对象. 所以很不幸的您创建它的时候必须根据不同的浏览器来创建它(所谓的跨平台脚本编写):

在 Mozilla, Firefox, Safari, 和 Netscape 中:

var xmlhttp=new XMLHttpRequest()

在 Internet Explorer 中:

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

那么接下来最常用到的代码就像下面这样:

<script>
if (xmlhttp)
    {
    xmlhttp.onreadystatechange=xmlhttpChange;
    xmlhttp.open("GET","http://www.somehost.com/test.htm",true);
    xmlhttp.send();
    }
}

function xmlhttpChange()
{
  // if xmlhttp shows "loaded"
  if (xmlhttp.readyState==4)
  {
  // if "OK"
  if (xmlhttp.status==200)
    {
    // ...some code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

注意: 上面例子中一个很重要的属性就是 onreadystatechange, 可以讲这个就是异步处理的关键. 这个属性是一个事件处理器, 当网络请求的每次状态改变时这个方法都被触发. 状态码从 0 (uninitialized, 未初始化) 到 4 (complete, 完成). 通过在方法 xmlhttpChange() 中我们检查状态改变, 我们可以告诉什么时候连接完成并且只在 HTTP 操作成功(返回代码为 200)的时候来进行必要的处理.

为什么我们要在例子中使用异步操作?

所有的例子中我们都使用异步(async)模式 (open() 的第三个参数设置为 true). 异步模式参数指定请求时被异步处理与否. true 表示脚本将会在 send() 方法被调用后继续执行, 不需要等待服务器的返回; false 则表示脚本必须等到服务器返回一个请求后才能继续执行, 这时候将会有问题发生, 因为如果此时有网络或者服务器故障发生, 或者请求需要花费很长时间完成, 这时候浏览器窗口将会没有任何反应(常说的界面死掉), 甚至会出现"服务器没有返回"这样的错误, 所以为了更好的用户体验, 尽量使用异步模式来设计您的代码. open() 方法的第二个参数是 URL 地址,

好了, 说了这么多, 您可能迫不及待的想运行一个真实的例子, 请试试这个例子: 在线读取 TXT 文本并且显示在当前页面 ajax1.htm, 所用到的文本文件 textfile1.txt.

源码查看页面源代码就可以得到了.

最后, 您可能希望熟悉一下 XMLHttpRequest 对象来为以后更好的利用它打下基础:

The XMLHttpRequest Object Reference XMLHttpRequest 对象参考

Methods 方法

Method 方法 Description 描述

abort()	Cancels the current request 取消当前请求
getAllResponseHeaders()	Returns the complete set of http headers as a string 将完整的 HTTP 头部做为一个字符串返回
getResponseHeader("headername")	Returns the value of the specified http header 返回给定的 HTTP 头的值
open("method","URL",async,"uname","pswd")	Specifies the method, URL, and other optional attributes of a request The method parameter can have a value of "GET", "POST", or "PUT" (use "GET" when requesting data and use "POST" when sending data (especially if the length of the data is greater than 512 bytes. The URL parameter may be either a relative or complete URL. The async parameter specifies whether the request should be handled asynchronously or not. true means that script processing carries on after the send() method, without waiting for a response. false means that the script waits for a response before continuing script processing 指定表单提交方法, URL, 以及请求的可选属性 method 参数可以是"GET", "POST" 或者 "PUT" 这些值中之一(使用"GET"来请求数据, 特别的, 当发送的数据长度大于512字节时使用 "POST"). URL 参数可以为相对的和完整的 URL. async 参数指定请求是否为异步方式处理. true 意味着调用 send() 方法后脚本继续向下执行, 不需要等待响应. false 意味着脚本将等待响应之后才能继续执行
send(content)	Sends the request 发送请求
setRequestHeader("label","value")	Adds a label/value pair to the http header to be sent 在要发送的 HTTP 头中添加标签/取值

Properties 属性

Property 属性 Description 描述

onreadystatechange	An event handler for an event that fires at every state change 每次状态改变时除非的事件处理器
readyState	Returns the state of the object: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete 返回对象的状态 0 = 未初始化 1 = 载入中 2 = 已载入 3 = 交互 4 = 完成
responseText	Returns the response as a string 将响应做为字符串返回
responseXML	Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties 将响应做为XML返回. 这个属性返回一个 XML 文档对象, 可以用 W3C 的 DOM 节点树方法和属性进行检索分析
status	Returns the status as a number (e.g. 404 for "Not Found" or 200 for "OK") 将状态做为数字返回(例如 404 为"Not Found" 或者 200 为 "OK")
statusText	Returns the status as a string (e.g. "Not Found" or "OK") 将状态做为字符串返回(例如 "Not Found" 或者 "OK")

**************************************************************************************************************************

AJAX入门介绍 - (2) GET 和 POST 配合表单

讲到这里首先必须要介绍一下 HTTP 协议和 GET, POST 的工作方式.

当用户在Web浏览器地址栏中输入一个带有http://前缀的URL并按下Enter后,或者在Web页面中某个以http://开头的超链接上单击鼠标,HTTP事务处理的第一个阶段--建立连接阶段就开始了.HTTP的默认端口是80.
随着连接的建立,HTTP就进入了客户向服务器发送请求的阶段.客户向服务器发送的请求是一个有特定格式的ASCII消息,其语法规则为:

< Method > < URL > < HTTP Version > <\n>
{ <Header>:<Value> <\n>}*
<\n>
{ Entity Body }

    请求消息的顶端是请求行,用于指定方法,URL和HTTP协议的版本,请求行的最后是回车换行.方法有GET,POST,HEAD,PUT,DELETE等.
在请求行之后是若干个报头(Header)行.每个报头行都是由一个报头和一个取值构成的二元对,报头和取值之间以":"分隔;报头行的最后是回车换行.常见的报头有Accept(指定MIME媒体类型),Accept_Charset(响应消息的编码方式),Accept_Encoding(响应消息的字符集),User_Agent(用户的浏览器信息)等.
    在请求消息的报头行之后是一个回车换行,表明请求消息的报头部分结束.在这个\n之后是请求消息的消息实体(Entity Body).
     Web服务器在收到客户请求并作出处理之后,要向客户发送应答消息.与请求消息一样,应答消息的语法规则为:

< HTTP Version> <Status Code> [<Message>]<\n>
{ <Header>:<Value> <\n> } *
<\n>
{ Entity Body }

应答消息的第一行为状态行,其中包括了HTTP版本号,状态码和对状态码进行简短解释的消息;状态行的最后是回车换行.状态码由3位数字组成,有5类:

1XX 保留

2XX 表示成功

3XX 表示URL已经被移走

4XX 表示客户错误

5XX 表示服务器错误

例如:415,表示不支持改媒体类型;503,表示服务器不能访问.最常见的是200,表示成功.常见的报头有:Last_Modified(最后修改时间),Content_Type(消息内容的MIME类型),Content_Length(内容长度)等.
在报头行之后也是一个回车换行,用以表示应答消息的报头部分的结束,以及应答消息实体的开始.
下面是一个应答消息的例子:

HTTP/1.0 200 OK
Date: Moday,07-Apr-97 21:13:02 GMT
Server:NCSA/1.1
MIME_Version:1.0
Content_Type:text/html
Last_Modified:Thu Dec 5 09:28:01 1996
Coentent_Length:3107

<HTML><HEAD><TITLE>...</HTML>

那么 GET 和 POST 有什么区别? 区别就是一个在 URL 请求里面附带了表单参数和值, 一个是在 HTTP 请求的消息实体中. 用下面的例子可以很容易的看到同样的数据通过GET和POST来发送的区别, 发送的数据是 username=张三 :

　GET 方式, 浏览器键入 http://localhost?username=张三

GET /?username=%E5%BC%A0%E4%B8%89 HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*
Accept-Language: zh-cn
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)
Host: localhost
Connection: Keep-Alive

POST 方式:

POST / HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*
Accept-Language: zh-cn
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)
Host: localhost
Content-Length: 28
Connection: Keep-Alive

username=%E5%BC%A0%E4%B8%89

比较一下上面的两段文字, 您会发现 GET 方式把表单内容放在前面的请求头中, 而 POST 则把这些内容放在请求的主体中了, 同时 POST 中把请求的 Content-Type 头设置为 application/x-www-form-urlencoded. 而发送的正文都是一样的, 可以这样来构造一个表单提交正文:

encodeURIComponent(arg1)=encodeURIComponent(value1)&encodeURIComponent(arg2)=encodeURIComponent(value2)&.....

注: encodeURIComponent 返回一个包含了 charstring 内容的新的 String 对象（Unicode 格式），所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替，其中 xx 等于表示该字符的十六进制数。例如，空格返回的是 "%20" 。字符的值大于 255 的用 %uxxxx 格式存储。参见 JavaScript 的 encodeURIComponent() 方法.

下面就讨论一下如何在 JavaScript 中执行一个 GET 或者 POST 请求. 如果您用过 Java, 那么您可能熟悉下列的用 java.net.URLConnection 类进行 POST 操作的代码(参考 Java Tip 34: POSTing via Java ):
　

URL url;

            URLConnection urlConn;

            DataOutputStream printout;

            // URL of CGI-Bin or jsp, asp script.

            url = new URL ("somepage");

            // URL connection channel.

            urlConn = url.openConnection();

            // ......

            // No caching, we want the real thing.

            urlConn.setUseCaches (false);

            // Specify the content type.

            urlConn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");

            // Send POST output.

            printout = new DataOutputStream (urlConn.getOutputStream ());

            String content = "name=" + URLEncoder.encode ("Buford Early") + "&email=" + URLEncoder.encode ("buford@known-space.com");

            printout.writeBytes (content);

            printout.flush ();

            printout.close ();

以上的代码向 somepage 发送了一次 POST 请求, 数据为 name = Buford Early, email = buford@known-space.com. 用JavaScript 来执行 POST/GET 请求是同样的原理, 下面的代码展示了分别用 XMLHttpRequest 对象向 somepage 用 GET 和 POST 两种方式发送和上例相同的数据的具体过程: GET 方式

var postContent =

            "name=" + encodeURIComponent("Buford Early") + "&email=" + encodeURIComponent("buford@known-space.com");

            xmlhttp.open("GET", "somepage" + "?" + postContent, true);

            xmlhttp.send(null);

POST 方式

var postContent =

            "name=" + encodeURIComponent("Buford Early") + "&email=" + encodeURIComponent("buford@known-space.com");

            xmlhttp.open("POST", "somepage", true);

            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            xmlhttp.send(postContent);

至此希望你已经能够理解如何用 JavaScript 中的 XMLHttpRequest 对象来执行 GET/POST 操作, 剩下的工作就是您如何来构造这些提交的参数了, 最后我给出一个将现有的 form 提交代码修改为异步的 AJAX 提交的代码(注意目前作者还不知道如何让 file 上传表单域也能异步上传文件). 首先请看两个 JavaScript 函数:

// form - the form to submit
            // resultDivId - the division of which to display result text in, in null, then
            // create an element and add it to the end of the body
            function ajaxSubmitForm(form, resultDivId) {
            var elements = form.elements;// Enumeration the form elements
            var element;
            var i;
            var postContent = "";// Form contents need to submit
            for(i=0;i<elements.length;++i) {
              	var element=elements[i];
            if(element.type=="text" || element.type=="textarea" || element.type=="hidden") {
            postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
            }
            else if(element.type=="select-one"||element.type=="select-multiple") {
            var options=element.options,j,item;
            for(j=0;j<options.length;++j){
            item=options[j];
            if(item.selected) {
                    	postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(item.value) + "&";
            		}
            }
            } else if(element.type=="checkbox"||element.type=="radio") {
            if(element.checked) {
                    	postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
            		}
            	} else if(element.type=="file") {
            		if(element.value != "") {
            			postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
            		}
            	} else {
            			postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
            	}
            }
            alert(postContent);
            ajaxSubmit(form.action, form.method, postContent);
            }
            // url - the url to do submit
            // method - "get" or "post"
            // postContent - the string with values to be submited
            // resultDivId - the division of which to display result text in, in null, then
            // create an element and add it to the end of the body
            function ajaxSubmit(url, method, postContent, resultDivId)
            {
            var loadingDiv = document.getElementById('loading');
            	// call in new thread to allow ui to update
            	window.setTimeout(function () {
            		loadingDiv.innerText = "Loading....";
            		loadingDiv.style.display = "";
            	}, 1);
            	// code for Mozilla, etc.
            	if (window.XMLHttpRequest)
            	{
            		xmlhttp=new XMLHttpRequest();
            	}
            	// code for IE
            	else if (window.ActiveXObject)
            	{
            		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            	}
            	if(xmlhttp) {
            		xmlhttp.onreadystatechange = function() {
            			// if xmlhttp shows "loaded"
            			if (xmlhttp.readyState==4)
            			{
            				if(resultDivId) {
            					document.getElementByID(resultDivId).innerHTML = xmlhttp.responseText;
            				} else {
            var result = document.createElement("DIV");
            result.style.border="1px solid #363636";
            result.innerHTML = xmlhttp.responseText;
            document.body.appendChild(result);
            				}
            			  	loadingDiv.innerHTML =
            				  "Submit finnished!";
            			}
            		};
            		if(method.toLowerCase() == "get") {
            			xmlhttp.open("GET", url + "?" + postContent, true);
            			xmlhttp.send(null);
            		} else if(method.toLowerCase() == "post") {
            			xmlhttp.open("POST", url, true);
            			xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            			xmlhttp.send(postContent);
            		}
            	} else {
            loadingDiv.innerHTML =
            		  "Can't create XMLHttpRequest object, please check your web browser.";
            	}
            }

函数 ajaxSubmitForm 将表单要提交的内容进行封装, 然后调用 ajaxSubmit 函数来执行真正的异步提交, 表单提交后所返回的结果则显示在给定的 DIV 容器中或者没有指定参数时用 DOM 对象动态生成一个 DIV 容器来显示结果并添加到页面末尾. 这样, 对原来的表单只需要改动一个地方就可以将原来的表单提交改为异步模式, 即在 form 标签里加入: onSubmit="ajaxSubmitForm(this);return false;" 即可, return false 确保表单不会被浏览器同步提交. 完整的例子请看这里.

**************************************************************************************************************************

AJAX 入门介绍 - (3) 整合 XML 和 DOM

文档对象模型（DOM）

文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。一般的，支持 Javascript的所有浏览器都支持DOM。本文所涉及的DOM，是指W3C定义的标准的文档对象模型，它以树形结构表示HTML和XML文档，定义了遍历这个树和检查、修改树的节点的方法和属性。

DOM眼中的HTML文档：树
　　在DOM眼中，HTML跟XML一样是一种树形结构的文档，< html>是根（root）节点，< head>、< title>、< body>是< html>的子（children）节点，互相之间是兄弟（sibling）节点；< body>下面才是子节点< table>、< span>、< p>等等。如下图：
这个是不是跟XML的结构有点相似呢。不同的是，HTML文档的树形主要包含表示元素、标记的节点和表示文本串的节点。

注: 在 FireFox 浏览器中, 您可以通过菜单"工具"->"DOM查看器"来浏览文档的DOM结构; IE 浏览器中您需要下载微软的 Internet Explorer Developer Toolbar 来查看 DOM, 在BrowserDevTool下载此工具.

HTML文档的节点

DOM下，HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。由于HTML文档的复杂性，DOM定义了nodeType来表示节点的类型。这里列出Node常用的几种节点类型：

接口 nodeType常量 nodeType值备注

Element	Node.ELEMENT_NODE	1	元素节点
Text	Node.TEXT_NODE	3	文本节点
Document	Node.DOCUMENT_NODE	9	document
Comment	Node.COMMENT_NODE	8	注释的文本
DocumentFragment	Node.DOCUMENT_FRAGMENT_NODE	11	document片断
Attr	Node.ATTRIBUTE_NODE	2	节点属性

DOM树的根节点是个Document对象，该对象的documentElement属性引用表示文档根元素的Element对象（对于HTML文档，这个就是<html>标记）。Javascript操作HTML文档的时候，document即指向整个文档，< body>、< table>等节点类型即为Element。Comment类型的节点则是指文档的注释。具体节点类型的含义，请参考《Javascript权威指南》，在此不赘述。

　　Document定义的方法大多数是生产型方法，主要用于创建可以插入文档中的各种类型的节点。常用的Document方法有：

方法描述

createAttribute()	用指定的名字创建新的Attr节点。
createComment()	用指定的字符串创建新的Comment节点。
createElement()	用指定的标记名创建新的Element节点。
createTextNode()	用指定的文本创建新的TextNode节点。
getElementById()	返回文档中具有指定id属性的Element节点。
getElementsByTagName()	返回文档中具有指定标记名的所有Element节点。

对于Element节点，可以通过调用getAttribute()、setAttribute()、removeAttribute()方法来查询、设置或者删除一个Element节点的性质，比如< table>标记的border属性。下面列出Element常用的属性：

属性描述 tagName 元素的标记名称，比如< p>元素为P。HTML文档返回的tabName均为大写。

　　Element常用的方法：

方法描述

getAttribute()	以字符串形式返回指定属性的值。
getAttributeNode()	以Attr节点的形式返回指定属性的值。
getElementsByTabName()	返回一个Node数组，包含具有指定标记名的所有Element节点的子孙节点，其顺序为在文档中出现的顺序。
hasAttribute()	如果该元素具有指定名字的属性，则返回true。
removeAttribute()	从元素中删除指定的属性。
removeAttributeNode()	从元素的属性列表中删除指定的Attr节点。
setAttribute()	把指定的属性设置为指定的字符串值，如果该属性不存在则添加一个新属性。
setAttributeNode()	把指定的Attr节点添加到该元素的属性列表中。

Attr对象代表文档元素的属性，有name、value等属性，可以通过Node接口的attributes属性或者调用Element接口的 getAttributeNode()方法来获取。不过，在大多数情况下，使用Element元素属性的最简单方法是getAttribute()和 setAttribute()两个方法，而不是Attr对象。

使用DOM操作HTML文档

　　Node对象定义了一系列属性和方法，来方便遍历整个文档。用parentNode属性和childNodes数组可以在文档树中上下移动；通过遍历childNodes数组或者使用firstChild和nextSibling属性进行循环操作，也可以使用lastChild和previousSibling进行逆向循环操作，也可以枚举指定节点的子节点。而调用appendChild()、insertBefore()、removeChild()、 replaceChild()方法可以改变一个节点的子节点从而改变文档树。

　　需要指出的是，childNodes的值实际上是一个NodeList对象。因此，可以通过遍历childNodes数组的每个元素，来枚举一个给定节点的所有子节点；通过递归，可以枚举树中的所有节点。下表列出了Node对象的一些常用属性和方法：

　　Node对象常用属性：

属性描述

attributes	如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。
childNodes	以Node的形式存放当前节点的子节点。如果没有子节点，则返回空数组。
firstChild	以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null。
lastChild	以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null。
nextSibling	以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null。
nodeName	节点的名字，Element节点则代表Element的标记名称。
nodeType	代表节点的类型。
parentNode	以Node的形式返回当前节点的父节点。如果没有父节点，则为null。
previousSibling	以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null。

　　Node对象常用方法：

方法描述

appendChild()	通过把一个节点增加到当前节点的childNodes组，给文档树增加节点。
cloneNode()	复制当前节点，或者复制当前节点以及它的所有子孙节点。
hasChildNodes()	如果当前节点拥有子节点，则将返回true。
insertBefore()	给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置。
removeChild()	从文档树中删除并返回指定的子节点。
replaceChild()	从文档树中删除并返回指定的子节点，用另一个节点替换它。

　　接下来，让我们使用上述的DOM应用编程接口，来试着操作HTML文档。

首先举一个最简单的例子, 用 DOM 动态生成一个 Loading 的 IMG 并加入页面中, 当页面完全载入后, 就移除这个 IMG 对象.


<script>
// create a loading img and add to page
var loadingImg = document.createElement("IMG");
loadingImg.src = "images/loading_xp.gif";
document.body.appendChild(loadingImg);
// After page loaded, we remove the loading image
document.body.onload = function() {
document.body.removeChild(loadingImg);
};
</script>

JavaScript 解析和生成 XML

用 JS 解析和生成 XML 一般都是使用 DOMDocument 这个对象, 下面简单的列出其属性和方法:

属性:

Attributes	存储节点的属性列表	(只读)
childNodes	存储节点的子节点列表	(只读)
dataType	返回此节点的数据类型
Definition	以DTD或XML模式给出的节点的定义	(只读)
Doctype	指定文档类型节点	(只读)
documentElement	返回文档的根元素	(可读写)
firstChild	返回当前节点的第一个子节点	(只读)
Implementation	返回XMLDOMImplementation对象
lastChild	返回当前节点最后一个子节点	(只读)
nextSibling	返回当前节点的下一个兄弟节点(只读)
nodeName	返回节点的名字	(只读)
nodeType	返回节点的类型	(只读)
nodeTypedValue	存储节点值	(可读写)
nodeValue	返回节点的文本	(可读写)
ownerDocument	返回包含此节点的根文档	(只读)
parentNode	返回父节点	(只读)
Parsed	返回此节点及其子节点是否已经被解析	(只读)
Prefix	返回名称空间前缀	(只读)
preserveWhiteSpace	指定是否保留空白	(可读写)
previousSibling	返回此节点的前一个兄弟节点	(只读)
Text	返回此节点及其后代的文本内容	(可读写)
url 返回最近载入的XML文档的URL	(只读)
Xml 返回节点及其后代的XML表示	(只读)

方法:

appendChild	为当前节点添加一个新的子节点,放在最后的子节点后
cloneNode	返回当前节点的拷贝
createAttribute	创建新的属性
createCDATASection	创建包括给定数据的CDATA段
createComment	创建一个注释节点
createDocumentFragment	创建DocumentFragment对象
createElement	创建一个元素节点
createEntityReference	创建EntityReference对象
createNode	创建给定类型,名字和命名空间的节点
createPorcessingInstruction	创建操作指令节点
createTextNode	创建包括给定数据的文本节点
getElementsByTagName	返回指定名字的元素集合
hasChildNodes	返回当前节点是否有子节点
insertBefore	在指定节点前插入子节点
Load	导入指定位置的XML文档
loadXML	导入指定字符串的XML文档
removeChild	从子结点列表中删除指定的子节点
replaceChild	从子节点列表中替换指定的子节点
Save	把XML文件存到指定节点
selectNodes	对节点进行指定的匹配,并返回匹配节点列表
selectSingleNode	对节点进行指定的匹配,并返回第一个匹配节点
transformNode	使用指定的样式表对节点及其后代进行转换
transformNodeToObject	使用指定的样式表将节点及其后代转换为对象

分享到：

AJAX进阶学习二：GET 和 POST 配合表单 | XML快速入门

2007-05-23 11:30
浏览 1556
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论