作者：王宇
為大家寫了一個簡單的ajax制作執行個體，純手工編寫AJAX引擎
大家要是有什麼問題，給我發Email：[email protected]
如果想了解更多關于DotNet方面的技術資料,文章以及視訊，請到本團隊的首頁：www.warensoft.cn
執行個體需求： 利用Ajax技術實作一個頁面不重新整理的，并且驗證一個使用者名是否被注冊過的過程。 要求： 在頁面中添加一個文本框标簽用于輸入使用者名，添加一個按鈕用于送出使用者資料。驗證的結果被直接列印在頁面上。 操作步驟如下： 1）打開Visual Studio（筆者使用的是Visual Studio2008 Beta2，因為VS2008在頁面的布局方面更好控制），建立一個網站，如圖2-5所示。
圖2-5建立立一個網站 項目建立好之後，大家會看到VS2008中基本上已經将Express Web的功能內建，可以将HTML的設計視圖和HTML的代碼進行上下分開顯示。如圖2-6所示。
圖2-6 VS2008的編輯視窗 2）在VS2008工具箱的HTML欄中添加一個
控件及
控件。如圖2-7所示。
圖2-7 添加表單控件 3) 在<Head></Head>中加入<script type ="text/javascript"></script>标簽，以便進行 Ajax引擎的編寫，并在基本定義一個XMLHttpRequest對象，但是并不進行初始化操作。如圖2-8所示。
圖 2-8 添加新标簽 3）定義兩個函數 Validation()及OnMessageBack(),前者用于初始化XMLHttpRequest對象，後者則在伺服器的資料傳回被調用。在Validation（）函數中加入如下Javascript代碼： // 執行個體化XMLHttpRequest對象 xmlhttp =new ActiveXObject ("Microsoft.XMLHTTP"); // 找到名為 “ Text1 ” 的文本框 var name=document .getElementById ("Text1"); // 利用Open方法向指定URL // 查詢字元串 “ name ” 将文本框中的資料傳送到目标頁面 xmlhttp .open("Post","default.aspx?name="+name.value); // 設定當伺服器響應傳回時用于處理響應的函數名 xmlhttp .onreadystatechange=OnMessageBack; // 送發請求 xmlhttp .send(null); 代碼添加完畢後，Html頁面内容如圖2-9所示。
圖2-9 添加代碼 4）添加OnMessageBack()函數的内容。代碼如下： function OnMessageBack() { // 判斷請求狀态及HTTP狀态是否都能滿足條件 if (xmlhttp .readystate==4&&xmlhttp .status==200) { // 将傳回的文本列印到頁面上 document .write (xmlhttp .responsetext); } } 代碼添加完畢後，Html頁面内容如圖2-9所示。
圖2-10添加代碼 5） 下面為Button1添加事件代碼，将其标簽修改為 < input id="Button1" type="button" onclick ="Validation()" value="button" /> 6）頁面中的 Ajax引擎已經編寫完畢。在圖2-10所示的第18行代碼中，大家可以看到該使用者名是通過一個名為“name”的查詢字元串進行傳遞的，該查詢字元串傳遞到伺服器後需要進行背景處理，是以，要對“Default.aspx.cs”中的Page_Load方法添加一些ADO.NET代碼。這裡的資料庫使用的是“Northwind”示例資料庫。如圖2-11所示。
圖 2-11 背景C#代碼 這裡要注意，當伺服器利用 Response.Write()方法向用戶端發出響應後，用戶端的Ajax引擎就截獲該響應流，并在我們事先定義的“OnMessageBack()”方法中進行處理。 7）下面按 F5進行調試。在文本框中輸入“ALFKI”，點選按鈕，頁面中會顯示“該使用者名已經被占用，請使用其他使用者名！”，如圖2-12所示。
圖 2-12 測試一 再在文本框中輸入一個使用者名“ ABC”，會顯示“該使用者名可以使用”，如圖2-13所示。
圖 2-13 測試二 但是，在第二次測試時，大家會奇怪的發現頁面出現了兩組相同的表單。這是因為我們目前還沒有