Ajax(Asynchronous JavaScript and XML),按我的理解,就是异步执行的JavaScript and XML,它的核心是XMLHttpRequest,是多种技术的综合,包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。它带给用户的体验就是页面无刷新。最简单的应用象Gmail中,发信时输入对方邮件地址时,出现的友好提示。
Ajax的网站:
http://www.schwarz-interactive.de/
ajax的google上的中文讨论组:
http://groups.google.com/group/AjaxCn
E文的:
http://groups.google.com/group/ajaxpro
接下来我做这样一个程序,在一个文本框中输入字符,文本框下边就提示最和它匹配的内容。效果类似Gmail的输入邮件地址时,下边出现的提示。在这儿,提示内容提取Sql server 2000的Northwind库customers表Country字段的内容。在数据未加载完成前,显示Loading...这样的提示。
1.先下载http://www.schwarz-interactive.de/download/5.11.4.2.zip
解压后有AjaxPro.dll,AjaxPro.2.dll文件,AjaxPro.2.dll应该是for .net 2.0的。
我用的是vs2003.net所以用AjaxPro.dll。
2.把AjaxPro.dll复制到web应用程序的bin目录,在项目中添加对AjaxPro.dll的引用
3.web.config的<system.web>节中加入:
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
</httpHandlers>
意思是将ajaxpro路径下的文件扩展名为.ashx的文件的HTTP POST和HTTP GET请求映射到类AjaxPro.AjaxHandlerFactory,该类在文件AjaxPro.dll中的程序集AjaxPro中。httpHandlers元素说明详见msdn>>
4.添加一个web窗体test.aspx,切换到cs文件,添加引用:
using
System;
using
System.Data;
using
System.Data.SqlClient;
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using
AjaxPro;
5.Page_Load中注册:
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字段的内容。
代码如下:
[AjaxMethod]
public
string
getData(
string
inputString )
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
System.Threading.Thread.Sleep(1000); //进程睡眠(延时)1秒
string temp = "";
if (inputString != "")
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
while (myReader.Read())
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
temp += myReader.GetString(0).ToLower().Replace(inputString.ToLower(),"<font color=red>"+inputString+"</font>")+"<br>" ; //把匹配的内容替换为红色显示
}
}
finally
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
myReader.Close();
conn.Close();
}
}
return temp;
}
注意:在该方法前要加 [AjaxMethod],还有
System.Threading.Thread.Sleep(1000);
为了看到loading的效果,我有意让进程延时1秒。
7. 进入test.aspx的html编辑视图,<form>中加入如下代码:
<!--
loading文字层,默认隐藏
-->
<
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);"
>
<!--
显示匹配内容的层,默认隐藏
-->
<
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>区加入以下代码:
<
script type
=
"
text/javascript
"
defer
=
"
defer
"
>
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
test.test.onLoading
=
function
(b)
{
var l = document.getElementById("loadinfo");
l.style.visibility = b ? "visible" : "hidden";
}
function
doTest2()
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
test.test.getData(document.getElementById("txtInput").value, doTest2_callback);
}
function
doTest2_callback(res)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
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内定这么写的。参数b是一个bool值,当请求的类正在执行时,结果为true,否则为false。用一个三元表达式控制loading层(id为loadinfo)的显示和隐藏。
test.test.getData中,getData应该与后台代码中取数据的类名一致,但是注意一点,结果的返回用doTest2_callback函数的参数res按收。
在doTest2_callback(res)中,把获得的数据显示到Layer1层。这儿,当返回的内容为空时,Layer1层不显示。
9.完成后的完整代码 Ajaxtest.rar
10,编译运行程序。输入内容看一下效果。
![testajax-1.gif](https://i-blog.csdnimg.cn/blog_migrate/b8ba4b0760db73aa9e2a597122a937ab.gif)
![testajax-2.gif](https://i-blog.csdnimg.cn/blog_migrate/968594b247f5499f4751370f3a4515fa.gif)