*智能匹配*

Ajax(Asynchronous JavaScript and XML),按我的理解,就是异步执行的JavaScript and XML,它的核心是XMLHttpRequest,是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。它带给用户的体验就是页面无刷新。最简单的应用象Gmail中，发信时输入对方邮件地址时，出现的友好提示。

Ajax的网站：

ajax的google上的中文讨论组:

E文的：

接下来我做这样一个程序，在一个文本框中输入字符，文本框下边就提示最和它匹配的内容。效果类似Gmail的输入邮件地址时，下边出现的提示。在这儿，提示内容提取Sql server 2000的Northwind库customers表Country字段的内容。在数据未加载完成前，显示Loading...这样的提示。

1.先下载
解压后有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的节中加入：



意思是将ajaxpro路径下的文件扩展名为.ashx的文件的HTTP POST和HTTP GET请求映射到类AjaxPro.AjaxHandlerFactory，该类在文件AjaxPro.dll中的程序集AjaxPro中。

4.添加一个web窗体test.aspx，切换到cs文件,添加引用:

using System;
using System.Data;
using System.Data.SqlClient;

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 )
        {
            System.Threading.Thread.Sleep(1000);  //进程睡眠(延时)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(),""+inputString+"")+"
" ;  //把匹配的内容替换为红色显示
                    }
                }
                finally 
                {
                    myReader.Close();
                    conn.Close();
                }
            }  
            return temp;
        }

注意：在该方法前要加 [AjaxMethod]，还有
System.Threading.Thread.Sleep(1000);
为了看到loading的效果，我有意让进程延时1秒。

7. 进入test.aspx的html编辑视图，

中加入如下代码：

<div id="loadinfo" style="visibility:hidden;position:absolute;left:168px;top:19px;background-color:Red;color:White;font-family: Verdana;font-size: 12px;">Loadingdiv>
<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的区加入以下代码：

<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内定这么写的。参数b是一个bool值,当请求的类正在执行时，结果为true，否则为false。用一个三元表达式控制loading层(id为loadinfo)的显示和隐藏。
test.test.getData中,getData应该与后台代码中取数据的类名一致，但是注意一点，结果的返回用doTest2_callback函数的参数res按收。
在doTest2_callback(res)中，把获得的数据显示到Layer1层。这儿，当返回的内容为空时，Layer1层不显示。

9.完成后的完整代码 Ajaxtest.rar

10，编译运行程序。输入内容看一下效果。