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 。