




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
1、作者:王宇為大家寫了一個(gè)簡單的ajax制作實(shí)例,純手工編寫AJAX引擎大家要是有什么問題,給我發(fā)Email:warensoft 如果想了解更多關(guān)于DotNet方面的技術(shù)資料,文章以及視頻,請(qǐng)到本團(tuán)隊(duì)的主頁:實(shí)例需求:利用Ajax技術(shù)實(shí)現(xiàn)一個(gè)頁面不刷新的,并且驗(yàn)證一個(gè)用戶名是否被注冊(cè)過的過程。要求:在頁面中添加一個(gè)文本框標(biāo)簽用于輸入用戶名,添加一個(gè)按鈕用于提交用戶數(shù)據(jù)。驗(yàn)證的結(jié)果被直接打印在頁面上。操作步驟如下:1)打開Visual Studio(筆者使用的是Visual Studio2008 Beta2,因?yàn)閂S2008在頁面的布局方面更好控制),建立一個(gè)網(wǎng)站,如圖2-5
2、所示。圖2-5新建立一個(gè)網(wǎng)站項(xiàng)目建立好之后,大家會(huì)看到VS2008中基本上已經(jīng)將Express Web的功能集成,可以將HTML的設(shè)計(jì)視圖和HTML的代碼進(jìn)行上下分開顯示。如圖2-6所示。圖2-6 VS2008的編輯窗口2)在VS2008工具箱的HTML欄中添加一個(gè) 控件及 控件。如圖2-7所示。圖2-7 添加表單控件3) 在<Head></Head>中加入<script type ="text/javascript"></script>標(biāo)簽,以便進(jìn)行Ajax引擎的編寫,并在基本定義一個(gè)XMLHttpRequest對(duì)象,但是并
3、不進(jìn)行初始化操作。如圖2-8所示。圖2-8 添加新標(biāo)簽3)定義兩個(gè)函數(shù)Validation()及OnMessageBack(),前者用于初始化XMLHttpRequest對(duì)象,后者則在服務(wù)器的數(shù)據(jù)返回被調(diào)用。在Validation()函數(shù)中加入如下Javascript代碼:/實(shí)例化XMLHttpRequest對(duì)象 xmlhttp =new ActiveXObject ("Microsoft.XMLHTTP");
4、; /找到名為“Text1”的文本框 var name=document .getElementById ("Text1"); /利用Open方法向指定URL /查詢字符串“name”將文本框中的數(shù)據(jù)傳送到目標(biāo)頁面 xmlhttp .open(
5、"Post","default.aspx?name="+name.value); /設(shè)置當(dāng)服務(wù)器響應(yīng)返回時(shí)用于處理響應(yīng)的函數(shù)名 xmlhttp .onreadystatechange=OnMessageBack; /送發(fā)請(qǐng)求
6、 xmlhttp .send(null);代碼添加完畢后,Html頁面內(nèi)容如圖2-9所示。圖2-9 添加代碼4)添加OnMessageBack()函數(shù)的內(nèi)容。代碼如下:function OnMessageBack() /判斷請(qǐng)求狀態(tài)及HTTP狀態(tài)是否都能滿足條件 if (xmlhttp .readystate=4&&xmlhttp .status=200)
7、0; /將返回的文本打印到頁面上 document .write (xmlhttp .responsetext); 代碼添加完畢后,Html頁面內(nèi)容如圖
8、2-9所示。圖2-10添加代碼5) 下面為Button1添加事件代碼,將其標(biāo)簽修改為<input id="Button1" type="button" onclick ="Validation()" value="button" />6)頁面中的Ajax引擎已經(jīng)編寫完畢。在圖2-10所示的第18行代碼中,大家可以看到該用戶名是通過一個(gè)名為“name”的查詢字符串進(jìn)行傳遞的,該查詢字符串傳遞到服務(wù)器后需要進(jìn)行后臺(tái)處理,因此,要對(duì)“Default.aspx.cs”中的Page_Load方法添加一些ADO.NET代碼。這里的數(shù)據(jù)庫使用的是“Northwind”示例數(shù)據(jù)庫。如圖2-11所示。圖2-11 后臺(tái)C#代碼這里要注意,當(dāng)服務(wù)器利用Response.Write()方法向客戶端發(fā)出響應(yīng)后,客戶端的Ajax引擎就截獲該響應(yīng)流,并在我們事先定義的“OnMessageBack()”方法中進(jìn)行處理。7)下面按F5進(jìn)行調(diào)試。在文本框中輸入“ALFKI”,點(diǎn)擊按鈕,頁面中會(huì)顯示“該用戶名已經(jīng)被占用
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- it耗材采購合同范本
- 勞動(dòng)服務(wù)合同范本
- 包辦野餐服務(wù)合同范本
- 農(nóng)業(yè)水費(fèi)征收合同范本
- 勞務(wù)咨詢派遣合同范本
- 東易日盛設(shè)計(jì)合同范本
- 兼職領(lǐng)隊(duì)合同范本
- 單位內(nèi)部組織合同范本
- 出租鋼管吊籃合同范例
- 企業(yè)貸款借款合同范本
- H3C-CAS虛擬化平臺(tái)詳細(xì)介紹
- 小學(xué)生韻母in、ing常見漢字與區(qū)分練習(xí)
- 藥房品種類別及數(shù)量清單
- 機(jī)關(guān)檔案管理工作培訓(xùn)PPT課件
- 初中物理人教版八年級(jí)下冊(cè) 第1節(jié)牛頓第一定律 課件
- 網(wǎng)站培訓(xùn)內(nèi)容trswcm65表單選件用戶手冊(cè)
- 連續(xù)平壓熱壓機(jī) 三篇 俞敏等
- 空調(diào)系統(tǒng)維保記錄表格模板
- 打印版-圓與二次函數(shù)綜合題精練(帶答案)
- 各種閥門CAD圖
- 工程結(jié)算書標(biāo)準(zhǔn)
評(píng)論
0/150
提交評(píng)論