ASP.NET jQuery 食谱23 (jQuery AJAX实现调用页面后台方法和web服务定义的方法)

这节我们来看下如何实现AJAX调用页面后台方法和web服务定义的方法，下面通过验证用户的例子，先讲解如何调用页面后台方法，具体实现步骤如下：

1.新建Recipe23.aspx页面。

2.在该页面的后台文件Recipe23.aspx.cs中添加引用

using System.Web.Services;

3.定义静态数组和初始化数据

    public static string[] userNameArrray;

    protected void Page_Load(object sender, EventArgs e)
    {
        userNameArrray = new string[5] { "KenLee01", "KenLee02", "KenLee03", "KenLee04", "KenLee05" };
    }

4.定义验证用户名合法性的静态方法

 /// <summary>
    /// 验证用户是否合法
    /// </summary>
    /// <remarks>
    /// AJAX如果要直接调用该方法，需要添加[WebMethod()]，并定义为静态方法
    /// </remarks>
    /// <param name="sUserName">用户名</param>
    /// <returns>返回结果</returns>
    [WebMethod()]
    public static bool CheckUserName(string sUserName)
    {
        // 如果用户存在，就验证合法
        if (userNameArrray.Contains(sUserName))
        {
            return true;
        }

        return false;
    }

5.在Recipe.aspx里面实现界面结构代码如下

<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
        <asp:Button ID="btnCheck" runat="server" Text="验证用户" />
    </div>
    </form>

6.在Recipe.aspx里面实现AJAX调用页面后台用户验证方法CheckUserName的脚本代码如下

<script type="text/javascript">
        $(function () {
            $("#btnCheck").click(function (e) {
                e.preventDefault();

                // 首先判断用户名是否为空，并给出提示
                if ($("#txtUserName").val() == "") {
                    alert("请输入用户名！");
                }
                else {
                    sendData($("#txtUserName").val());
                }
            });

            // 定义一个AJAX请求方法
            function sendData(sUserName) {
                // 访问页面后台方法
 var loc = window.location.href;
 $.ajax({
 type: "POST",
                    url: loc + "/CheckUserName",
                    // sUserName要跟请求方法CheckUserName定义的参数名称要保持一致
                    // json数据格式是由一对键值构成，如{"name1":"value1", "name2":"value2"}
                    data: '{ "sUserName": "' + sUserName + '"}',
                    // 发送信息至服务器时内容编码类型
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        // AJAX响应被包装到一个d对象里，如{"d":true}, 
                        // 因此需要用到msg.d来获取请求返回的布尔值
                        if (msg.d) {
                            alert("验证用户成功！");
                        }
                        else {
                            alert("验证用户失败！");
                        }
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        alert("AJAX错误：" + errorThrown);
                    }
                });
            }
        });
    </script>

7.运行程序后显示页面如下：

8.输入用户名KenLee10:

9.输入用户名KenLee01:

10.还可以通过Firebug观察AJAX请求响应的数据，请求数据如下：

11.请求响应的JSON数据：

下面再来看下AJAX如何调用Web服务：

1.创建Web服务用户验证的文件UserNameWS.asmx，必须添加[System.Web.Script.Services.ScriptService]，实现用户验证代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
///UserNameWS 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 
[System.Web.Script.Services.ScriptService]
public class UserNameWS : System.Web.Services.WebService {

    public UserNameWS () {

        //如果使用设计的组件，请取消注释以下行 
        //InitializeComponent(); 
    }

    /// <summary>
    /// 验证用户是否合法
    /// </summary>
    /// <remarks>
    /// AJAX如果要直接调用该方法，需要添加[WebMethod()]，并定义为静态方法
    /// </remarks>
    /// <param name="sUserName">用户名</param>
    /// <returns>返回结果</returns>
    [WebMethod]
    public bool CheckUserName(string sUserName)
    {
        string[] userNameArrray = new string[5] { "KenLee01", "KenLee02", "KenLee03", "KenLee04", "KenLee05" };
        // 如果用户存在，就验证合法
        if (userNameArrray.Contains(sUserName))
        {
            return true;
        }

        return false;
    }
}

2.修改Recipe23.aspx的脚本代码sendData函数,只需修改loc访问地址：

// 定义一个AJAX请求方法
function sendData(sUserName) {
  // 访问页面后台方法
  // var loc = window.location.href;
  // 访问Web服务
  var loc = "UserNameWS.asmx";
........

简单完成上面两步，就可以直接调用web服务里面定义的方法了。具体显示的效果图，和上面介绍的AJAX访问页面方法的效果图是一样的，这里就不用重复写了。