zoukankan      html  css  js  c++  java
  • 综述ASP.NET下的AJAX模式

     本文内容:

    一、导言
    二、XMLHttp+WebForm模式

    三、XMLHttp+HttpHandler模式

    四、ASP.NET 2.0/3.5回调模式

    五、AJAX框架模式
    --------------------------------------------------------------------------------------------------

    一、导言
         在这篇文章中,将介绍在ASP.NET环节下的几种常用的AJAX模式。例如:XMLHttpRequest+WebForms,XMLHttpRequest+HttpHandlers,CallBacks,以及使用AJAX框架等,下面将以示例结合的方式展开介绍这一系列常用模式。本文之后将提供示例代码下载。

    二、XMLHttp+WebForm模式

         或许大家都比较清楚的记得,XMLHttp+WebForm模式是ASP.NET下最原始的AJAX模式。在这种模式下,是通过JavaScript去操作XMLHttpRequest对象,发送异步请求到服务器端的WEB窗体的形式。另一方面,在服务端创建WEB窗体可以直接用来接受XMLHTTP的请求。以此,浏览器的XMLHttpRequest对象便成了服务器端和客户端的一种良好的沟通方式。

         在这一节将结合一个简单的示例来介绍,希望能够帮助大家更直观的理解XMLHttp+WebForm模式的这种AJAX模式。

         (1)、客户端

              客户端里创建XMLHttpRequest对象以及发起异步请求我们将其JavaScript封装在一个Ajax.js文件里。这样部分方法可以达到重用,在Ajax.js里有三个方法,newXmlHttpReqeust,sendRequest和onSuccessCallBack方法,详细如下:

     1//创建XMLHttpRequest对象
     2var xmlHttp;
     3function newXMLHttpRequest() {
     4
     5    if (window.XMLHttpRequest) {
     6        xmlHttp = new XMLHttpRequest();
     7    }
     else if (window.ActiveXObject) {
     8        try 
     9            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    10        }
     catch (e1) 
    11            try {
    12                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    13            }
     catch (e2) {
    14            }
     
    15        }

    16     }

    17       return xmlHttp;
    18}
     
    19
    20//发起异步请求
    21function sendRequest(){
    22    newXMLHttpRequest();
    23    var url="AjaxForm.aspx?name="+document.getElementById("txtName").value;
    24      xmlHttp.open("GET",url,true);
    25    xmlHttp.onreadystatechange=onSuccessCallBack;
    26    xmlHttp.send(null);
    27}

    28
    29//回调处理函数
    30function onSuccessCallBack(){
    31    if (xmlHttp.readyState == 4
    32    {
    33        if (xmlHttp.status == 200
    34        {
    35            document.getElementById("result").innerHTML = xmlHttp.responseText;
    36        }
     
    37        else 
    38        {
    39            document.getElementById("result").innerHTML=result.status;
    40        }

    41    }

    42}


         客户端调用异步发起请求前首先执行创建XmlHttpRequest对象的方法,最后通过回调函数更新页面显示。
         (2)、服务端

              服务端就是一个WebForm,接受客户端传递的参数然后将其转化为大写后返回给客户端。

     1protected void Page_Load(object sender, EventArgs e)
     2{
     3    if (!IsPostBack)
     4    {
     5        string name = Request.QueryString["name"];
     6        Response.Write(name.ToUpper());
     7        Response.Flush();
     8        Response.End();
     9    }

    10}

    三、XMLHttp+HttpHandler模式

         此模式和上一种形式上没有太大的差别,只是服务端的处理对象不同,一个是WebForm一个则是HttpHandler。在HttpHandler里通过Request对象获取请求的参数,然后通过Response对象将结果返回,是直接通过HttpHandler的ProcessRequest方法来处理的。OK,既然是这样,那么我们只需要在上一模式的基础上将请求Url修改为HttpHandler就OK了,如下:

     1public class AjaxHandler : IHttpHandler
     2{
     3
     4    public void ProcessRequest(HttpContext context)
     5    {
     6        context.Response.ContentType = "text/plain";
     7        string name = context.Request.QueryString["name"];
     8        context.Response.Write(name.ToUpper());
     9    }

    10
    11    public bool IsReusable
    12    {
    13        get
    14        {
    15            return false;
    16        }

    17    }

    18}

    四、ASP.NET 2.0/3.5回调模式

         ASP.NET的回调,其实很好理解,就是使用ICallbackEventHandler接口,通过实现RaiseCallbackEvent()和GetCallbackResult()方法来实现回调,最后通过调用ClientScript.GetCallbackEventReference()方法实现Ajax效果。看看下面这个示例:

     1namespace AjaxPattern._3
     2{
     3    public partial class AjaxForm : System.Web.UI.Page,ICallbackEventHandler
     4    {
     5        protected void Page_Load(object sender, EventArgs e)
     6        {
     7
     8        }

     9
    10        string text = string.Empty;
    11
    12        public string GetCallbackResult()
    13        {
    14            return text;
    15        }

    16
    17        public void RaiseCallbackEvent(string eventArgument)
    18        {
    19            text = DateTime.Now.ToLocalTime().ToString();
    20        }

    21    }

    22}


          上 面便是实现了ICallbackEventHandler,在RaiseCallbackEvent方法里将当前时间返回,客户端通过调用 ClientScript.GetCallbackEventReference()方法,来实现Ajax,客户端代码如下:

     1<script type="text/javascript">
     2function receiveServerData(arg,context)
     3{
     4    document.getElementById("result").innerHTML=arg;
     5}

     6
     7function callServer(arg,context)
     8{
     9    <%=ClientScript.GetCallbackEventReference(this,"arg","receiveServerData","context"%>;
    10}

    11</script>

         

         现在我们就可以通过调用callServer方法去回调服务端的方法了,html如下:

    1 <input type="button" value="Submit" onclick="callServer()" />
    2 <hr />
    3 <div id="result">
    4 
    5 </div>

         以上三种模式相比成型的AJAX框架来说使用起比较麻烦,没有框架那么直接,通过调用一个请求方法就搞定AJAX请求。不过各自也有各自的好处,在我们的实际开发中应该根据实际需求来选择适合自己的AJAX模式。  

    五、AJAX框架模式

         此模式,顾名思义就是使用成型的AJAX框架来开发AJAX应用。如:JQuery,ASP.NET AJAX等等。具体的使用我在这里就不在做重复的示例和介绍了,有兴趣的朋友可以看看我写的其他有关AJAX框架的文章。

         相关文章:JavaScript与Web Service组合实现无刷新交互   ----使用ASP.NET AJAX
                       ASP.NET MVC中使用AJAX(XMLHttpRequest、Microsoft AJAX Library......)  ----包括JQuery

    参考文献:http://aspalliance.com/1740_Summarizing_AJAX_Patterns_Under_ASPNET

    示例下载:点击下载示例代码

  • 相关阅读:
    Java Native Method
    SQL语句优化
    Ibatis的环境搭建以及遇到的问题解决
    Java 构建器
    SpringMVC自定义视图 Excel视图和PDF视图
    java 枚举的常见使用方法
    mysql 根据某些字段之和排序
    MFC The Screen Flickers When The Image Zoomed
    How To Debug Qmake Pro File
    Gcc And MakeFile Level1
  • 原文地址:https://www.cnblogs.com/beniao/p/1310635.html
Copyright © 2011-2022 走看看