AJAX Follow Me

最新推荐文章于 2024-04-24 13:32:07 发布
最新推荐文章于 2024-04-24 13:32:07 发布
阅读量254 收藏
点赞数
分类专栏： AJAX 文章标签： ajax xmlhttprequest javascript 文档 attributes 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 描述
onreadystatechangeAn event handler for an event that fires at every state change
每次状态改变时除非的事件处理器
readyStateReturns the state of the object:

0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
返回对象的状态

0 = 未初始化
1 = 载入中
2 = 已载入
3 = 交互
4 = 完成

responseTextReturns the response as a string
将响应做为字符串返回
responseXMLReturns 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 节点树方法和属性进行检索分析
statusReturns the status as a number (e.g. 404 for "Not Found" or 200 for "OK")
将状态做为数字返回(例如 404 为"Not Found" 或者 200 为 "OK")
statusTextReturns the status as a string (e.g. "Not Found" or "OK")
将状态做为字符串返回(例如 "Not Found" 或者 "OK")

讲到这里首先必须要介绍一下 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 确保表单不会被浏览器同步提交. 完整的例子请看这里.

    　

    文档对象模型（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>等等。如下图： dom_tree.gif
    这个是不是跟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 使用指定的样式表将节点及其后代转换为对象

     

skytalemcc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX进阶学习(分类读取)[转]
Sumongh Zone
05-23 79
网上提的很多的一个新概念就是 AJAX 了, 那么, AJAX 是什么呢? 以下内容引用网上资料: AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几种技术： Ajax（Asynchronou...
Ajax 进阶
aliyun3的博客
04-13 147
在 Ajax 课程中，我们了解了最基本的异步处理方式。本章，我们将了解一下 Ajax 的 一些全局请求事件、跨域处理和其他一些问题。 一．加载请求 在 Ajax 异步发送请求时，遇到网速较慢的情况，就会出现请求时间较长的问题。而超 过一定时间的请求，用户就会变得不再耐烦而关闭页面。而如果在请求期间能给用户一些提 示，比如：正在努力加载中...，那么相同的请求时间会让用户体验更加的好一些。 jQuery 提供了两个全局事件，.ajaxStart()和.ajaxStop()。这两个全局事
利用AJAX显示根据分类显示子分类下拉列表，特殊情况显示多选框
追求专业
04-27 285
此文章为利用AJAX选择一个下拉列表的一个选项则，在下个一子下拉列表显示数据，或者是可以选择多个子类即显示多选框 1、freemaker jsp内容 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...
ajax进阶学习
loveSleepyCat的博客
04-24 224
ajax进阶学习 (node) 一、ajax概念： 异步的JavaScript和xml 在不重载整个页面的情况下局部刷新/更新数据的一个技术 ajax不是一个编程语音 而是一个更好更快以及交互性更强的一个web开发技术 二、简述ajax的执行过程（面试题） 获取ajax对象 XHLHttpRequest 通过ajax引擎确定请求路径和请求参数 通知ajax发送请求—ajax会在不刷新的...
【AJAX进阶】——概念
漫漫长途，终有回转；余味苦涩，终有回甘
12-10 709
前提         上一遍博客中主要介绍关于AJAX学习过程的一些理论知识，这篇文章从基础开始分析，毕竟AJAX是基础是HTTP请求，这篇文章也就是从HTTP请求开始。 HTTP请求 1、         建立TCP连接 2、         Web浏览器向Web服务器发送请求命令 3、         Web浏览器发送请求头信息 4、         Web服务器应答 5、
分类——ajax异步实现分类
weixin_33997389的博客
09-29 274
2019独角兽企业重金招聘Python工程师标准>>> ...
【Day 3】Ajax + Vue 项目、路由 + Nginx
Yudiannann的博客
04-20 859
异步的 JavaScript 和 XML通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等。
AJAX——图书管理案例
weixin_48719464的博客
04-20 664
自己的图书数据：给自己起个外号，并告诉服务器，默认会有三本书，基于这三本书做数据的增删改查。
【漏洞复现】泛微e-office系统ajax.php接口存在任意文件上传漏洞
失心少年
04-18 240
技术文章仅供参考，任何个人和组织使用网络应当遵守宪法法律，遵守公共秩序，尊重社会公德，不得利用网络从事危害国家安全、荣誉和利益，未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。本文所提供的工具仅用于学习，禁止用于其他！泛微 E-Office 9.5版本存在代码问题漏洞，泛微e-office系统ajax.php接口存在任意文件上传漏洞。漏洞链接：http://127.0.0.1/E-mobile/App/Ajax/ajax.php?
009 springboot整合mybatis-plus 增删改查 ajax 登录退出accessToken
m0_46695127的博客
04-18 1058
009 springboot整合mybatis-plus 增删改查 ajax 登录退出accessToken
AJAX——ajax原理
weixin_48719464的博客
04-21 632
定义：XMLHttpRequest（XHR）对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用。关系：axios内部采用XMLHttpRequest与服务器交互好处：掌握使用XHR与服务器进行数据交互，了解axios内部原理。
AJAX——案例_天气预报
weixin_48719464的博客
04-22 261
my-axios.js代码。index.css代码。index.html代码。reset.css代码。search.js代码。index.js代码。
Ajax和axios基础
最新发布
qq_55630615的博客
04-24 218
异步的JavaScript和XML。
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1454
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
ajax嵌套ajax
07-28
在前端开发中，可以使用Ajax嵌套Ajax来实现多个异步请求的依次执行。具体步骤如下： 1. 在第一个Ajax请求的回调函数中，发送第二个Ajax请求。可以使用`$.ajax()`方法或者其他类似的方法发送异步请求。 2. 在第二个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值