MagicAjax的用法, 每10秒刷新, 更改等待loading效果

妖狐艹你老母 2021-12-02 00:56 117阅读 0赞

一、使用MagicAjax  
  
  1、打开vs 添加 MagicAjax.dll，就会有AjaxPanel 控件，就往上拖东西吧。（简单吧！）  
代码如下：  
<%@ Register TagPrefix="ajax" Namespace="MagicAjax.UI.Controls" Assembly="MagicAjax" %>

<ajax:AjaxPanel ID="AjaxPanel1" runat="server">  
</ajax:AjaxPanel>

2、打开web.config 添加：  
  
        <configSections>  
           <section name="magicAjax" type="MagicAjax.Configuration.MagicAjaxSectionHandler, MagicAjax"/>  
        </configSections>  
  
            <system.web>  
               ...  
                  <httpModules>  
                         <add name="MagicAjaxModule" type="MagicAjax.MagicAjaxModule, MagicAjax"/>  
                 </httpModules>  
              ...  
           </system.web>  
  
       以上两步就可以实现Ajax了，是不是很简单。  
  
二、修改loading....效果  
如果你觉得loading....很难看，接着来。  
 3、首先，下载magicAjax源码，拷贝script目录到你的目录里。  
  
4、 打开web.config 添加：  
  
           <magicAjax tracing="false" scriptPath="~/script">  
            <pageStore/>  
           </magicAjax>  
  
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();  
  
\}

看看AjaxCallObject.js，当请求的时候，他会象GMail那样在右上脚出现一个Wait...的等待，很cool，你只要在这里做一个小更改，**改CreateWaitElement那部分就能达到另外的效果**。**我这里把请求数据时，改成windows关机时，整个页面变灰的那种效果**，类似的js如下：

< SCRIPT  type ="text/javascript" >   
        
 </ SCRIPT >

补充一下：改最后那个windows关机效果的时候，要这句在aspx文件上面。  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" " [http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"][http_www.w3c.org_TR_1999_REC-html401-19991224_loose.dtd] >

**四、如何改变那个很cool的Wait...的等待显示位置:**

**很cool的Wait...的等待显示位置我已经找到修改的位置了，在这个函数里改就可以**  
  
function MoveWaitElement()  
\{  
if (!waitElement)  
CreateWaitElement();  
  
var width = document.body.clientWidth;  
waitElement.style.top = document.body.scrollTop;  
waitElement.style.left = width + document.body.offsetLeft - waitElement.offsetWidth;  
\}

想输入客户端脚本，但是使用Response.Write("<script>...</script>");不行的，不知道如何输入出我的客户端脚本呢？

尝试用：  
AjaxCallHelper.WriteXXXX(...);

转载于:https://www.cnblogs.com/wj110reg/articles/847755.html

[http_www.w3c.org_TR_1999_REC-html401-19991224_loose.dtd]: http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd%22