引用关于magicajax的用法

来源：互联网发布：淘宝买错了怎么退款编辑：程序博客网时间：2024/05/21 20:23

MagicAjax（http://www.magicajax.net/），他让你体验什么叫Easy AJAX，并支持.Net2.0。你无需对现有的webform方式开发有任何的改变，你只需配配web.config，拉拉控件就行了。本文不说用法，因为他实在太简单了，我在这里对他做一个分析，让大家了解他的工作方式。

最近，用了一下MagicAjax 觉得不错，使用很简单，经验终结如下：
-----------------------------------------------------------------------------------------
让MagicAjax支持中文！

我直接改ajaxcallobject.js文件也可以呀。。
不过web.config要写上js的路径,我参考了以前一篇文章。。
下面是web.config的配制
<magicAjax scriptPath ="~/js/ajaxscript/"
outputCompareMode="HashCode"
tracing="false">
<pageStore
mode="NoStore"
unloadStoredPage="false"
cacheTimeout="5"
maxConcurrentPages="5"
maxPagesLimitAlert="false"

/>
</magicAjax>
-----------------------------------------------------------------------------------------

1．首先去http://sourceforge.net/projects/magicajax下载MagicAjax的Dll了。

2．将该dll加入到webForm所在项目的引用中。

3．在Web.Config文件中<configuration>节点下添加如下子节点：

</configSections>

4．在Web.Config文件中< system.web>节点下添加如下子节点：

</httpModules>

5．在希望采用Ajax的webForm页面HTML开头引入Ajax的注册语句：

<%@ Register TagPrefix="ajax" Namespace="MagicAjax.UI.Controls" Assembly="MagicAjax" %>

-----------------------------------------------------------------------------------------

1、打开vs 添加 MagicAjax.dll，就会有AjaxPanel 控件，就往上拖东西吧。（简单吧！）
2、打开web.config 添加：

            <system.web>
               ...
                  <httpModules>
                         <add name="MagicAjaxModule" type="MagicAjax.MagicAjaxModule, MagicAjax"/>
                 </httpModules>
              ...
           </system.web>

以上两步就可以实现Ajax了，是不是很简单。如果你觉得loading....很难看，接着来。

3、首先，下载magicAjax源码，拷贝script目录到你的目录里。

4、打开web.config 添加：

5、打开script目录，编辑AjaxCallObject.js（在最后）找到并改成下面的，
           .....
                  function CreateWaitElement() {
                      var elem = document.getElementById('__AjaxCall_Wait');
                   if (!elem) {
                             elem = document.createElement("div");
                             elem.id = '__AjaxCall_Wait';
                             elem.style.position = 'absolute';
                             elem.style.height = 17;
                             elem.border = "1px";
                             elem.style.paddingLeft = "3px";
                             elem.style.paddingRight = "3px";
                             elem.style.fontSize = "12px";
                             elem.style.borderColor = "#990000";
                             elem.style.borderWidth = "0";
                             elem.style.borderStyle="solid";
                             elem.style.backgroundColor = "#990000";
                             elem.style.color = "#FFFFFF";
                             elem.innerHTML = "正在加载...";
                             elem.style.visibility = 'hidden';

                        document.body.insertBefore(elem, document.body.firstChild);
                }
                     waitElement = elem;
                   }
                    // end wait element

           试一下，看看效果，怎么出现乱码？别急，接着改。

6、打开web.config 改
       第一：<?xml version="1.0" encoding="gb2312" ?>
       第二：添加
                      <globalization
                               requestEncoding="gb2312"
                                responseEncoding="gb2312"
                           />

-----------------------------------------------------------------------------------------

       好，再试试！如何，不错吧！大家可能还有更好的方法，期待高手指点！

再加一个定时刷新的：
...
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//每10秒刷新
MagicAjax.AjaxCallHelper.SetAjaxCallTimerInterval(10000);
}
this.Label1.Text = DateTime.Now.ToString();

}
....

从例子入手吧，一个button，一个label，点击button更新lable到当前时间。

设计器上的html：
<div style="width: 300px">
    <ajax:AjaxPanel ID="AjaxPanel1" runat="server">
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></ajax:AjaxPanel>
</div>
输出后的html：
<div>
<input type="hidden" name="__CONTROL_FINGERPRINTS_AjaxPanel1" id="__CONTROL_FINGERPRINTS_AjaxPanel1" value="" />
<input type="hidden" name="AjaxPanel1$RBS_Store" id="AjaxPanel1$RBS_Store" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTg1NTY3MzczD2QWAgIDD2QWAgIBDw9kFgIeCEFqYXhDYWxsBQVhc3luY2RkWqu19ZXiwLYiiNPPAP+GKoHYdzs=" />
</div>
<div style="width: 300px">
    <span id='AjaxPanel1$RBS_Holder'><span id="Span1" AjaxCall="async">
        <span id="Button1$ajaxdest" name="__ajaxmark"><input type="submit" name="Button1" value="Button" id="Submit1" /></span>
        <span id="Label1$ajaxdest" name="__ajaxmark"><span id="Span2">Label</span></span></span></span>
</div>
<script type="text/javascript">

</script>

MagicAjaxModule是一个IHttpModule拦截请求。主要处理在：
void Application_AcquireRequestState(object sender, EventArgs e)
·如果是普通Page，直接输出页面。
·如果请求是“Get”，直接输出页面。
·如果是ajax请求的话，由_request.Form["__AJAXCALL"]判断是否一个ajax请求，如果是则调用HttpContext.Current.Handler.ProcessRequest(HttpContext.Current)并更新相关状态，包括ViewState，最后Flush()页面。在这个过程当中，输出都是交给AjaxCallHelper完成，而这个help最后产生一个script，那么在客户端在接收到这个script，就直接执行：eval(responseText).比如例子中点击button后，最后产生的script是：
AJAXCbo.ExtendedSetHtmlOfElementScript("<span id=/"Label1/">2005-12-8 18:03:22</span>","Label1$ajaxdest");

AJAXCbo.SetFieldScript("__CONTROL_FINGERPRINTS_AjaxPanel1","C04A0FC;Button1#7DA27781;Label1#F84162CA");

AJAXCbo.SetFieldScript("__VIEWSTATE","/wEPDwUKMTkwNzc1NDY4MQ9kFgICAw9kFgICAQ8PZBYCHghBamF4Q2FsbAUFYXN5bmMWAgIDDw8WAh4EVGV4dAUSMjAwNS0xMi04IDE4OjAzOjIyZGRk+HNmUx11Ztw2Z2CodiIhPxrEm4A=");

'AJAX_LOADING_OK'; 由此可以看出，点击button后，返回给客户端，客户端负责解释和执行这个script。
第一行：更新label里面的时间
第二行：更新panel的隐含字段
第三行：更新ViewState
第四行：一个标志，表示请求成功

客户端的js工作流程：
1）首先，他把页面所有的ajaxPanel放在一个array里面：RBS_Controls，而每个panel都对应到另外一个array：RBS_Controls_Store 里面的各个panel的状态。
2）这时候大家注意到页面上这句js：
<script language='javascript'>
    if (typeof(AJAXCbo) == 'undefined')
        alert("Unable to find script library '/AjaxCallObject.js'. Copy the file to the required location, or change the 'scriptPath' setting at magicAjax section of web.config.");
    else
        AJAXCbo.HookAjaxCall(false,false,false);
</script> AjaxCallObject.prototype.HookAjaxCall = function(bPageIsStored, bUnloadStoredPage, bTracing)会hook几个事件：
window.onload， window.onbeforeunload， window.onunload， document.forms[0].onsubmit（这是是重点）
3）点击panel里面的button发出一个submit，由于document.forms[0].onsubmit被hook了，他在这里引发：AJAXCbo.DoAjaxCall(target.name, "", cbType)并return false,就不会引发页面刷新。
4）在DoAjaxCall里面，一个for循环把form里面的内容序列化成字符串放在变量theData里面
5）调用XmlHttp工作：open->onreadystatechange（设置异步完成引发事件）->setRequestHeader->send
不管异步调用还是同步调用，最后都会引发：OnComplete事件，OnComplete就会调用eval(responseText)来执行服务段返回的script了。

AjaxPanel控件：
控件主要render HTML，配合客户端的js工作。
·构造函数初始化控件的panel里面的XmlHttp请求方式。（同步/异步）
·void AddedControl(Control control, int index)把panel里面的服务端控件加到_addedControls这个集合里面，上面就是把Button1和Lable1加载。
·void OnLoad(EventArgs e)注册这个panel的隐含字段，就是上面的__CONTROL_FINGERPRINTS_AjaxPanel1。
·void OnPreRender(EventArgs e) ：如果不是嵌套的panel加入隐含字段AjaxPanel1$RBS_Store和两个变量（RBS_Controls和RBS_Controls_Store）用处处理客户端AJAX调用。这里必要说明一下，这个隐含字段是用于类似ViewState的用途？
·void Render(HtmlTextWriter writer)把非嵌套的panel输出成<span>，就是上面的<span id='AjaxPanel1$RBS_Holder'> ，如果是嵌套的panel就只有顶层的panel有这个<span>。
·void RenderChildren(HtmlTextWriter writer)把panel里面的子控件输出，非服务端控件输出不变。如果是服务端控件就把这个控件放在一个<span>里面，并且id为：控件名称+$ajaxdest，name为：__ajaxmark。最后如果IsPageNoStoreMode是true则注册一个js，他会在客户端执行（AJAXCbo.SetFieldIfEmptyScript），把控件的状态放到__CONTROL_FINGERPRINTS_AjaxPanel1这个隐含字段。
<script type='text/javascript'>
AJAXCbo.SetFieldIfEmptyScript("__CONTROL_FINGERPRINTS_AjaxPanel1","C04A0FC;Button1#7DA27781;Label1#31926D7E");
</script> ·void OnUnload(EventArgs e)IsPageNoStoreMode为true的话，会更新控件的更新控件的状态。

哈～好像写完了，最后给大家一个小秘诀。看看AjaxCallObject.js，当请求的时候，他会象GMail那样在右上脚出现一个Wait...的等待，很cool，你只要在这里做一个小更改，改CreateWaitElement那部分就能达到另外的效果。我这里把请求数据时，改成windows关机时，整个页面变灰的那种效果，类似的js如下： <SCRIPT type="text/javascript">
    
</SCRIPT>

这是一个全新的开放源代码Ajax框架，比我用过的Ajax.NET要方便很多很多，不但需要学习的东西少，而且加入ajax技术后，你的网站甚至可以不用编译，只需要修改ａｓｐｘ文件就可以。这一切让我惊喜不已，所有赶快拿出来和大家分享。MagicAjax.NET支持.NET1.1和2.0，但是目前我下载到的源代码是需要.NET 2.0。

MagicAjax.NET方便之处在于：他提供一个AjaxPanel的容器控件，需要无刷新更新的部分（控件，HTML代码...）放到这个Panel里面就可以; MagicAjax.NET也不需要在程序后台代码中添加什么东西，而且web.config的配置也不复杂。

      我做了个简单的测试程序。用Google的广告来看是否整个页面刷新。
       在页面上拖放一个AjaxPanel控件，然后把Botton和Label控件放到里面。如果把Botton放到Panel外面，那么会整页刷新。

Botton控件的事件代码是：