JavaScript调用后台的三种方法实例(包含两种Ajax…

2018-06-22 07:44:11来源：未知阅读 ()

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

前台JS，代码如下：

<script type="text/javascript">  
     var methodStr = "<%=BehindMethod() %>";  
      alert(methodStr);  
</script>

后台方法，代码如下：

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

说明：

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

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

方法二：用ajax调用

前台JS/jQuery，代码如下：

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

页面HTML，代码如下：

<body>
    <form id="form1" runat="server">
    <div>
    <label id="tips"></label>
       <img id="imgFood" />
       <input value="点击我，给你看一张图片" type="button" width="35px" id="btnOk"  />
    </div>
    </form>
</body>

ASPX后台方法，代码如下：

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

说明：

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引用方法是不一样的，一定要注意。

<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>

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

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

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

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


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

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

NAMESPACE.CLASS	命名空间和类
ASSEMBLYNAME	程序集的名称

Ajax也可以支持自定义类，但是需要这个类是可以被序列化的，即要在自定义类如User前加上[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(){}

 [Ajax.AjaxMethod()]或者是[AjaxPro.AjaxMethod()]
 public User GetUser(int userId)
{

  //Replace this with a DB hit or something :)
  return new User(userId,"Michael", "Schwarz");

 }

 [Ajax.AjaxMethod()]或者是[AjaxPro.AjaxMethod()]
 public DataSet GetUserList(paramType1 param1, paramType2 param2, ...)
{

  //Replace this with a DB hit or something :)
  return a DataSet;


 }

 [Ajax.AjaxMethod()]或者是[AjaxPro.AjaxMethod()]
 public DataTable GetUserList(paramType1 param1, paramType2 param2, ...)
{

  //Replace this with a DB hit or something :)
  return a DataTable;
 

}

}

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

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

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

注意：

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

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

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

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

[Ajax.AjaxMethod(HttpSessionStateRequirement.Read)]
public ArrayList DocumentReleased()
{

       if (HttpContext.Current.Session["DocumentsWaiting"] == null)
       {

             return null;

       }

       ArrayList readyDocuments = new ArrayList();

       int[] documents = (int[])HttpContext.Current.Session["DocumentsWaiting"];

       for (int i = 0; i < documents.Length; ++i)
       {

             Document document = Document.GetDocumentById(documents[i]);

             if (document != null && document.Status == DocumentStatus.Ready)
             {

                     readyDocuments.Add(document);

             }        

        }

        return readyDocuments;

 }

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

<script type="text/javascript">
function DocumentsReady_CallBack(response)
{
      if (response.error != null)
      {
             alert(response.error);
             return;
      }
      if (response.value != null && response.value.length > 0)
      {
             var div = document.getElementById("status");
             div.innerHTML = "The following documents are ready!<br />";
             for (var i = 0; i < response.value.length; ++i)
             {
                    div.innerHTML += "<a href=\"edit.aspx?documentId=" + response.value[i].DocumentId + "\">" + response.value[i].Name + "</a><br />";
              }
       }
}
</script>  

<body onload="setTimeout('Document.DocumentReleased(DocumentsReady_CallBack)', 10000);">

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

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

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

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

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

<script type="text/javascript">
function getUser(userId)
{
    User.GetUser(userId, 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>

从上面的代码中可以看出，我们为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标签，我们可以通过下面的方法在客户端显示：

<script type="text/javascript">
function getUserList(userId)
{
    User.GetUserList(param1, param2, ..., GetUserList_CallBack);
}

function GetUserList_CallBack(response)
{
     var ds = response.value;
     if (ds != null && typeof(ds) == "object" && ds.Tables != null)
     {
          $("#userinfo").empty();
          var rowsLength = ds.Tables[0].Rows.length;
          if(rowsLength > 0)
          {
                for(var i = 0; i < rowsLength; i++)
                {
                      var UserRow = ds.Tables[0].Rows[i];
                      $("#userinfo").append('<tr>');
                      $("#userinfo").append('<td style="width:60px;text-align:center;">' + UserRow.UserId + '</td>');
                      $("#userinfo").append('<td style="width:80px;text-align:left;">' + UserRow.FirstName + '</td>');
                      $("#userinfo").append('<td style="width:60px;text-align:left;">' + UserRow.LastName + '</td>');
                      $("#userinfo").append('</tr>');
                }
          }
          else
          {
                 $("#userinfo").append('<tr><td colspan="3" style="color:red;text-align:center">No data has been found!</td></tr>');
          }
      }
      else
      {
           alert("Error:" + response.request.responseText); 
      }
}
</script>

返回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.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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有