繼續上一篇的內容
上一篇關于XMLHttpRequest 對象發送對服務器的請求只說到了用Get方式，沒有說Post方式的。那是因為要說Post方式就需要先說另外一個東西，那就是DOM（Document Object Model）文檔對象模型。JavaScript通過DOM讀取、改變或者刪除 HTML、XHTML 以及 XML中的元素，可以重構整個 HTML 文檔。可以添加、移除、改變或重排頁面上的項目，而且這樣的操作會馬上顯示在頁面上。另外，所有瀏覽器執行W3C 發布的 DOM 標準規范，DOM的跨瀏覽器的兼容問題也就不是問題了。
先來看看下面的這個HTML文檔
<html>
<head>
<title>文檔標題</title>
</head>
<body>
<h1>我的標題</h1>
<a href="">我的鏈接</a>
</body>
</html>
這個HTML文檔轉換成對象表示就是下圖這個DOM樹。
從這個樹就能看出來，HTML中的每一項對應到DOM中都是一個節點，包括屬性和文本。
而每個節點都包含某些信息的屬性。節點屬性包括下面三種：
- nodeName（節點名稱）
- nodeValue（節點值）
- nodeType（節點類型）
nodeName
nodeName 屬性含有某個節點的名稱。
- 元素節點的 nodeName 是標簽名稱
- 屬性節點的 nodeName 是屬性名稱
- 文本節點的 nodeName 永遠是 #text
- 文檔節點的 nodeName 永遠是 #document
注釋：nodeName 所包含的 XML 元素的標簽名稱永遠是大寫的
nodeValue
- 對于文本節點，nodeValue 屬性包含文本。
- 對于屬性節點，nodeValue 屬性包含屬性值。
nodeValue 屬性對于文檔節點和元素節點是不可用的。
nodeType
nodeType 屬性可返回節點的類型。
主要常用節點類型有下面幾種：
- 元素節點類型是1
- 屬性節點類型是2
- 文本節點類型是3
- 文檔節點類型是9
使用DOM從取得DOM對象開始，看看怎么訪問DOM對象本身吧：
var domTree = document;
實際中我們更多的是直接使用 document 而來表示DOM對象。
從這里開始，我們可以通過DOM對象訪問文檔中的所有內容了。
再看看取的節點所使用的方法吧。
我們重點來看看getElementById() 和 getElementsByTagName()
- document.getElementById("ID"); 返回通過 ID 指定的節點；
- document.getElementsByTagName("標簽名稱"); 返回指定的標簽名所有的節點（作為一個節點列表）；
在本文我們用到的主要用到的就是上面這些方法，具體詳細的內容可以上網搜索，或者可以到這里查看：具體的詳細信息可以看；
下面做一個簡單的例子，看看怎么使用DOM以Post方法發送內容給服務器，并把結果顯示出來。
看看這個HTML頁面
<html>
<head>
<title>AJAX and the DOM</title>
</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>
我們的目標就是簡單的把名字和年齡發送給服務器進行處理，并把結果顯示在result這個DIV中。
XMLHttpRequest 對象 就使用上一篇的方法創建，這里就不再多說了。
首先就是要取得名字和年齡的值
var name = document.getElementById("name").value; //取名字
var age = document.getElementById("age").value; //取年齡
然后再將名字和年齡按照通信格式拼接
var info = name+"|"+age; //簡單的將姓名和年齡用豎線分割交給服務器處理
好了，整理好要發送的內容，確定發送的地址，以及方式；看，這里就是用Post方式了，地址自然就是要進行處理服務器的地址了。
xmlhttp.open("Post","//localhost/WebForm1.aspx",true);
這個時候我們就可以使用send方法將info對象發送給服務器了。
xmlhttp.send(info);
處理返回的結果也很簡單了，直接把結果顯示在result中
var result = document.getElementById("result").firstChild;
xmlhttp.onreadystatechange = function (){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
result.nodeValue = xmlhttp.responseText;
}
}
順帶說一下，把結果顯示在result這個DIV中，為什么是 getElementById("result").firstChild 而不是直接getElementById("result")。這就跟開始時說的DOM對象有關系了，前面也說過，在DOM中文本也是一個節點，這里DIV中的文本就是result這個DIV的子節點，而又是唯一一個節點，所以用firstChild就可以取到了。
完整的頁面代碼
<html>
<head>
<title>AJAX and the DOM</title>
<script language="JavaScript">
var xmlhttp = false; //創建一個新變量 request 并賦值 false。使用 false 作為判斷條件，它表示還沒有創建 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","//localhost/WebForm1.aspx",true);
var name = document.getElementById("name").value; //取名字
var age = document.getElementById("age").value; //取年齡
var info = name+"|"+age; //簡單的將姓名和年齡用豎線分割交給服務器處理
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>
服務器端就做最近簡單的處理，代碼如下：
<%@ 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.InputStream,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%>
一個簡單的以Post方式發送的例子就完成了。
最后，在不同的情況需要使用setRequestHeader來修改請求頭來不是直接發送就可以了。
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：博客園
金喜正規買球 
110次
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線