題記:
不久前在一份外國人的BLOG中看到這樣的論述,關於為什麼寫BLOG,他說是為了忘卻的記念,為了理解自己的思緒,為了讓自己的想法獲得一個檔案式的記憶.這樣說的很有道理.但是此篇文章,是譯自別人的技術文章.也許,也是為了忘卻的記念吧!
說明:
ASP.NET的頁面是基於回傳模式的,這也就竟味著,如果你想執行伺服器端的事件,在用戶端必須要回傳頁面.這種事件驅動模式,當然更強大,但是它必須每次回傳都要重寫頁面.現在的大多數瀏覽器都支援JS和DHTML.AJAX 模式就為了讓使用者有更智能的體驗到方便快捷的操作.在第一部分,我會用一人簡單的例子來解釋這個模型.
AJAX 是什麼?
它就是非同步JS和XML的縮寫.它不是一項新技術.IE, HTML, XML, DOM, XMLHTTP 已經存在並使用好多年,AJAX就是讓它們彼此分離的部分合到一起,來進行工作.
想像一下,如果有一個按鈕,標籤,和文字框的網頁,文字框來執按受一個ID,當你點擊BUTTON時會在標籤裡顯示相關ID 的使用者名稱,你會怎麼做?
你會在你的按鈕事件裡寫上獲得相關ID使用者資訊的過程,再促發一個回傳事件,可是你再想如果你的網頁上有很多控制項,那每次回傳都要重寫,是不是很費伺服器資源,當然會影響處理速度.
AJAX解決了這個問題.利用它你不再需要上頻繁的回傳網頁,相反你可以發送一個請求,在伺服器端處理,然後返回,相應的控制項也就會重寫,顯示所需要的值.
一方面,這種模式可以讓使用者有更好的體驗,並能提高速度,但是另一方面你要考慮你的瀏覽器是否支援JS.
一個簡單的例子:
為了體驗這種模式的工作方式,我們來作一個例子,這個例子包括兩個網頁,其中一個有一個按鈕和標籤,這個網頁將通過AJAX來調用第二個網頁.第二個網頁沒有使用者介面,不直接顯示內容.當LOAD頁面時它用來輸出"HELLO WORLD" ,這個字串會顯示在第一個表單的標籤上.
1> 用VS.NET 建立一個WEB應用程式
2> 添加一個表單,並放上按鈕和標籤各一個
3> 在寫LOAD事件中寫過程
Private Sub Page_Load(ByVal sender As System.Object,
ByVal e As System.EventArgs) Handles MyBase.Load
Button2.Attributes.Add("OnClick",
"return GetDataViaAJAX();")
If Page.IsPostBack Then
Label1.Text = "Server Date Time :" & DateTime.Now
End If
End Sub
在這我們要對這個按鈕添加一個用戶端處理事件,我們讓標籤顯示出伺服器的日期,但是它不會出現在標籤上,因為根本沒有回傳事件,這樣寫只是為了驗證一下,然後,在HTML分頁檔的<HEAD>裡面加上如下的JS方法:
var obj;
function GetDataViaAJAX()
{
try
{
obj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
obj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e1)
{
obj = null;
}
}
if(obj!=null)
{
obj.onreadystatechange = ProcessResponse;
obj.open("GET",
"http://localhost/AJAXDemo/helloworld.aspx", true);
obj.send(null);
}
return false;
}
在這我們執行個體化一個XMLHTTP類,這是AJAX模型的關鍵所在,它可以非同步擷取伺服器資源.TRY...CATCH塊是為了防止,MSXML不同版本而出現的異常.
該類onreadystatechange這個屬性是用來調用ProcessResponse方法,ProcessResponse這個方法用來處理獲得的資料,
然後,我們通過GET或是POST調用OPEN方法,最後執行SEND方法,假設你用POST方式可以傳遞參婁,而這裡用的是GET所以我們不用考慮參數.
function ProcessResponse()
{
if(obj.readyState == 4)
{
if(obj.status == 200)
{
var retval=obj.responseText;
alert(retval);
}
else
{
alert("Error retrieving data!" );
}
}
}
當第二個頁面傳回HELLOWORK時,這個ProcessResponse就會調用.檢驗RreadyState屬性值,如果是4代表請求完成,然後如果代碼狀態值是200,則表明OK.
最後我們通過responseText來獲得返回資料,還有一個responseXML屬性是用來獲得返回的XML資料(如果有的話)
下面添到第二個網頁上LOAD事件中的代碼:
Private Sub Page_Load(ByVal sender As System.Object,
ByVal e As System.EventArgs) Handles MyBase.Load
Response.Clear()
Response.Write("hello world")
Response.End()
End Sub
在這,首先清理RESPONE,發送一個字串.設定第一個頁為啟始頁,啟動項目,查看結果.
例子原始碼下載
總結:
在這篇文章中,我們看到了如何用AJAX來協助我們處理響應和提高效能.同樣,我們也看到了XMLHTTP component 是如何試水IE的.
在下一節,我會講述更詳細,更複雜的擷取XML的方法.
備忘:簽於個人水平,文章中難免有錯誤紕漏這處,敬請原諒!本文章轉譯自www.asp.net,不能用於商業用途,如果轉載請註明出處.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
