這節我們來看下如何實現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訪問頁面方法的效果圖是一樣的，這里就不用重復寫了。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
