Ajax 实现用户名是否存在 with ScriptManager

        网站的注册页面上面，经常会检查用户名的存在 ，有以下几种方法：

       1. 点提交按钮之后， 显示用户名是否存在

       2. 套用一个UpdatePanel， 在Textbox 的 TextChange 事件中处理 用户名是否存在事件

       3. 使用Ajax pro

  第1种方法：

    现在已经没有什么网站用了， 主要需要刷新页面之后，才能知道结果，用户体验很不好

  第2种方法：

     一个看起来是不用刷页面的方法， 其实还是有PostBack, 只不过是异步处理而已。

     最大的缺点：在下一个Textbox 中输入值得时候， 光标经常会飞。 主要原因是上面一个事件没有处理完，这个 输入事件不会及时的响应。

第3种方法：

   现在用的比较多的一个方法， 需要引入Ajax pro dll,  按里面的规则来实现， 感觉上很麻烦的，最不爽的事情是我按提供的sample， 不能实现相应的效果，所以就基本上没有使用。

在 ScriptManager 提供了 PageMethods 方法， 能够实现和 Ajax pro 一样的功能

为了能使用PageMethods ， 首先要在 ScriptManager  中设置 EnablePageMethods="true"

  < asp:ScriptManager ID = " ScriptManager1 "  runat = " server "  EnablePageMethods = " true "   />

我们的注册页面（Register.aspx），在 Register.aspx.cs 中加入检验用户名是否存在的静态方法

[WebMethod]
  public   static   bool  IsUserAvailable( string  username)
  ... {
     User user = GetUser(username);

      if (user == null)
       ...{
            return true;
        }
        else
        ...{
              return false;
        }
 }

这个静态方法一定要加上一个[WebMethod] 属性， 引用System.Web.Services 命名空间

定义页面属性， 停止输入的时候，检查用户名是否存在

  < asp:Label  ID ="lblUserName"  runat ="server"  AssociatedControlID ="UserName" > 用户名 </ asp:Label >
  < asp:TextBox  ID ="UserName"   runat ="server"  CssClass ="txt"  onkeyup ="usernameChecker(this.value);"   />
  < span  id ="spanAvailability" ></ span >
        

最后一步，也是最重要的一步，定义script

  < script type = " text/javascript " >
   var  usernameCheckerTimer;
    var  spanAvailability  =  $get( " spanAvailability " );

     function  usernameChecker(username) 
      ... {
          clearTimeout(usernameCheckerTimer);
           if (username.length == 0)
                spanAvailability.innerHTML = "";
           else
            ...{
                    spanAvailability.innerHTML = "<span style='color: #ccc;'>checking...</span>";
                    usernameCheckerTimer = setTimeout("checkUsernameUsage('" + username + "');", 750);
             }
       }

      function  checkUsernameUsage(username) 
      ... {
         // initiate the ajax pagemethod call
          // upon completion, the OnSucceded callback will be executed
              PageMethods.IsUserAvailable(username, OnSucceeded);
     }

       //  Callback function invoked on successful completion of the page method.
       function  OnSucceeded(result, userContext, methodName) 
       ... {
            if (methodName == "IsUserAvailable")
            ...{
                if (result == true)
                    spanAvailability.innerHTML = "<span style='color: DarkGreen;'>Available</span>";
                else
                    spanAvailability.innerHTML = "<span style='color: Red;'>Unavailable</span>";
             }
       }
  </ script >     

在checkUsernameUsage(username)方法中

使用了PageMethods.IsUserAvailable(username, OnSucceeded); 方法， 使用PageMethods 的时候无智能提示。 在javascript中的IsUserAvailable和后台的 相比多了一个 OnSucceeded方法，这个方法是必须要的， 不然你的返回结果无地方进行处理。

OnSucceeded 方法对IsUserAvailable 执行完之后进行处理。result 是返回的结果， methodName 是 后台调用方法的名字， 多个后台方法能共用一个OnSucceeded 。