Ajax初体验(一)
Ajax(Asynchronous JavaScript and XML),按我的理解,就是異步執(zhí)行的JavaScript and XML,它的核心是XMLHttpRequest,是多種技術(shù)的綜合，包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。它帶給用戶的體驗(yàn)就是頁面無刷新。最簡(jiǎn)單的應(yīng)用象Gmail中，發(fā)信時(shí)輸入對(duì)方郵件地址時(shí)，出現(xiàn)的友好提示。
Ajax的網(wǎng)站：
http://www.schwarz-interactive.de/
ajax的google上的中文討論組:
http://groups.google.com/group/AjaxCn
E文的：
http://groups.google.com/group/ajaxpro
接下來我做這樣一個(gè)程序，在一個(gè)文本框中輸入字符，文本框下邊就提示最和它匹配的內(nèi)容。效果類似Gmail的輸入郵件地址時(shí)，下邊出現(xiàn)的提示。在這兒，提示內(nèi)容提取Sql server 2000的Northwind庫customers表Country字段的內(nèi)容。在數(shù)據(jù)未加載完成前，顯示Loading...這樣的提示。
1.先下載http://www.schwarz-interactive.de/download/5.11.4.2.zip
解壓后有AjaxPro.dll，AjaxPro.2.dll文件，AjaxPro.2.dll應(yīng)該是for .net 2.0的。
我用的是vs2003.net所以用AjaxPro.dll。
2.把AjaxPro.dll復(fù)制到web應(yīng)用程序的bin目錄，在項(xiàng)目中添加對(duì)AjaxPro.dll的引用
3.web.config的<system.web>節(jié)中加入：
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
</httpHandlers>
意思是將ajaxpro路徑下的文件擴(kuò)展名為.ashx的文件的HTTP POST和HTTP GET請(qǐng)求映射到類AjaxPro.AjaxHandlerFactory，該類在文件AjaxPro.dll中的程序集AjaxPro中。httpHandlers元素說明詳見msdn>>
4.添加一個(gè)web窗體test.aspx，切換到cs文件,添加引用:
using?System.Data;
using?System.Data.SqlClient;
using?AjaxPro;
5.Page_Load中注冊(cè):
private?void?Page_Load(object?sender,?System.EventArgs?e)????{???????????
?????????????????Utility.RegisterTypeForAjax(typeof(test));?
????}
此處test是Page_Load所在類的完整的命名空間(namespace test)。
6.從Sql server 2000的Northwind庫里面customers表中提出Country字段的內(nèi)容。
代碼如下：
????????public?string?getData(?string?inputString?)
????????{
????????????System.Threading.Thread.Sleep(1000);? //進(jìn)程睡眠(延時(shí))1秒
????????????string?temp?=?"";
????????????if?(inputString?!=?"")
????????????{
????????????????string?sqlStr?=?"SELECT?Country?FROM?Customers?where?Country?like?'%"?+inputString+"%'";
????????????????SqlConnection?conn?=?new?SqlConnection(@"server=.;database=NorthWind;User?ID=sa;password=123;Persist?Security?Info=true;");
????????????????SqlCommand?cmd?=?new?SqlCommand(sqlStr,conn);
????????????????conn.Open();
????????????????SqlDataReader?myReader?=?cmd.ExecuteReader();????
????????????????try?
????????????????{
????????????????????while?(myReader.Read())?
????????????????????{
????????????????????????temp?+=?myReader.GetString(0).ToLower().Replace(inputString.ToLower(),"<font?color=red>"+inputString+"</font>")+"<br>"?;? //把匹配的內(nèi)容替換為紅色顯示
????????????????????}
????????????????}
????????????????finally?
????????????????{
????????????????????myReader.Close();
????????????????????conn.Close();
????????????????}
????????????}??
????????????return?temp;
????????}
注意：在該方法前要加 [AjaxMethod]，還有
System.Threading.Thread.Sleep(1000);
為了看到loading的效果，我有意讓進(jìn)程延時(shí)1秒。
7. 進(jìn)入test.aspx的html編輯視圖，<form>中加入如下代碼：
<!--loading文字層,默認(rèn)隱藏--><div?id="loadinfo"?style="visibility:hidden;position:absolute;left:168px;top:19px;background-color:Red;color:White;font-family:?Verdana;font-size:?12px;">Loading</div>
<INPUT?type="text"?id="txtInput"?onKeyUp="javascript:doTest2();void(0);">
<!--顯示匹配內(nèi)容的層，默認(rèn)隱藏-->
<div?id="Layer1"?style="position:absolute;?left:10px;?top:38px;?width:150px;?height:102px;?z-index:1;?background-color:?#ECF5FF;?border:?1px?solid?#666666;?visibility:?hidden;overflow:?auto;"></div>
8.在test.aspx的<head>區(qū)加入以下代碼：
<script?type="text/javascript"?defer="defer">???test.test.onLoading?=?function(b)?{
???var?l?=?document.getElementById("loadinfo");????
???l.style.visibility?=?b???"visible"?:?"hidden";????
???}????
???function?doTest2()
???{
????test.test.getData(document.getElementById("txtInput").value,?doTest2_callback);
???}
???function?doTest2_callback(res)
???{
????var?p?=?res.value;
????var?layer1?=?document.getElementById("Layer1");
????layer1.style.visibility?=?(p?==?"")???"hidden"?:?"visible";
????document.getElementById("Layer1").innerHTML?=?p;
???}
</script>
其中test.test.onLoading是namespace.class.onLoading的格式，onLoading是ajax內(nèi)定這么寫的。參數(shù)b是一個(gè)bool值,當(dāng)請(qǐng)求的類正在執(zhí)行時(shí)，結(jié)果為true，否則為false。用一個(gè)三元表達(dá)式控制loading層(id為loadinfo)的顯示和隱藏。
test.test.getData中,getData應(yīng)該與后臺(tái)代碼中取數(shù)據(jù)的類名一致，但是注意一點(diǎn)，結(jié)果的返回用doTest2_callback函數(shù)的參數(shù)res按收。
在doTest2_callback(res)中，把獲得的數(shù)據(jù)顯示到Layer1層。這兒，當(dāng)返回的內(nèi)容為空時(shí)，Layer1層不顯示。
9.完成后的完整代碼 Ajaxtest.rar
10，編譯運(yùn)行程序。輸入內(nèi)容看一下效果。
轉(zhuǎn)載于:https://www.cnblogs.com/yao/archive/2006/01/13/316629.html
總結(jié)
以上是生活随笔為你收集整理的Ajax初体验(一)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [消息]C++ Connections
- 下一篇： 让心与心交融