ajax 前台js调用后台方法
2013-08-03 22:49
585 查看
1.先把Ajax.dll添加引用到项目中，在项目上右击，菜单上有个[添加引用]，然后一步一步把那个.DLL文件添加进来，之后你会在项目的引用中看到那个Ajax.dll就是添加成功了
2.修改Web.config。在 <system.web> 元素中添加以下代码。这里的Ajax.dll和Ajaxpro.dll引用方法是不一样的，一定要注意
<configuration>
<system.web>
<httpHandlers>
<!-- Ajax.dll的配置文件写法为,我下载到的是这个 -->
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
<!-- AjaxPro.dll的配置文件写法为，根据你下载到的DLL文件选择不同的配置语句-->
<add verb="*" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
</httpHandlers>
</system.web>
</configuration>
3对AjaxPro用到的页Page_Load事件中进行运行时注册。如：
protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(_Default));//是Ajax.dll的
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));//Ajaxpro.dll的
}
//这的_Default是指页面类的类名,就是这个页面的名字。如是放在命名空间，则需要写上完整的命名空间（如：namespaces._Default）
4创建服务器端方法
[Ajax.AjaxMethod]//这句一定要有，如果你是Ajaxpro.dll就写成[AjaxPro.AjaxMethod]
public string getValue(int a,int b)
{
//该方法我们将实现从客户端传入两个数，在服务器端相加计算后返回到客户端。这里可以写在原来的页后台中也可以单独写一个类。
return Convert.ToString(a+b);//这里返回的就是前台得到的值，反正参数已经进CS文件了，想怎么操作就怎么操作，包括读库都可以。
}
5 客户端调用。
<%@ Page language="c#" Codebehind="WebPage1.aspx.cs" AutoEventWireup="false" Inherits="Web.WebPage1" %>
<script language="javascript">
function getValue()
{
//这里如果是AjaxPro.dll就加Web._Default.getValue,如果是Ajax.dll就不用加命名空间如下
_Default.getValue(1,2,getGroups_callback);//该处即调用服务器端的_Default.getValue方法。
//_Default就是写getValue的那个类，如果写在本页CS里就是WebPage1.getValue，1和2是参数。
//这在里边getGroups_callback指定的是个回调函数，以接受服务器端处理完后返回客户端结果。
}
//这个方法用户接受并处理服务器端返回的结果。
function getGroups_callback(response)
{
var dt=response.value;//这个值就是最终传回来的值，想怎么用就怎么用，反正回前台了。
document.getElementById("Div_1").innerHTML=dt;
}
</script>
<body>
<div id="Div_1"> </div>
<button onclick=getValue()>开始 </botton>
</body>
现在我们来分析一下如果点击开始按钮都执行了些什么，首先在前台执行getValue()函数，getValue函数里的 _Default.getValue(1,2,getGroups_callback);会执行后台的CS函数，我觉得这里才是AJAX的精髓，因为这里的执行是通过Ajax组件无刷新的执行后台CS函数的，通常我们要调用后台的CS函数都是通过正常方法刷新一下页面执行后台绑定好的CS函数，这里用Ajax就不用刷新的执行后台的那个getValue函数了，1和2是参数，要在getValue里计算了，getGroups_callback这个参数是必须要有了，要不然你在CS里传东西回来用什么接收呀，getValue函数在后台计算出结果来后，这种计算已经在后台了，想怎么算就怎么算，你想读库都没问题，然后通过return返回值，这个值是什么都行，那怕是一段"
<table> <tr> <td>HelloWorld </td> </tr> </table>"这样的HTML代码也行，前台用getGroups_callback（）这个JS函数接收这个值，然后就是前台调用了，想怎么用就怎么用了呗，随你喜欢，这就是AJAX运行的一个过程，从前台无刷新到后台，计算后再返回前台，怎么样，明白了没
当然，我们不希望仅仅用这种强大的能力来警告用户。这就是所有客户端代理（如JavaScript Sample.ServerSideAd函数）还接受其他特性的原因。这种特性就是为了处理响应而调用的回调函数：
Sample.ServerSideAdd(100,99, ServerSideAdd_CallBack);
function ServerSideAdd_CallBack(response){
if (response.error != null){
alert(response.error);
return;
}
alert(response.value);
}
从上述代码中可以看到我们指定了另外一个参数。ServerSideAdd_CallBack（同样参见上述代码）是用于处理服务器响应的客户端函数。这个回调函数接收一个响应对象，该对象公开了三个主要性质
Value——服务器端函数实际返回的值（无论是字符串、自定义对象还是数据集）。
Error——错误消息，如果有的话。
Request——xml http请求的原始响应。
Context——上下文对象。
首先我们检查error只看看是否出现了错误。通过在服务器端函数中抛出异常，可以很容易处理error特性。在这个简化的例子中，然后用这个值警告用户。Request特性可用于获得更多信息（参见下一节）。
处理类型
返回复杂类型
Ajax包装器不仅能处理ServerSideAdd函数所返回的整数。它目前还支持integers、strings、double、booleans、DateTime、DataSets和DataTables，以及自定义类和数组等基本类型。其他所有类型都返回它们的ToString值。
返回的DataSets和真正的.NET DataSet差不多。假设一个服务器端函数返回DataSet，我们可以通过下面的代码在客户端显示其中的内容：
<script language="JavaScript">
//Asynchronous call to the mythical "GetDataSet" server-side function
function getDataSet(){
AjaxFunctions.GetDataSet(GetDataSet_callback);
}
function GetDataSet_callback(response){
var ds = response.value;
if(ds != null && typeof(ds) == "object" && ds.Tables != null){
var s = new Array();
s[s.length] = "<table border=1>";
for(var i=0; i<ds.Tables[0].Rows.length; i++){
s[s.length] = "<tr>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].FirstName + "</td>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].Birthday + "</td>";
s[s.length] = "</tr>";
}
s[s.length] = "</table>";
tableDisplay.innerHTML = s.join("");
}
else {
alert("Error. [3001] " + response.request.responseText);
}
}
</script>
Ajax还可以返回自定义类，唯一的要求是必须用Serializable属性标记。假设有如下的类：
[Serializable()]
public class User{
private int _userId;
private string _firstName;
private string _lastName;
public int userId{
get { return _userId; }
}
public string FirstName{
get { return _firstName; }
}
public string LastName{
get { return _lastName; }
}
public User(int _userId, string _firstName, string _lastName){
this._userId = _userId;
this._firstName = _firstName;
this._lastName = _lastName;
}
public User(){}
[AjaxMethod()]
public static User GetUser(int userId){
//Replace this with a DB hit or something :)
return new User(userId,"Michael", "Schwarz");
}
}
我们可以通过调用RegisterTypeForAjax注册GetUser代理：
private void Page_Load(object sender, EventArgs e){
Utility.RegisterTypeForAjax(typeof(User));
}
这样就可以在客户端异步调用GetUser：
<script language="javascript">
function getUser(userId){
User.GetUser(GetUser_callback);
}
function GetUser_callback(response){
if (response != null && response.value != null){
var user = response.value;
if (typeof(user) == "object"){
alert(user.FirstName + " " + user.LastName);
}
}
}
getUser(1);
</script>
响应中返回的值实际上是一个对象，公开了和服务器端对象相同的属性（FirstName、LastName和UserId）。
自定义转换器
我们已经看到，Ajax .NET包装器能够处理很多不同的.NET类型。但是除了大量.NET类和内建类型以外，包装器对不能正确返回的其他类型仅仅调用ToString()。为了避免这种情况，Ajax .NET包装器允许开发人员创建对象转换器，用于在服务器和客户机之间平滑传递复杂对象。
其他事项
在其他类中注册函数
上面的例子中，我们的服务器端函数都放在执行页面背后的代码中。但是，没有理由不能把这些函数放在单独的类文件中。要记住，包装器的工作方式是在指定类中发现所有带Ajax.AjaxMethod的方法。需要的类通过第二个脚本标签指定。使用Ajax.Utility.RegisterTypeForAjax，我们可以指定需要的任何类。比如，将我们的服务器端函数作为单独的类是合情合理的：
Public Class AjaxFunctions
<Ajax.AjaxMethod()> _
Public Function Validate(username As String, password As String) As Boolean
''do something
''Return something
End Function
End Class
通过指定类的类型而不是页面就可以让Ajax包装器创建代理：
private void Page_Load(object sender, EventArgs e){
Ajax.Utility.RegisterTypeForAjax(typeof(AjaxFunctions));
//
}
要记住，客户端代理的名称是<ClassName>.<ServerSideFunctionName>。因此，如果ServerSideAdd函数放在上面虚构的AjaxFunctions类中，客户端调用就应该是： AjaxFunctions.ServerSideAdd(1,2)。
返回Unicode字符
Ajax .NET包装器能够从服务器向客户机返回Unicode字符。为此，数据在返回之前必须在服务器上用html编码。比如：
[Ajax.AjaxMethod]
public string Test1(string name, string email, string comment){
string html = "";
html += "Hello " + name + "<br>";
html += "Thank you for your comment <b>";
html += System.Web.HttpUtility.HtmlEncode(comment);
html += "</b>.";
return html;
}
2.修改Web.config。在 <system.web> 元素中添加以下代码。这里的Ajax.dll和Ajaxpro.dll引用方法是不一样的，一定要注意
<configuration>
<system.web>
<httpHandlers>
<!-- Ajax.dll的配置文件写法为,我下载到的是这个 -->
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
<!-- AjaxPro.dll的配置文件写法为，根据你下载到的DLL文件选择不同的配置语句-->
<add verb="*" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
</httpHandlers>
</system.web>
</configuration>
3对AjaxPro用到的页Page_Load事件中进行运行时注册。如：
protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(_Default));//是Ajax.dll的
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));//Ajaxpro.dll的
}
//这的_Default是指页面类的类名,就是这个页面的名字。如是放在命名空间，则需要写上完整的命名空间（如：namespaces._Default）
4创建服务器端方法
[Ajax.AjaxMethod]//这句一定要有，如果你是Ajaxpro.dll就写成[AjaxPro.AjaxMethod]
public string getValue(int a,int b)
{
//该方法我们将实现从客户端传入两个数，在服务器端相加计算后返回到客户端。这里可以写在原来的页后台中也可以单独写一个类。
return Convert.ToString(a+b);//这里返回的就是前台得到的值，反正参数已经进CS文件了，想怎么操作就怎么操作，包括读库都可以。
}
5 客户端调用。
<%@ Page language="c#" Codebehind="WebPage1.aspx.cs" AutoEventWireup="false" Inherits="Web.WebPage1" %>
<script language="javascript">
function getValue()
{
//这里如果是AjaxPro.dll就加Web._Default.getValue,如果是Ajax.dll就不用加命名空间如下
_Default.getValue(1,2,getGroups_callback);//该处即调用服务器端的_Default.getValue方法。
//_Default就是写getValue的那个类，如果写在本页CS里就是WebPage1.getValue，1和2是参数。
//这在里边getGroups_callback指定的是个回调函数，以接受服务器端处理完后返回客户端结果。
}
//这个方法用户接受并处理服务器端返回的结果。
function getGroups_callback(response)
{
var dt=response.value;//这个值就是最终传回来的值，想怎么用就怎么用，反正回前台了。
document.getElementById("Div_1").innerHTML=dt;
}
</script>
<body>
<div id="Div_1"> </div>
<button onclick=getValue()>开始 </botton>
</body>
现在我们来分析一下如果点击开始按钮都执行了些什么，首先在前台执行getValue()函数，getValue函数里的 _Default.getValue(1,2,getGroups_callback);会执行后台的CS函数，我觉得这里才是AJAX的精髓，因为这里的执行是通过Ajax组件无刷新的执行后台CS函数的，通常我们要调用后台的CS函数都是通过正常方法刷新一下页面执行后台绑定好的CS函数，这里用Ajax就不用刷新的执行后台的那个getValue函数了，1和2是参数，要在getValue里计算了，getGroups_callback这个参数是必须要有了，要不然你在CS里传东西回来用什么接收呀，getValue函数在后台计算出结果来后，这种计算已经在后台了，想怎么算就怎么算，你想读库都没问题，然后通过return返回值，这个值是什么都行，那怕是一段"
<table> <tr> <td>HelloWorld </td> </tr> </table>"这样的HTML代码也行，前台用getGroups_callback（）这个JS函数接收这个值，然后就是前台调用了，想怎么用就怎么用了呗，随你喜欢，这就是AJAX运行的一个过程，从前台无刷新到后台，计算后再返回前台，怎么样，明白了没
当然，我们不希望仅仅用这种强大的能力来警告用户。这就是所有客户端代理（如JavaScript Sample.ServerSideAd函数）还接受其他特性的原因。这种特性就是为了处理响应而调用的回调函数：
Sample.ServerSideAdd(100,99, ServerSideAdd_CallBack);
function ServerSideAdd_CallBack(response){
if (response.error != null){
alert(response.error);
return;
}
alert(response.value);
}
从上述代码中可以看到我们指定了另外一个参数。ServerSideAdd_CallBack（同样参见上述代码）是用于处理服务器响应的客户端函数。这个回调函数接收一个响应对象，该对象公开了三个主要性质
Value——服务器端函数实际返回的值（无论是字符串、自定义对象还是数据集）。
Error——错误消息，如果有的话。
Request——xml http请求的原始响应。
Context——上下文对象。
首先我们检查error只看看是否出现了错误。通过在服务器端函数中抛出异常，可以很容易处理error特性。在这个简化的例子中，然后用这个值警告用户。Request特性可用于获得更多信息（参见下一节）。
处理类型
返回复杂类型
Ajax包装器不仅能处理ServerSideAdd函数所返回的整数。它目前还支持integers、strings、double、booleans、DateTime、DataSets和DataTables，以及自定义类和数组等基本类型。其他所有类型都返回它们的ToString值。
返回的DataSets和真正的.NET DataSet差不多。假设一个服务器端函数返回DataSet，我们可以通过下面的代码在客户端显示其中的内容：
<script language="JavaScript">
//Asynchronous call to the mythical "GetDataSet" server-side function
function getDataSet(){
AjaxFunctions.GetDataSet(GetDataSet_callback);
}
function GetDataSet_callback(response){
var ds = response.value;
if(ds != null && typeof(ds) == "object" && ds.Tables != null){
var s = new Array();
s[s.length] = "<table border=1>";
for(var i=0; i<ds.Tables[0].Rows.length; i++){
s[s.length] = "<tr>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].FirstName + "</td>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].Birthday + "</td>";
s[s.length] = "</tr>";
}
s[s.length] = "</table>";
tableDisplay.innerHTML = s.join("");
}
else {
alert("Error. [3001] " + response.request.responseText);
}
}
</script>
Ajax还可以返回自定义类，唯一的要求是必须用Serializable属性标记。假设有如下的类：
[Serializable()]
public class User{
private int _userId;
private string _firstName;
private string _lastName;
public int userId{
get { return _userId; }
}
public string FirstName{
get { return _firstName; }
}
public string LastName{
get { return _lastName; }
}
public User(int _userId, string _firstName, string _lastName){
this._userId = _userId;
this._firstName = _firstName;
this._lastName = _lastName;
}
public User(){}
[AjaxMethod()]
public static User GetUser(int userId){
//Replace this with a DB hit or something :)
return new User(userId,"Michael", "Schwarz");
}
}
我们可以通过调用RegisterTypeForAjax注册GetUser代理：
private void Page_Load(object sender, EventArgs e){
Utility.RegisterTypeForAjax(typeof(User));
}
这样就可以在客户端异步调用GetUser：
<script language="javascript">
function getUser(userId){
User.GetUser(GetUser_callback);
}
function GetUser_callback(response){
if (response != null && response.value != null){
var user = response.value;
if (typeof(user) == "object"){
alert(user.FirstName + " " + user.LastName);
}
}
}
getUser(1);
</script>
响应中返回的值实际上是一个对象，公开了和服务器端对象相同的属性（FirstName、LastName和UserId）。
自定义转换器
我们已经看到，Ajax .NET包装器能够处理很多不同的.NET类型。但是除了大量.NET类和内建类型以外，包装器对不能正确返回的其他类型仅仅调用ToString()。为了避免这种情况，Ajax .NET包装器允许开发人员创建对象转换器，用于在服务器和客户机之间平滑传递复杂对象。
其他事项
在其他类中注册函数
上面的例子中，我们的服务器端函数都放在执行页面背后的代码中。但是，没有理由不能把这些函数放在单独的类文件中。要记住，包装器的工作方式是在指定类中发现所有带Ajax.AjaxMethod的方法。需要的类通过第二个脚本标签指定。使用Ajax.Utility.RegisterTypeForAjax，我们可以指定需要的任何类。比如，将我们的服务器端函数作为单独的类是合情合理的：
Public Class AjaxFunctions
<Ajax.AjaxMethod()> _
Public Function Validate(username As String, password As String) As Boolean
''do something
''Return something
End Function
End Class
通过指定类的类型而不是页面就可以让Ajax包装器创建代理：
private void Page_Load(object sender, EventArgs e){
Ajax.Utility.RegisterTypeForAjax(typeof(AjaxFunctions));
//
}
要记住，客户端代理的名称是<ClassName>.<ServerSideFunctionName>。因此，如果ServerSideAdd函数放在上面虚构的AjaxFunctions类中，客户端调用就应该是： AjaxFunctions.ServerSideAdd(1,2)。
返回Unicode字符
Ajax .NET包装器能够从服务器向客户机返回Unicode字符。为此，数据在返回之前必须在服务器上用html编码。比如：
[Ajax.AjaxMethod]
public string Test1(string name, string email, string comment){
string html = "";
html += "Hello " + name + "<br>";
html += "Thank you for your comment <b>";
html += System.Web.HttpUtility.HtmlEncode(comment);
html += "</b>.";
return html;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 不用AJAX实现前台JS调用后台C#方法
- 转：不用AJAX实现前台JS调用后台C#方法(小技巧)
- 利用sender的Parent获取GridView中的当前行 不用AJAX实现前台JS调用后台C#方法(小技巧) AjaxControlToolkit的CalendarExtender的本地化
- AjaxPro.dll,asp.net 前台js调用后台方法（无刷新）
- 不用AJAX实现前台JS调用后台C#方法(小技巧)
- 不用AJAX实现前台JS调用后台C#方法(小技巧) 【改自Web.网际浪人.Blog】
- 不用AJAX实现前台JS调用后台C#方法(小技巧) (转)
- AjaxPro.dll,asp.net 前台js调用后台方法（无刷新）
- ajax 前台js调用后台方法
- ajax 前台js调用后台方法
- 不用AJAX实现前台JS调用后台C#方法(小技巧)-转
- C#前台js里面使用ajax调用后台aspx.cs方法
- ajax 前台js调用后台方法 (转)
- .net下不用AJAX实现前台JS调用后台C#方法
- 不用AJAX实现前台JS调用后台C#方法(小技巧)
- 不用AJAX实现前台JS调用后台C#方法
- AjaxPro.dll,asp.net 前台js调用后台方法（无刷新）
- 不用AJAX实现前台JS调用后台C#方法(小技巧)
- ajax 前台js调用后台方法
- 不用AJAX实现前台JS调用后台C#方法(小技巧)