解析AjaxPro與服務(wù)器端交互過程中如何傳值_AJAX教程
推薦：怎樣用AjaxPro實現(xiàn)二級聯(lián)動在實際asp.net項目中經(jīng)常會遇到無刷新二級或者N級(N=2)聯(lián)動情況，其實N級聯(lián)動和二級聯(lián)動的原理都是一樣的，實現(xiàn)這種辦法有很多，一種是純腳本實現(xiàn)（動態(tài)生成Array數(shù)組），一種 是采用微軟的Ajax.net中的UpdatePanel來實現(xiàn)，今天我給大家來展示如何采用AjaxPr
用asp.net開發(fā)Ajax有兩種主流，一種是微軟推出的技術(shù)，其中一個最常用的就是UpdatePanel控件，還有一種是AjaxPro技術(shù)。
這種技術(shù)有著各自的特點。采用微軟的技術(shù)開發(fā)也沿用了微軟一貫的簡單化、傻瓜化的特點，開發(fā)簡單Ajax程序幾乎不需要了解任何網(wǎng)頁腳本知識和XHTML知識，缺點也有一些，通常會帶來一些不必要的網(wǎng)絡(luò)流量（整個UpdatePanel控件內(nèi)所有的控件內(nèi)容都會提交），另外在VS2005下經(jīng)常會出現(xiàn)“***不是已知元素 原因可能是網(wǎng)站中存在編譯錯誤 ”的提示，雖然有治標(biāo)不治本的辦法，但是經(jīng)常出現(xiàn)這種提示，也夠讓人心煩的。
而AjaxPro的起點較高，需要開發(fā)人員孰知Js腳本知識和XHTML相關(guān)知識，因為所有的方法需要你自己編寫網(wǎng)頁腳本。開發(fā)速度相對會較慢一點，調(diào)試也會困難一點（JS調(diào)試就是麻煩）。
網(wǎng)上有不少講述怎么使用AjaxPro調(diào)用服務(wù)器端方法的例子，我大概看了一下，估計只有一個原本，然后被Copy了N遍，所以到處都是，可惜的是那篇文章里沒有降到如何把客戶端的數(shù)據(jù)傳送到服務(wù)器，比如我想在用戶注冊時那個用戶名是否被注冊了，怎么辦？
查看了網(wǎng)上雷同的N篇文章之后沒有找到答案，后來自己琢磨了很久，才琢磨出來，下面展示一下用法。
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>用戶注冊</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="95%" border="0" align="center" cellpadding="3" cellspacing="1" bordercolor="#FFFFFF" style="border-collapse: collapse">
<tr align="center">
<td height="20" colspan="2"> </td>
</tr>
<tr class="tdbg" >
<td width="50%"><b>用戶名：</b><BR>
不能超過14個字符（7個漢字）</td>
<td width="50%" align="left">
<asp:TextBox ID="txtUserName" runat="server" CssClass="input" Columns="30" MaxLength="14" onblur="javascript：checkName();void(0);"></asp:TextBox><div id="errorMsg"></div><font color="#FF0000">*</font>
</td>
</tr>
<tr class="tdbg" >
<td width="50%"><strong>年齡：</strong></td>
<td width="50%" align="left">
<asp:TextBox ID="txtAge" runat="server" CssClass="input" Columns="30" MaxLength="50" onblur="javascript：checkAge();void(0);"></asp:TextBox><div id="errorMsg1"></div></td>
</tr>
</table>
</div>
<script language="javascript" type="text/javascript" defer="defer">
function checkName()
{
var name=document.getElementById("<%=txtUserName.ClientID %>");
document.getElementById("errorMsg").style.display="block";
document.getElementById("errorMsg").style.color="red";
document.getElementById("errorMsg").innerText=Test.CheckUserName(""+name.value+"").value;
}
function checkAge()
{
var age=document.getElementById("<%=txtAge.ClientID %>");
document.getElementById("errorMsg1").style.display="block";
document.getElementById("errorMsg1").style.color="red";
document.getElementById("errorMsg1").innerText=Test.CheckAge(parseInt(age)).value;
}
</script>
</form>
</body>
</html>
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
/**
* 寫作說明：本文展示了如何利用AjaxPro與服務(wù)器交互，并且給服務(wù)器傳值的情況。
* 作者：周公
* 日期：2008-1-1
* 首發(fā)地址：http://blog.csdn.net/zhoufoxcn/
**/
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
}
AjaxPro.Utility.RegisterTypeForAjax(typeof(Test));//注冊
}
[AjaxPro.AjaxMethod]
public string CheckUserName(string name)
{
if (string.IsNullOrEmpty(name))
{
return "請?zhí)顚懹脩裘?quot;;
}
else if (ExistUserName(name))
{
return "該用戶名已被注冊";
}
else
{
return "可以注冊";
}
}
[AjaxPro.AjaxMethod]
public string CheckAge(int age)
{
if (age > 80 || age < 10)
{
return "別忽悠我了";
}
else
{
return "正常范圍";
}
}
//為簡化程序，這里將從數(shù)據(jù)庫檢查是否有重復(fù)的用戶名這一步簡單為一個方法
//可以在這里寫實際的數(shù)據(jù)庫檢查代碼
private bool ExistUserName(string name)
{
if (name.StartsWith("a") || name.StartsWith("c"))
{
return true;
}
else
{
return false;
}
}
}
function checkName()
{
var name=document.getElementById("<%=txtUserName.ClientID %>");
.......省略無關(guān)代碼
document.getElementById("errorMsg").innerText=Test.CheckUserName(""+name.value+"").value;
}
function checkAge()
{
var age=document.getElementById("<%=txtAge.ClientID %>");
.......省略無關(guān)代碼
document.getElementById("errorMsg1").innerText=Test.CheckAge(parseInt(age.value)).value;
}
</script>
public string CheckUserName(string name)
{
....//方法體略
}
[AjaxPro.AjaxMethod]
public string CheckAge(int age)
{
....//方法體略
}
其中[AjaxPro.AjaxMethod]表明它們是可以被js代碼所調(diào)用的，另外兩個方法需要的參數(shù)類型不同，一個是string類型，一個是int類型，而js中數(shù)據(jù)沒有類型的，因為都是var來聲明的，所以如何把參數(shù)值和參數(shù)類型傳給服務(wù)器還是一個麻煩問題。
查閱了資料，發(fā)現(xiàn)可以通過上述的方式解決：
Test.CheckUserName(""+name.value+"")，服務(wù)器就自動把參數(shù)值當(dāng)字符串類型來識別了；//""+參數(shù)值
Test.CheckAge(parseInt(age))，服務(wù)器就會把參數(shù)當(dāng)整數(shù)來識別了。//parseInt(參數(shù)值)
看看運行效果：
出錯效果：
正常效果：
最后，周公還要提醒大家一下，別忘了在Page_Load方法里調(diào)用AjaxPro.Utility.RegisterTypeForAjax(typeof(你的aspx頁面所依附的class名稱));這句話。另外有關(guān)AjaxPro的介紹請參考網(wǎng)上其它資料。
分享：如何用AjaxPro實現(xiàn)定時刷新效果在看本文之前，建議查看本人的系列文章： 《AjaxPro與服務(wù)器端交互過程中如何傳值》 《用AjaxPro實現(xiàn)二級聯(lián)動》，以便對AjaxPro有個初步印象。 說明：在Web開發(fā)中，有時候需要經(jīng)常更新某一部分內(nèi)容，如果不采用Ajax技術(shù)，就需要使用傳統(tǒng)的html技術(shù)，在head/h
- Ajax中瀏覽器的緩存問題解決方法
- AJAX和WebService實現(xiàn)省市縣三級聯(lián)動具體代碼
- ajax 登錄功能簡單實現(xiàn)(未連接數(shù)據(jù)庫)
- AJAX和WebService實現(xiàn)郵箱驗證(無刷新驗證郵件地址是否合法)
- AJAX和三層架構(gòu)實現(xiàn)分頁功能具體思路及代碼
- 使用AJAX返回WebService里的集合具體實現(xiàn)
- AJAX獲取服務(wù)器當(dāng)前時間及時間格式輸出處理
- ajax傳遞多個參數(shù)具體實現(xiàn)
- ajax傳遞一個參數(shù)具體實現(xiàn)
- 滑輪滾動到頁面底部ajax加載數(shù)據(jù)配合jsonp實現(xiàn)探討
- jQery ajax——load()方法示例介紹
- jQuery+Ajax實現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
- 相關(guān)鏈接：
- 教程說明：
AJAX教程-解析AjaxPro與服務(wù)器端交互過程中如何傳值
。