艾伟：详解AJAX核心 —— XMLHttpRequest 对象 (下)
繼續(xù)上一篇的內(nèi)容
上一篇關(guān)于XMLHttpRequest 對象發(fā)送對服務(wù)器的請求只說到了用Get方式，沒有說Post方式的。那是因?yàn)橐fPost方式就需要先說另外一個(gè)東西，那就是DOM（Document Object Model）文檔對象模型。JavaScript通過DOM讀取、改變或者刪除 HTML、XHTML 以及 XML中的元素，可以重構(gòu)整個(gè) HTML 文檔。可以添加、移除、改變或重排頁面上的項(xiàng)目，而且這樣的操作會馬上顯示在頁面上。另外，所有瀏覽器執(zhí)行W3C 發(fā)布的 DOM 標(biāo)準(zhǔn)規(guī)范，DOM的跨瀏覽器的兼容問題也就不是問題了。
先來看看下面的這個(gè)HTML文檔
<html>??<head>
????<title>文檔標(biāo)題title>
??head>
??<body>
????<h1>我的標(biāo)題h1>
????<a?href="">我的鏈接a>
??body>
html>
這個(gè)HTML文檔轉(zhuǎn)換成對象表示就是下圖這個(gè)DOM樹。
從這個(gè)樹就能看出來，HTML中的每一項(xiàng)對應(yīng)到DOM中都是一個(gè)節(jié)點(diǎn)，包括屬性和文本。
而每個(gè)節(jié)點(diǎn)都包含某些信息的屬性。節(jié)點(diǎn)屬性包括下面三種：
- nodeName（節(jié)點(diǎn)名稱）
- nodeValue（節(jié)點(diǎn)值）
- nodeType（節(jié)點(diǎn)類型）
nodeName
nodeName 屬性含有某個(gè)節(jié)點(diǎn)的名稱。
- 元素節(jié)點(diǎn)的 nodeName 是標(biāo)簽名稱
- 屬性節(jié)點(diǎn)的 nodeName 是屬性名稱
- 文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
- 文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document
注釋：nodeName 所包含的 XML 元素的標(biāo)簽名稱永遠(yuǎn)是大寫的
nodeValue
- 對于文本節(jié)點(diǎn)，nodeValue 屬性包含文本。
- 對于屬性節(jié)點(diǎn)，nodeValue 屬性包含屬性值。
nodeValue 屬性對于文檔節(jié)點(diǎn)和元素節(jié)點(diǎn)是不可用的。
nodeType
nodeType 屬性可返回節(jié)點(diǎn)的類型。
主要常用節(jié)點(diǎn)類型有下面幾種：
- 元素節(jié)點(diǎn)類型是1
- 屬性節(jié)點(diǎn)類型是2
- 文本節(jié)點(diǎn)類型是3
- 文檔節(jié)點(diǎn)類型是9
使用DOM從取得DOM對象開始，看看怎么訪問DOM對象本身吧：
var?domTree?=?document;實(shí)際中我們更多的是直接使用 document 而來表示DOM對象。
從這里開始，我們可以通過DOM對象訪問文檔中的所有內(nèi)容了。
再看看取的節(jié)點(diǎn)所使用的方法吧。
我們重點(diǎn)來看看getElementById() 和 getElementsByTagName()
- document.getElementById("ID");? 返回通過 ID 指定的節(jié)點(diǎn)；
- document.getElementsByTagName("標(biāo)簽名稱"); 返回指定的標(biāo)簽名所有的節(jié)點(diǎn)（作為一個(gè)節(jié)點(diǎn)列表）；
在本文我們用到的主要用到的就是上面這些方法，具體詳細(xì)的內(nèi)容可以上網(wǎng)搜索，或者可以到這里查看：具體的詳細(xì)信息可以看http://www.w3school.com.cn/htmldom/index.asp；
下面做一個(gè)簡單的例子，看看怎么使用DOM以Post方法發(fā)送內(nèi)容給服務(wù)器，并把結(jié)果顯示出來。
看看這個(gè)HTML頁面
?<head>
??<title>AJAX?and?the?DOMtitle>
?head>
?<body>
??<div?id="Content">
???<input?type="text"?id?=?"name"?value="myname"?/>
???<br/>
???<input?type="text"?id?=?"age"?value="99"?/>
??div>
??<input?type="button"?value="Tell?me!"?/>
??<div?id?=?"result">div>
?body>
html>
我們的目標(biāo)就是簡單的把名字和年齡發(fā)送給服務(wù)器進(jìn)行處理，并把結(jié)果顯示在result這個(gè)DIV中。
XMLHttpRequest 對象 就使用上一篇的方法創(chuàng)建，這里就不再多說了。
首先就是要取得名字和年齡的值
var?age?=?document.getElementById("age").value;??//取年齡
然后再將名字和年齡按照通信格式拼接
var?info?=?name+"|"+age;?//簡單的將姓名和年齡用豎線分割交給服務(wù)器處理好了，整理好要發(fā)送的內(nèi)容，確定發(fā)送的地址，以及方式；看，這里就是用Post方式了，地址自然就是要進(jìn)行處理服務(wù)器的地址了。
xmlhttp.open("Post","http://localhost/WebForm1.aspx",true);這個(gè)時(shí)候我們就可以使用send方法將info對象發(fā)送給服務(wù)器了。
xmlhttp.send(info);處理返回的結(jié)果也很簡單了，直接把結(jié)果顯示在result中
var?result?=?document.getElementById("result").firstChild;xmlhttp.onreadystatechange?=?function?(){
?if(xmlhttp.readyState?==?4?&&?xmlhttp.status?==?200){
??result.nodeValue?=?xmlhttp.responseText;
?}
}
順帶說一下，把結(jié)果顯示在result這個(gè)DIV中，為什么是 getElementById("result").firstChild 而不是直接getElementById("result")。這就跟開始時(shí)說的DOM對象有關(guān)系了，前面也說過，在DOM中文本也是一個(gè)節(jié)點(diǎn)，這里DIV中的文本就是result這個(gè)DIV的子節(jié)點(diǎn)，而又是唯一一個(gè)節(jié)點(diǎn)，所以用firstChild就可以取到了。
完整的頁面代碼<html>
<head>
?<title>AJAX?and?the?DOMtitle>
?<script?language="JavaScript">
??var?xmlhttp?=?false;?//創(chuàng)建一個(gè)新變量?request?并賦值?false。使用?false?作為判斷條件，它表示還沒有創(chuàng)建?XMLHttpRequest?對象。?
??function?CreateXMLHttp(){
???if(window.XMLHttpRequest){
????xmlhttp?=?new?XMLHttpRequest();
???}
???else?if(window.ActiveXObject)
???{
????xmlhttp?=?new?ActiveXObject("Msxml2.XMLHTTP");?//較新版本的IE
????if(!xmlhttp)?{
????xmlhttp?=?new?ActiveXObject("Microsoft.XMLHTTP");?//較舊版本的IE
????}
???}
???return?xmlhttp;
??}
??xmlhttp?=?CreateXMLHttp();
??function?send()
??{
???xmlhttp.open("Post","http://localhost/WebForm1.aspx",true);
???var?name?=?document.getElementById("name").value;?//取名字
???var?age?=?document.getElementById("age").value;??//取年齡
???var?info?=?name+"|"+age;?//簡單的將姓名和年齡用豎線分割交給服務(wù)器處理
???var?result?=?document.getElementById("result").firstChild;
???xmlhttp.send(info);
???xmlhttp.onreadystatechange?=?function?(){
????if(newxmlhttp.readyState?==?4?&&?newxmlhttp.status?==?200){
?????result.nodeValue?=?newxmlhttp.responseText;
????}
???}
??}
?script>
head>
<body>
?<div?id="Content">
??<input?type="text"?id?=?"name"?value="myname"?/>
??<br/>
??<input?type="text"?id?=?"age"?value="99"?/>
?div>
?<input?type="button"?value="Test?me!"?onClick="send();"?/>
?<div?id?=?"result">div>
body>
html>
服務(wù)器端就做最近簡單的處理，代碼如下：
<%@?Page?language="c#"?AutoEventWireup="true"?%><script?language="C#"?runat="server">
public?string?result;
private?void?Page_Load(object?sender,?System.EventArgs?e)
{
?//?在此處放置用戶代碼以初始化頁面
?System.IO.StreamReader?sr?=?new?System.IO.StreamReader(Page.Request.Input
Stream,System.Text.Encoding.UTF8);
?string[]?gets?=?sr.ReadToEnd().Split('|');
?result?=?string.Format(@"Your?name?is?{0},{1}?years?old!",gets[0],gets[1]);
}
script>
<%=result%>
一個(gè)簡單的以Post方式發(fā)送的例子就完成了。
最后，在不同的情況需要使用setRequestHeader來修改請求頭來不是直接發(fā)送就可以了。
轉(zhuǎn)載于:https://www.cnblogs.com/waw/archive/2011/08/28/2156807.html
總結(jié)
以上是生活随笔為你收集整理的艾伟：详解AJAX核心 —— XMLHttpRequest 对象 (下)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 总结一下优化算法关系【压缩传感】【图像逆
- 下一篇： SpringBoot2.0 基础案例(0