.NET内置的Ajax工作原理

在期望不执行回发(postback)而从客户端运行服务器代码的情况下,可以使用ClientScriptManager类来调用客户端回调(callback)。这称为对服务器执行带外回调。在客户端回调中,客户端脚本函数项ASP.NET网页发送异步请求。网页修改其正常生命周期来处理回调。

回调的过程如下:

(1)客户端发出请求,请求内容包括:指定更新控件和传递参数。

(2)服务端响应、处理。

(3)服务器将处理后的内容以字符串返回。

(4)客户端指定一个函数接受返回值。

(5)客户端更新指定控件。

使用回调的步骤如下:

(1)在控件或page类中实现ICallbackEventHandler接口。该接口有两个方法,分别是RaiseCallbackEvent和GetCallbackResult。RaiseCallbackEvent方法是回调执行的方法,该方法处理回调的内容。它没有返回值,而是从浏览器接受一个字符串作为事件的参数,即该方法接受客户端JavaScript所传递的参数。注意它是首先触发的。接下来触发的就是GetCallbackResult方法,它将所得到的结果传回给客户端的脚本。

(2)生成调用该回调的客户端脚本。可以通过ClientScriptManager类的GetCallbackEventReference方法来生成。

(3)编写代码调用(2)中生成的客户端脚本。

以下通过一个例子来说明回调过程。。。

新建一ASP.NET 应用程序,设置Default窗体界面如下:

1,在Defalut.aspx.cs类实现ICallbackEventHandler接口,代码如下

public partial class _Default : System.Web.UI.Page,ICallbackEventHandler
    {
        string callbackResult;

#region ICallbackEventHandler 成员

//这是RaiseCallbackEvent方法触发之后触发的,它将得到的结果返回给客户端的脚本《《《《《《《《222222
        //客户端脚本的onCallbackComplete(result,context)方法里面的result在这里其实就是指callbackResult
        public string GetCallbackResult()
        {
            return callbackResult;
        }

//回调执行的方法,首先触发的,里面的一个参数接受从客户端传来的值《《《《《《1111111
        public void RaiseCallbackEvent(string eventArgument)
        {
            try
            {
                callbackResult = WebService.getResult(eventArgument);//由于这里调用的是webservice的getResult的方法,所以也可以把getResult方法放在这里。
            }
            catch (Exception e)
            {
                Trace.Write(e.Message);
                throw new Exception("调用失败");
            }
        }

#endregion
    }

2,生成调用该回调的客户端脚本。在Default类的page_Load事件中加入如下代码:

public partial class _Default : System.Web.UI.Page,ICallbackEventHandler
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsCallback)
            {
                return;
            }

//根据传入的参数返回实际的回调脚本《《《《《《《《33333333

//target处理客户端回调的服务器 Control 的名称。该控件必须实现 ICallbackEventHandler 接口并提供 RaiseCallbackEvent 方法。
            //argument从客户端脚本传递给服务器端的一个参数
            //clientCallback一个客户端事件处理程序的名称,该处理程序接收成功的服务器端事件的结果。
            //context启动回调之前在客户端计算的客户端脚本。脚本的结果传回客户端事件处理程序。
            //clientErrorCallback客户端事件处理程序的名称,该处理程序在服务器端事件处理程序出现错误时接收结果。
            //useAsynctrue 表示同步执行回调;false 表示异步执行回调。
            string callBackFunctionCall = ClientScript.GetCallbackEventReference(this, "getTextValue()", "onCallbackComplete", null, "onCallbackError", true);
           
            //注册客户端脚本《《《《《《《《444444
            string csname = "CallBack";//要注册的客户端脚本的键。
            if (!ClientScript.IsClientScriptBlockRegistered(GetType(), csname))
            {
                //type要注册的客户端脚本的类型。
                //key要注册的客户端脚本的键。
                //script要注册的客户端脚本文本。
                //addScriptTags指示是否添加脚本标记的布尔值。
                ClientScript.RegisterClientScriptBlock(GetType(), csname, "function DoClientCallBack(){" + callBackFunctionCall + "}", true);
            }
        }
    }

3,编写客户端代码,在Default.aspx文件中添加如下JavaScript脚本:

<script type ="text/javascript" >
    function getTextValue()//要传递给服务器的参数
    {
        var arg1=document.getElementById ("Text1").value;
        var arg2=document.getElementById ("Text2").value;
        var arg="argA="+arg1+"&argB="+arg2;//注意这里的传递方式
        return arg;
    }
   
    function onCallbackComplete(result,context)//回调成功
    {
//        alert(result);
        document.getElementById ("TextArea1").value=result;
    }
   
    function onCallbackError()//回调失败
    {
        alert("回调失败!");
    }
    </script>

最后补充在(1)中的RaiseCallbackEvent方法中调用的类webservice的getResult方法,在项目中添加一名为WebService.asmx的web服务页面。在WebService.asmx.cs文件中定义一个名为getResult的方法,这段代码其实也可以直接放置在RaiseCallbackEvent方法中,但是为了实现调用webservice的效果还是把它单独放置到一个webservice文件中,具体代码如下:

public class WebService : System.Web.Services.WebService
    {

[WebMethod]
        public static string getResult(string name)//静待函数
        {
            string[] keyValuePairs;//含有”=“的数组
            string[] keyValue;//只有字符串的数组
            NameValueCollection m_queryString= new NameValueCollection();//键值对的集合

keyValuePairs = name.Split("&".ToCharArray ());
             if (keyValuePairs.Length > 0)//如果传递的参数是argA=arg1&argB=arg2……形式的,也就是说参数不止一个
             {
                 for (int i = 0; i < keyValuePairs.Length; i++)
                 {
                     keyValue = keyValuePairs.GetValue(i).ToString().Split("=".ToCharArray());
                      m_queryString.Add(keyValue[0], keyValue[1]);
                 }
             }
             else//传递的参数只有一个
             {
                 keyValue = name.Split("=".ToCharArray());
                 if (keyValue.Length > 0)//如果有参数传递过来的话
                 {
                      m_queryString.Add(keyValue[0], keyValue[1]);
                 }
             }
             //通过htQueryString["argA"]这种方式调用参数的值
             return "第一个参数是: " + m_queryString["argA"].ToString() + "\n第二个参数是: " + m_queryString["argB"].ToString();
        }
    }

执行结果如下:

该页面的用户交互与上一篇博客Ajax打开三种页面的请求的页面是一样的,但是代码大大减少了,因为我们不需要编写代码来解析XML或处理XMLHttpRequest对象。

.NET内置的Ajax工作原理

时间: 2024-07-29 23:50:03

.NET内置的Ajax工作原理的相关文章

AJAX工作原理与缺点

1.概念:什么是AJAXAJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.2.为什么要使用他?最大的优点:不刷新整个页面的情况下与服务器通信保持原有页面状态,通俗点,浏览网页的时候回有两种情况,点击,1,白屏,等待跳转到另一个页.2.页面不刷新,局部出现新内容获得更好的用户体验.3.基本原理先看图 XHR相当于是一个通信兵,来负责客户端与服务器之间的通信传输.要打仗了,前方阵地不可能只等着

内置(AJAX)帮助文档

Discuz common.js 内置(AJAX)函数帮助文档 作者:cr180 / 整理日期:1970-01-01 / 个人站点:www.cr180.com / Discuz超级管家 showMenu() 显示弹出菜单 function showMenu(v) 参数 v 格式:{'key1':'value1','key2':'value2','key3':'value3'} 目前,数组 v 支持传递的 key 有: key 默认值 含义 可选值及解释 ctrlid (必填) 控制菜单的 id

[转载]AJAX工作原理及其优缺点

AJAX工作原理及其优缺点 1.什么是AJAX?AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用:使用XHTML+CSS来标准化呈现:使用XML和XSLT进行数据交换及相关操作:使用XMLHttpRequest对象与Web服务器进行异步数据通信: 使用Javascript操作Document Object Model进行动态显示及交互: 使用JavaScript绑定和处理

【java项目实践】详解Ajax工作原理以及实现异步验证用户名是否存在+源码下载(java版)

一年前,从不知道Ajax是什么,伴随着不断的积累,到现在经常使用,逐渐有了深入的认识.今天,如果想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在详细讨论Ajax是什么之前,先让我们花一分钟了解一下Ajax做什么.如图所示: 如上图展示给我们的就是使用Ajax技术实现的效果.伴随着web应用的越来越强大而出现的是等待,等待服务器响应,等待浏览器刷新,等待请求返回和生成新的页面成为了程序员们的最最头疼的难题.随着Ajax的出现使web应用程序变得更完善,更友

【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)

一年前,从不知道Ajax是什么,伴随着不断的积累,到如今常常使用,逐渐有了深入的认识. 今天,假设想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在具体讨论Ajax是什么之前,先让我们花一分钟了解一下Ajax做什么.如图所看到的: 如上图展示给我们的就是使用Ajax技术实现的效果.伴随着web应用的越来越强大而出现的是等待.等待server响应,等待浏览器刷新.等待请求返回和生成新的页面成为了程序猿们的最最头疼的难题.随着Ajax的出现使web应用程序变得

【知了堂学习笔记】ajax工作原理

ajax工作原理 什么是ajax? ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思.从全称中就可以看出AJAX = 异步 JavaScript 和 XML.  AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 使用 AJ

Ajax工作原理

1.ajax技术的背景       不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的流行.而这也让微软感到无比的尴尬,因为早在97年,微软便已经发明了ajax中的关键技术,并且在99年IE5推出之时,它便开始支持XmlHttpRequest对象,并且微软之前已经开始在它的一些产品中应用ajax,比如说MSDN网站菜单中的一些应用.遗憾的是,不知道出于什么想法,当时微软

Ajax工作原理以及常用的Ajax框架

1,关于同步和异步 异步传输是面向字符的传输,它的单位是字符:而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的. ajax可以提升用户体验,它是利用异步请求方式的.打个比方,如果现在你家里所在的小区因 某种情况而面临停水,现在有关部门公布了两种方案,一是完全停水8个小时,在这8个小时内完全停水,8个小时后恢复正常.二是不完全停水10 个小时,在这10个小时内水没有完全断,只是流量比原来小了很多,在10个小时后恢复正常流量,那么,如果是你你会选择哪种方式呢

关于Ajax工作原理

1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的流行.而这也让微软感到无比的尴尬,因为早在97年,微软便已经发明了ajax中的关键技术,并且在99年IE5推出之时,它便开始支持XmlHttpRequest对象,并且微软之前已经开始在它的一些产品中应用ajax,比如说MSDN网站菜单中的一些应用.遗憾的是,不知道出于什么想法,当时微软发明了aja