方法一：直接使用<%=%>调用(ASPX页面)

前台JS，代码如下：

  1. <script type="text/javascript">
  2.      var methodStr = "<%=BehindMethod() %>";
  3.       alert(methodStr);
  4. </script>

后台方法，代码如下：

  1. public static string BehindMethod()
  2. {
  3.       return "这是一个后台的方法";
  4. }

说明：

1)BehindMethod()方法前的public访问修饰符不要忘了；

2)此法有局限性——BehindMethod()只会在ASPX页面加载或者回发的时候自动调用，不能人为控制调用。

方法二：用ajax调用

前台JS/jQuery，代码如下：

  1. <script type="text/javascript">
  2. var params = {ext:"p9hp"};  //参数，注意参数名要注意和后台方法参数名要一致
  3.         $(function(){
  4.            $("#btnOk").click(function(){
  5.             $.ajax({
  6.                 type:"POST",  //请求方式
  7.                 url:"AjaxDemo.aspx/GetImg",  //请求路径：页面/方法名字
  8.                 data: params,     //参数
  9.                 dataType:"text",
  10.                 contentType:"application/json; charset=utf-8",
  11.                 beforeSend:function(XMLHttpRequest){
  12.                     $("#tips").text("开始调用后头方法获取图片路径,请等待");
  13.                     $("#imgFood").attr("src","image/loading.gif");
  14.                 },
  15.                 success:function(msg){  //成功
  16.                     $("#imgFood").attr("src",eval("("+msg+")").d);
  17.                     $("#tips").text("调用方法结束");
  18.                 },
  19.                 error:function(obj, msg, e){   //异常
  20.                     alert("OH,NO");
  21.                 }
  22.             });
  23.         });
  24.         });
  25. </script>

页面HTML，代码如下：

  1. <body>
  2.     <form id="form1" runat="server">
  3.     <div>
  4.     <label id="tips"></label>
  5.        <img id="imgFood" />
  6.        <input value="点击我，给你看一张图片" type="button" width="35px" id="btnOk"  />
  7.     </div>
  8.     </form>
  9. </body>

ASPX后台方法，代码如下：

  1. [System.Web.Services.WebMethod]
  2. public static string GetImg(string ext)
  3. {
  4.     System.Threading.Thread.Sleep(5000);//为了有点等待的效果，延迟5秒
  5.      StringComparer sc = StringComparer.OrdinalIgnoreCase;
  6.     string[] extArr = new string[] { "php", "asp", "aspx", "txt", "bmp" };
  7.     bool f = extArr.Any(s=>sc.Equals(s,ext));   //判断传入的后缀名是否存在
  8.      if (f)
  9.     {
  10.         return "image/54222860.jpg";
  11.     }
  12.     return "image/star1.jpg";
  13. }

说明：

1)后台方法前的[System.Web.Services.WebMethod]不能少；

2)还有一种形式的ajax，与上述很类似，不同之处在于：使用.ashx一般处理程序，将上述前台JS/jQuery代码中url更改为请求的一般处理程序路径/[地址栏参数](地址栏参数根据实际需要决定是否添加)，如url:"AjaxDemo.ashx"。然后在AjaxDemo.ashx.cs的public void ProcessRequest(HttpContext context){...}中编写相关代码，最后以context.Response.Write("返回值")的形式返回返回值。

方法三：AjaxPro或者Ajax库(也是ajax)

第一步：下载AjaxPro.dll(或者Ajax.dll),并且添加引用到项目

第二步：修改Web.config，在 <system.web> 节点下添加以下代码。这里的Ajax.dll和Ajaxpro.dll引用方法是不一样的，一定要注意。

  1. <configuration>
  2. <system.web>
  3. <httpHandlers>
  4. <!-- Ajax.dll的配置文件写法为,我下载到的是这个 -->
  5. <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
  6. <!-- AjaxPro.dll的配置文件写法为，根据你下载到的DLL文件选择不同的配置语句-->
  7. <add verb="*" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
  8. </httpHandlers>
  9. </system.web>
  10. </configuration>

如果是IIS7，则需要在<system.webServer></system.webServer>里加上<add name="ajax"  verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />

第三步：对AjaxPro用到的页(如AjaxDemo.aspx)Page_Load事件中进行运行时注册。如：

  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3.     Ajax.Utility.RegisterTypeForAjax(typeof(AjaxDemo));//是Ajax.dll的
  4.    AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxDemo));//Ajaxpro.dll的
  5. }

对RegisterTypeForAjax方法的调用在页面产生如下的javascript代码（另外一种选择，你也可以人工在页面上添加如下的javascript代码）:

  1. <script type="text/javascript" src="ajax/common.ashx"></script>
  2. <script type="text/javascript" src="ajax/NAMESPACE.CLASS,ASSEMBLYNAME.ashx"></script>

上面这段代码的粗体部分NAMESPACE.PAGECLASS,ASSEMBLYNAME含义如下

NAMESPACE.CLASS

命名空间和类

ASSEMBLYNAME

程序集的名称

Ajax也可以支持自定义类，但是需要这个类是可以被序列化的，即要在自定义类如User前加上[Serializable()]

  1. [Serializable()]
  2. public class User
  3. {
  4.  
  5.  private int _userId;
  6.  
  7.  private string _firstName;
  8.  
  9.  private string _lastName;
  10.  
  11.  public int userId
  12. {
  13.  
  14.   get { return _userId; }
  15.  
  16.  }
  17.  public string FirstName
  18. {
  19.  
  20.   get { return _firstName; }
  21.  
  22.  }
  23.  public string LastName
  24. {
  25.  
  26.   get { return _lastName; }
  27.  
  28.  }
  29.  
  30.  public User(int _userId, string _firstName, string _lastName)
  31. {
  32.  
  33.   this._userId = _userId;
  34.  
  35.   this._firstName = _firstName;
  36.  
  37.   this._lastName = _lastName;
  38.  
  39.  }
  40.  
  41.  public User(){}
  42.  
  43.  [Ajax.AjaxMethod()]或者是[AjaxPro.AjaxMethod()]
  44.  public User GetUser(int userId)
  45. {
  46.  
  47.   //Replace this with a DB hit or something :)
  48.   return new User(userId,"Michael", "Schwarz");
  49.  
  50.  }
  51.  
  52.  [Ajax.AjaxMethod()]或者是[AjaxPro.AjaxMethod()]
  53.  public DataSet GetUserList(paramType1 param1, paramType2 param2, ...)
  54. {
  55.  
  56.   //Replace this with a DB hit or something :)
  57.   return a DataSet;
  58.  
  59.  }
  60.  
  61.  [Ajax.AjaxMethod()]或者是[AjaxPro.AjaxMethod()]
  62.  public DataTable GetUserList(paramType1 param1, paramType2 param2, ...)
  63. {
  64.  
  65.   //Replace this with a DB hit or something :)
  66.   return a DataTable;
  67.  
  68. }
  69.  
  70. }

那么，在调用页面用RegisterTypeForAjax向服务器注册代理类的代码也要相应变更，代理类的名字不再是页面类，而是我们自定义的类，代码如下：

  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3.     Ajax.Utility.RegisterTypeForAjax(typeof(User));//是Ajax.dll的
  4.    AjaxPro.Utility.RegisterTypeForAjax(typeof(User));//Ajaxpro.dll的
  5. }

第四步：编写服务端方法，并且用[Ajax.AjaxMethod]标注

注意：

1)方法要写成public，否则在JS里调用的时候会提示"不支持此属性或方法"；

2)在服务端函数，如果需要处理Session信息，此时必须在想支持Session的服务端函数的Ajax.AjaxMethod属性上传递一个参数，如[Ajax.AjaxMethod(HttpSessionStateRequirement.Read)]。当然了，还可以是Write或ReadWrite，这个参数我们可以根据实际需求自行选择。

在下面这个例子中，我们有一个文档管理系统，当一个用户对文档进行编辑的时候会给这个文档加锁，其他用户需要等到这个文档可用时才能修改。不使用Ajax，用户需要不断等待刷新，因为不得不不断的去检查文档的状态是否为可用，这当然不是一个很好的方案。用ajax的sessionstate支持，这就比较容易了。

我们首先Document类中写一个函数，这个函数通过遍历文档ID找到用户需要的文档，存储到session里，并返回没有占用的文档：

  1. [Ajax.AjaxMethod(HttpSessionStateRequirement.Read)]
  2. public ArrayList DocumentReleased()
  3. {
  4.  
  5.        if (HttpContext.Current.Session["DocumentsWaiting"] == null)
  6.        {
  7.  
  8.              return null;
  9.  
  10.        }
  11.  
  12.        ArrayList readyDocuments = new ArrayList();
  13.  
  14.        int[] documents = (int[])HttpContext.Current.Session["DocumentsWaiting"];
  15.  
  16.        for (int i = 0; i < documents.Length; ++i)
  17.        {
  18.  
  19.              Document document = Document.GetDocumentById(documents[i]);
  20.  
  21.              if (document != null && document.Status == DocumentStatus.Ready)
  22.              {
  23.  
  24.                      readyDocuments.Add(document);
  25.  
  26.              }        
  27.  
  28.         }
  29.  
  30.         return readyDocuments;
  31.  
  32.  }

我们在属性参数中指明了HttpSessionStateRequirement.Read，下面写javascript函数来使用这个方法带来的结果：

  1. <script type="text/javascript">
  2. function DocumentsReady_CallBack(response)
  3. {
  4.       if (response.error != null)
  5.       {
  6.              alert(response.error);
  7.              return;
  8.       }
  9.       if (response.value != null && response.value.length > 0)
  10.       {
  11.              var div = document.getElementById("status");
  12.              div.innerHTML = "The following documents are ready!<br />";
  13.              for (var i = 0; i < response.value.length; ++i)
  14.              {
  15.                     div.innerHTML += "<a href=\"edit.aspx?documentId=" + response.value[i].DocumentId + "\">" + response.value[i].Name + "</a><br />";
  16.               }
  17.        }
  18. }
  19. </script>  
  20.  
  21. <body onload="setTimeout('Document.DocumentReleased(DocumentsReady_CallBack)', 10000);">

页面加载后每10秒钟向服务器函数请求一次。如果有返回，则callback函数检查response，并把最新的结果显示出来。

第五步：前台JS，调用User类的GetUser函数。Ajax封装类会创建一个javascript函数，形式与服务端GetUser函数相似，带一个参数，我们以"类名.函数名"的方式调用(如果是AjaxPor.dll，则以"命名空间.类名.函数名"的方式调用)。

作为Ajax最基本的功能，我们所需要做的只是调用这个方法并且传递参数，然后获取返回值进行后续处理，代码如下：

  1. <script type="text/javascript">
  2.     var response = User.GetUser(168);
  3.     alert(response.value);
  4. </script>

Ajax还有更强大的功能，这就是为什么所有的客户端代理（如User.GetUser）同时带有一个额外的定制属性。这个属性用来处理服务器响应的回调函数：

  1. <script type="text/javascript">
  2. function getUser(userId)
  3. {
  4.     User.GetUser(userId, GetUser_CallBack);
  5. }
  6.  
  7. function GetUser_CallBack(response)
  8. {
  9.      if (response != null && response.value != null)
  10.      {
  11.           var user = response.value;
  12.           if (typeof(user) == "object")
  13.           {
  14.                alert(user.FirstName + " " + user.LastName);
  15.           }
  16.      }
  17. }
  18.  
  19. getUser(1);
  20. </script>

从上面的代码中可以看出，我们为GetUser函数增加了一个额外参数GetUser_CallBack，这个参数就是用来处理服务器端响应的客户端函数。这个CallBack函数接受一个带有四个关键属性的response对象：

value

服务器端函数执行的返回值（可能是一个字符串、自定义对象或者dataset）

error

如果发生错误，则返回错误信息.

request

原始的xmlHttpRequest请求

context

一个上下文对象

我们首先应该检查是否有错误发生，你可以通过在服务器端函数抛出异常来实现这个error属性。在上面这个例子中，我们简单的alert了一个值，就是value属性；request属性可以用来取得额外的信息(更多的关于XmlHttpRequest的知识)。

说明：

返回值同服务器端对象一样有三个属性（FirstName, LastName and UserId）。

实例中我们在服务端函数返回了一个User类对象，那么Ajax还支持哪些返回类型呢？

Ajax可以支持除了我们上面GetUser函数返回的User类类型以外的很多类型。它可以直接支持integer, string, double, boolean, DateTime, DataSet 和 DataTable，也支持简单的自定义类型和数组。其他的类型通过其ToString方式来返回字符串。

返回DataSet就像真正的.net Dataset。假设页面中有个id为userinfo的table标签，我们可以通过下面的方法在客户端显示：

  1. <script type="text/javascript">
  2. function getUserList(userId)
  3. {
  4.     User.GetUserList(param1, param2, ..., GetUserList_CallBack);
  5. }
  6.  
  7. function GetUserList_CallBack(response)
  8. {
  9.      var ds = response.value;
  10.      if (ds != null && typeof(ds) == "object" && ds.Tables != null)
  11.      {
  12.           $("#userinfo").empty();
  13.           var rowsLength = ds.Tables[0].Rows.length;
  14.           if(rowsLength > 0)
  15.           {
  16.                 for(var i = 0; i < rowsLength; i++)
  17.                 {
  18.                       var UserRow = ds.Tables[0].Rows[i];
  19.                       $("#userinfo").append('<tr>');
  20.                       $("#userinfo").append('<td style="width:60px;text-align:center;">' + UserRow.UserId + '</td>');
  21.                       $("#userinfo").append('<td style="width:80px;text-align:left;">' + UserRow.FirstName + '</td>');
  22.                       $("#userinfo").append('<td style="width:60px;text-align:left;">' + UserRow.LastName + '</td>');
  23.                       $("#userinfo").append('</tr>');
  24.                 }
  25.           }
  26.           else
  27.           {
  28.                  $("#userinfo").append('<tr><td colspan="3" style="color:red;text-align:center">No data has been found!</td></tr>');
  29.           }
  30.       }
  31.       else
  32.       {
  33.            alert("Error:" + response.request.responseText);
  34.       }
  35. }
  36. </script>

返回Unicode字符

Ajax.net可以从服务器端向客户端返回Unicode字符，为了做到这一点，在服务端函数返回时返回的值必须是Html编码的：

  1. [Ajax.AjaxMethod()]
  2. public string Test1(string name, string email, string comment)
  3. {
  4.  
  5.  string html = "";
  6.  
  7.  html += "Hello " + name + "<br>";
  8.  
  9.  html += "Thank you for your comment <b>";
  10.  
  11.  html += System.Web.HttpUtility.HtmlEncode(comment);
  12.  
  13.  html += "</b>.";
  14.  
  15.  return html;
  16.  
  17. }

代理的工作机制：

Ajax.PageHandlerFactory是通过反射来取得有定制属性的函数的细节。Handler寻找带有AjaxMethod定制属性的函数，取得他们的特征（返回类型、名称、参数）并依据这些信息创建客户端代理。特别的，ajax创建一个与服务端函数类型相同的JavaScript对象作为代理。

Ajax技术可以给客户端提供丰富的客户体验，而ajax.net为您容易的实现这样强大的功能提供了可能，你可以通过下面的链接查看ajax.net的最新文档：

Keep a close eye on the AJAX .Net wrapper website:http://ajax.schwarz-interactive.de/

For a good hands-on sample, check out the following demo application:http://ajax.schwarz-interactive.de/download/ajaxsample.zip

参考链接①：http://www.cnblogs.com/U2USoft/articles/332439.html

参考链接②：http://www.jb51.net/article/42176.htm

JavaScript调用后台的三种方法实例(包含两种Ajax)的更多相关文章

  1. 前端调用后台接口下载word文档的两种方法

    1传统的ajax虽然能提交到后台,但是返回的数据被解析成json,html,text等字符串,无法响应浏览器下载.就算使用bob模拟下载,数据量大时也不方便 废话不多说:上代码(此处是Layui监听提 ...

  2. 通过Javascript调用微软认知服务情感检测接口的两种实现方式

    这是今天在黑客松现场写的代码.我们的项目需要调用认知服务的情感识别接口.官方提供了一种方式,就是从一个远程图片进行识别.我另外写了一个从本地文件读取并上传进行识别的例子. 官方文档,请参考 https ...

  3. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

  4. ASP.NET 前台Javascript调用后台代码 / 后台调用前台Javascript

    1:ASP.NET 前台Javascript调用后台代码 1.1:前台Javascript <script> function CallCs() { var str = "< ...

  5. sql语句实现行转列的3种方法实例

    sql语句实现行转列的3种方法实例 一般在做数据统计的时候会用到行转列,假如要统计学生的成绩,数据库里查询出来的会是这样的,但这并不能达到想要的效果,所以要在查询的时候做一下处理,下面话不多说了,来一 ...

  6. PHP从数组中删除元素的四种方法实例

    PHP从数组中删除元素的四种方法实例 一.总结 一句话总结:unset(),array_splice(),array_diff(),array_diff_key() 二.PHP从数组中删除元素的四种方 ...

  7. LWJGL3的内存管理，第三篇，剩下的两种策略

    LWJGL3的内存管理,第三篇,剩下的两种策略 上一篇讨论的基于 MemoryStack 类的栈上分配方式,是效率最高的,但是有些情况下无法使用.比如需要分配的内存较大,又或许生命周期较长.这时候就可 ...

  8. 子查询。ANY三种用法。ALL两种用法。HAVING中使用子查询。SELECT中使用子查询。

    子查询存在的意义是解决多表查询带来的性能问题. 子查询返回单行多列: ANY三种用法: ALL两种用法: HAVING中的子查询返回单行单列: SELECT中使用子查询:(了解就好,避免使用这种方法! ...

  9. .NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格

    一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...

随机推荐

  1. 基于cx_freeze编译PyQt4程序(numpy & scipy)

    当开发完成PyQt4程序后,需要提供给他人使用,这时最好的办法是将Python程序编译成exe文件. 通常我采用cx_freeze完成这个工作,即编写setup.py文件,执行python setup ...

  2. Day14 html简介

    初识html <!DOCTYPE html> <html lang="en"> <head> <!--自闭合标签--> <me ...

  3. 最新iOS 6 in Xcode4.5新特性——Storyboard和属性自动绑定

    最新iOS 6 in Xcode4.5新特性编程之二(上)——Storyboard和属性自动绑定 从Xcode 4.3开始,Storyboard 就是iOS 5和iOS 6中令人兴奋的一个新特性,他将 ...

  4. [BZOJ 3207] 花神的嘲讽计划Ⅰ【Hash + 可持久化线段树】

    题目链接:BZOJ - 3207 题目分析 先使用Hash,把每个长度为 k 的序列转为一个整数,然后题目就转化为了询问某个区间内有没有整数 x . 这一步可以使用可持久化线段树来做,虽然感觉可以有更 ...

  5. Kernel PCA 原理和演示

    Kernel PCA 原理和演示 主成份(Principal Component Analysis)分析是降维(Dimension Reduction)的重要手段.每一个主成分都是数据在某一个方向上的 ...

  6. TControl.WMLButtonUp的inherited的作用——是为了给子类控件新的处理消息的机会

    意外注意到这个小细节: procedure TControl.WMLButtonUp(var Message: TWMLButtonUp); begin inherited; // 注意,如果是直接点 ...

  7. Linux 配置多IP

    这里以红帽Linux为例.假定原系统已配置一个IP,地址为:192.168.20.140,配置文件路径/etc/sysconfig/network-script/ifcfg-eth0.现在需要配置一个 ...

  8. 关于type check的定义

    Concept: Type Checking There is no static type checking in Scheme; type checking is done at run time ...

  9. 根据body的内容 查找h2标签的@class="subtitle"的值

    <pre name="code" class="html"><body class="api jquery listing" ...

  10. 【POJ】2418 Hardwood Species

    简单字典树. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 128 ty ...