这节我们来看下如何实现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访问页面方法的效果图是一样的，这里就不用重复写了。
