function getEditorHTMLContents(EditorName)
{ 
    var oEditor = FCKeditorAPI.GetInstance(EditorName); 
    return(oEditor.GetXHTML(true)); 
}

2、获取编辑器中文字内容（在博客发布时获取无html代码摘要使用åQ?/p>

function getEditorTextContents(EditorName)
{ 
    var oEditor = FCKeditorAPI.GetInstance(EditorName); 
    return(oEditor.EditorDocument.body.innerText); 
}

3、设¾|®ç¼–辑器中内å®?/p>

function SetEditorContents(EditorName, ContentStr)
{ 
    var oEditor = FCKeditorAPI.GetInstance(EditorName) ; 
    oEditor.SetHTML(ContentStr) ; 
}

在不同的‹¹è§ˆå™¨ä¸Šé»˜è®¤çš„拖拽能解决的问题相当少,所以有很多的框枉™ƒ½èƒ½å®žçŽ°è¿™ä¹ˆä¸ªåŠŸèƒ½.使用拖拽行äؓ能很好的改善用户体验,ž®¤å…¶æ˜¯åœ¨è´­ç‰©çš„时候能让用æˆäh„Ÿåˆ°å¾ˆæ–°å¥‡å’Œä½“é?Script.aculo.us使用了三个类实现拖拽和排åº?它们是Draggable,Droppable,Sortable.要实çŽîC¸€ä¸ªå®Œæ•´çš„拖拽行äØ“,需要Draggable,å’ŒDroppable的配合ä‹Éç”?ç”׃ºŽ˜q™è¿žä¸ªç±»çš„方法比较多,我只选取比较实用的几个方法进行介¾l?˜q˜æ˜¯è€è§„çŸ?先看看Demo:http://www1.qcxy.hb.cn/qphy/Script_Aculo_Us/DragDrop.html

Draggable

new Draggable("DraggableId"[,options])

主要选项

• snap:推拽的最ž®å•ä½?默认为false,可以是数¾l„或者函æ•?ž®†è¿™ä¸ªå±žæ€§è®¾¾|®äØ“[50,50],意味着最ž®çš„位移单位æ˜?0px,50px,如果讄¡½®ä¸ÞZ¸€ä¸ªå‡½æ•?˜q™ä¸ªå‡½æ•°çš„参æ•îCØ“(x,y),˜q™ä¸ªx,y指示当前的绝对坐æ ?函数应该˜q”回二维数组,上面的例子中的Drag(UnAcceptable)推拽到页面的左上角是ž®×ƒ¼š"吔R™„"上去,ž®±æ˜¯å› äؓ函数的作ç”?详细见源ç ?
• revert:推拽完毕之后是否回到原来的位¾|?默认为false,也可以是一个函æ•?˜q™ä¸ªå‡½æ•°å¿…é¡»˜q”回true/false
• handle:"提手",¿UÕdŠ¨æ•´ä¸ªå—的时候通常不需要在整个块的区域都可以拖æ‹?比如¿UÕdŠ¨ä¸€ä¸ªæ ç›?通常只需要拖拽标é¢?比如Google的个性化主页),ž®†è¯¥å±žæ€§è®¾¾|®äؓ标题的Id
• ghosting:推拽的过½E‹ä¸­æ˜¯å¦æ˜„¡¤º"影子",默认为false
• constraint:限制能拖动的方向,默认的两个方向都可以,可以讄¡½®ä¸?vertical","horizontal"çš„ä“Qæ„?
• zindex:"影子"çš„z-Index属æ€?
• scroll:拖拽å‡ø™§†å›¾èŒƒå›´æ˜¯å¦æ˜¾½Cø™‡ªåŠ¨æ»šåŠ?
• scrollSensitivity/scrollSpeed:默认值分ä¸ÞZØ“20/15,控制滚动的敏感度和滚动速度
• delay:拖拽前的延时,开始拖拽后¾lè¿‡˜q™ä¸ªæ—‰™—´æ‰?回过¼œžæ¥"

˜q™é‡Œéœ€è¦è¯´æ˜Žçš„是åƈ非所有的标签都支持该行äØ“,详细的情况请参阅官方文档

API

• onStart:开始拖拽调用该函数,接受两个参数(obj,oEvent)前者是$(DraggableId),后者是当前事äšgçš„event对象
• onDrag:在拖拽过½E‹ä¸­åå¤çš„调用该函数,同样接受两个参数(obj,oEvent)
• change:在onDrag后调ç”?也会反复调用
• onEnd:拖拽行äØ“¾l“束调用,即鼠标弹èµäh—¶‹È€å?
• destroy():该方法销毁元素的拖拽行äØ“

Droppables

Droppables(注意是复数åÅžå¼?是一个抽象类,不能被实例化,只有一些静态方æ³?常用的方法有addå’Œmove,分别增加可放¾|®å…ƒç´?和去除可攄¡½®å…ƒç´ 

addæ–ÒŽ³•:Dropables.add("ContainerId"[,options]),常用的选项

• accept: 数组或者字½W¦ä¸²,表示该容器接受的元素的className的集å?默认的ä“Q何元素都接收
• hoverclass:当符合接受要求的元素拖至容器上时,å…¶className
• onDrop():被拖拽的½W¦åˆè¦æ±‚的元素在˜q™é‡Œæ”„¡½®æ—¶è°ƒç”¨è¯¥å‡½æ•°,接受三个参数(draggable,droppable,oEvent),draggable是被拖拽元素,droppable是被攄¡½®å…ƒç´ ,oEvent当前事äšg对象

remove("ContainerId"),该方法去除容器的攄¡½®è¡ŒäØ“

(上面例子的源代码)

Sortable

Sortable是一¾l„可以通过拖拽交换位置的元ç´?可以先看看实ä¾?

• ghosting:拖动时是否显½C?影子",默认为false
• constraint:允许的拖动方å?默认ä¸ÞZ¸¤ä¸ªæ–¹å‘都可以,å€égØ“"horizontal","vertical"中的ä»ÖM¸€
• tag:能被拖动元素的标½{?默认ä¸?li"
• hoverclass:拖动¾lè¿‡å¯ä»¥æ”„¡½®çš„位¾|®æ˜¯,可放¾|®çš„元素的className
• dropOnEmpty:默认为false,是否在空的元素上攄¡½®
• handle/delayscroll/scrollSensitivity/scrollSpeed::同Draggable
• containment:数组,存放所有的攄¡½®å…ƒç´ çš„ID,参见实例的最后一个例å­?
• onUpdate():该方法接受参æ•?("ContainerId"),在拖动到可放¾|®ä½¾|®æ˜¯è°ƒç”¨è¯¥æ–¹æ³?
• onChange():¾l“束拖拽行äؓ时调用该æ–ÒŽ³•,接受参数element,表示被拖拽的元素

serialize(sortable)æ–ÒŽ³•:该方法返回当前容器内元素的次åº?但是要求子元素的idå¿…é¡»ä»?item_"å¼€å¤?且返回格式有讲究,看下面的例子

<div id="horizontalSortable" class="item" style="margin-top:20px; height:40px;">
      <div id="item_5">IE</div>
      <div id="item_6">FireFox</div>
      <div id="item_7">Safari</div>
      <div id="item_8">Opera</div>
</div>

Sortable.create("horizontalSortable",
{
     ghosting:true,
     tag:'div',
     constraint:'horizontal',
     hoverclass:'hoverClass2'
});

Sortable.serialize('horizontalSortable')
//-->horizontalSortable[]=5&horizontalSortable[]=6&horizontalSortable[]=7&horizontalSortable[]=8

最后看一个例å­?前面提到的containment选项在某些情况下很有ç”?比如要实çŽîC¸¤ä¸ªå®¹å™¨é‡Œçš„元素可以互ç›æ€º¤æ¢å­å…ƒç´ ,即从一个容器拖至ä×o一个容器中.来看下面的例å­?/p>

<script type="text/javascript">
  Sortable.create('sortUlLeft',{containment:['sortUlLeft','sortUlRight'], dropOnEmpty:true,ghosting:true,constraint:false,hoverclass:'hoverClass'});
  Sortable.create('sortUlRight',{containment:['sortUlLeft','sortUlRight'], dropOnEmpty:true,ghosting:true,constraint:false,hoverclass:'hoverClass'});

</script>

上面的例子可以实现sortUlLeft,和sortUlRight的子元素互相交换

首先创徏一个jsp

<%@ page language="java" pageEncoding="UTF-8"%>

<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/controls.js"></script>
<style>
div.auto_complete {
  width: 350px;
  background: #fff;
}
div.auto_complete ul {
  border:1px solid #888;
  margin:0;
  padding:0;
  width:100%;
  list-style-type:none;
}
div.auto_complete ul li {
  margin:0;
  padding:3px;
}
div.auto_complete ul li.selected {
  background-color: #ffb;
}
div.auto_complete ul strong.highlight {
  color: #800;
  margin:0;
  padding:0;
}
</style>

</head>
<body>
<input type="text" id="autocomplete"/>
<div id="results" class="auto_complete"></div>
<script type="text/javascript">
 new Ajax.Autocompleter(
  "autocomplete",
  "results",
  "list.html", {
   method: "GET"
  }
 );
</script>
</body>
</html>

list.html

<ul>
<li>Aria</li>
<li>Aaaa</li>
<li>Afdsa</li>
<li>bsa</li>
</ul>

上面list.html采用静态页面返回列表，读者可以ä‹É用动态页面返回结果ã€?

作äؓ一个Ajax开发框æžÓž¼ŒPrototype对Ajax开发提供了有力的支持。在Prototype中，与Ajax相关的类和对象包括：Ajax、Ajax.Responsders、Ajax.Base、Ajax.Request、Ajax. PeriodicalUpdaterå’ŒAjax.UpdateråQŒå›¾2-3所½CÞZØ“˜q™äº›¾cÕd’Œå¯¹è±¡ä¹‹é—´çš„å…³¾pÕdŠå…¶å¸¸ç”¨å±žæ€§å’Œæ–ÒŽ³•åQŒä¸‹é¢åˆ†åˆ«å¯¹˜q™äº›¾cÕd’Œå¯¹è±¡˜q›è¡Œä»‹ç»ã€?/p>

å›?-3  Prototype中Ajax相关¾cÕd’Œå¯¹è±¡å…³ç³»½Cºæ„å›?/p>

2.3.1  Ajax对象

Ajax对象为其他的Ajax功能¾cÀLä¾›äº†æœ€åŸºæœ¬çš„支持，它的实现å¦?.2.7节中ä¾?-10所½Cºï¼Œå…¶ä¸­åŒ…括一个方法getTransport和一个属性activeRequestCount。getTransportæ–ÒŽ³•˜q”回一个XMLHttpRequest对象åQŒactiveRequestCount属性代表正在处理中的Ajaxè¯äh±‚的个数ã€?/p>

2.3.2  Ajax.Base¾c?/h3>

Ajax.Base¾cÀL˜¯Ajax.Request¾cÕd’ŒAjax.PeriodicalUpdater¾cȝš„基类。它提供äº?个方法：

l  setOptionsåQšè®¾¾|®Ajax操作所使用的选项ã€?/p>

l  responseIsSuccessåQšåˆ¤æ–­Ajax操作是否成功ã€?/p>

l  responseIsFailureåQšåˆ¤æ–­Ajax操作是否å¤ÞpÓ|åQˆä¸ŽresponseIsSuccess相反åQ‰ã€?/p>

Ajax.Base¾cȝš„主要作用是提取出一些公用的æ–ÒŽ³•åQŒå…¶ä»–类通过¾l§æ‰¿çš„方式ä‹É用这些方法，实现代码复用ã€?/p>

2.3.3  Ajax.Request¾c?/h3>

˜q™æ˜¯Prototype中最¾lå¸¸ä½¿ç”¨çš„一个Ajax相关¾c…R€‚Ajax.Request¾cȝš„æ–ÒŽ³•é€šå¸¸æ˜¯å†…部ä‹É用的åQŒå› æ­¤è¿™é‡Œå°±ä¸ä¸€ä¸€åˆ—ä‹DåQŒæœ‰å…´è¶£çš„读者可以参考Prototype的源代码。这里重点讲讲如何ä‹É用Ajax.Request¾c»ï¼Œé¦–å…ˆ¾l™å‡ºä¸€ä¸ªæœ€½Ž€å•çš„Ajax.Request¾cȝš„应用½CÞZ¾‹åQŒå¦‚ä¾?-11所½Cºï¼Œæ³¨æ„½CÞZ¾‹ä¸­çš„黑体字ã€?/p>

ä¾?-11  Ajax.Request¾cÕdº”用示ä¾?/p>

Ajax.Request‹¹‹è¯•™åµé¢åQ?/strong>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

    <head>

        <title>chapter 3</title>

        <script type="text/javascript" language="javascript"

         src="prototype.js" ></script>

        <script type="text/javascript" language="javascript">

        function test() {

            // 创徏Ajax.Request对象åQŒå‘起一个Ajaxè¯äh±‚

            var myAjax = new Ajax.Request(

                'data.html', // è¯äh±‚çš„URL

                {

                    method: 'get',  // 使用GET方式发送HTTPè¯äh±‚

                    onComplete: showResponse // 指定è¯äh±‚成功完成旉™œ€è¦æ‰§è¡Œçš„æ–ÒŽ³•

                }

            );

        }

        function showResponse(response) {

            $('divResult').innerHTML = response.responseText;

        }

        </script>

    </head>

    <body>

    <input type="button" value="click" onclick="test()" />

    <div id="divResult" />

    </body>

</html>

data.htmlåQ?/strong>

<input type="text" id="name" />

<input type="button" value="Click Me" onclick="sayHi()">

Ajax.Request对象在初始化旉™œ€è¦æä¾›ä¸¤ä¸ªå‚敎ͼš½W?个参数是ž®†è¦è¯äh±‚™åµé¢çš„URLåQŒè¿™é‡Œä‹É用的data.html是一个普通的HTML静态页面；½W?个参数是Ajax操作的选项åQŒåœ¨Prototype中åƈ没有专门为Ajax操作选项定义一个类åQŒé€šå¸¸éƒ½æ˜¯åƒä¾‹2-11˜q™æ ·åQŒé€šè¿‡åŒ¿åå¯¹è±¡çš„方式设¾|®Ajax操作的参数。在ä¾?-11中，Ajax操作选项å…ähœ‰ä¸¤ä¸ªå±žæ€§ï¼šmethod表示HTTPè¯äh±‚方式åQŒé»˜è®¤æ˜¯POST方式åQ›onComplete指定了Ajax操作完成以后åQˆå³XMLHttpRequest对象的status属性äØ“4æ—Óž¼‰åQŒé¡µé¢å°†è¦æ‰§è¡Œçš„函数。当ç„Óž¼ŒAjax操作˜q˜åŒ…括很多其他选项åQŒå¦‚è¡?-1所½Cºã€?/p>

è¡?-1  Ajax操作选项属性含ä¹?/p>

属性名¿U?/p>	含义
method	HTTPè¯äh±‚方式åQˆPOST/GET/HEADåQ‰ã€?/p>
parameters	在HTTPè¯äh±‚中传入的URL格式的值列表，即URL串中问号之后的部分ã€?/p>
asynchronous	是否做异步XMLHttpRequestè¯äh±‚ã€?/p>
postBody	在POSTè¯äh±‚方式下，传入è¯äh±‚体中的内宏V€?/p>
requestHeaders	和请求一赯‚¢«ä¼ å…¥çš„HTTP头部列表åQŒè¿™ä¸ªåˆ—表必™åÕd«æœ‰å¶æ•îC¸ª™å¹ç›®åQŒå› ä¸ºåˆ—表中每两™å¹äؓ一¾l„，分别代表自定义部分的名称和与之对应的字符串倹{€?/p>
onXXXXXXXX	在HTTPè¯äh±‚、响应的˜q‡ç¨‹ä¸­ï¼Œå½“XMLHttpRequest对象状态发生变化时调用的响应函数。响应函数有5个：onUninitialized、onLoading、onLoaded、onInteractiveå’ŒonComplete。传入这些函数的参数可以æœ?个，其中½W?个参数是执行HTTPè¯äh±‚çš„XMLHttpRequest对象åQŒç¬¬2个参数是包含被执行的X-JSON响应的HTTP头ã€?/p>
onSuccess	Ajax操作成功完成时调用的响应函数åQŒä¼ å…¥çš„参数与onXXXXXXXX相同ã€?/p>
onFailure	Ajax操作è¯äh±‚完成但出现错误时调用的响应函敎ͼŒä¼ å…¥çš„参æ•îC¸ŽonXXXXXXXX相同ã€?/p>
onException	Ajax操作发生异常情况时调用的响应函数åQŒå®ƒå¯ä»¥æŽ¥æ”¶2个参敎ͼŒå…¶ä¸­½W?个参数是执行HTTPè¯äh±‚çš„XMLHttpRequest对象åQŒç¬¬2个参数是异常对象ã€?/p>

2.3.4  Ajax.Updater¾c?/h3>

ä¾?-11使用Ajax.Request¾cÕd®žçŽîCº†™åµé¢çš„局部刷新效果，而这æ ïL±»ä¼¼çš„功能在Ajax应用中是¾lå¸¸ä½¿ç”¨çš„。因此，ä¸ÞZº†½Ž€åŒ–è¿™¿Uå·¥ä½œï¼ŒPrototype框架从Ajax.Requet¾cÖM¸­‹z„¡”Ÿå‡ÞZ¸€ä¸ªå­¾c Z€”—Ajax.Updater。与Ajax.Request相比åQŒAjax.Updater的初始化多了一个container参数åQŒè¯¥å‚数代表ž®†è¦æ›´æ–°çš„页面元素的id。例2-11的功能通过Ajax.Updater的实玎ͼŒä¼šå˜å¾—更加简单，如例2-12所½Cºã€?/p>

ä¾?-12  Ajax.Updater¾cȝš„应用½CÞZ¾‹

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

    <head>

        <title>chapter 3</title>

        <script type="text/javascript" language="javascript"

         src="prototype.js" ></script>

        <script type="text/javascript" language="javascript">

        function test() {

            var myAjax = new Ajax.Updater(

                'divResult', // 更新的页面元ç´?/strong>

                'data.html', // è¯äh±‚çš„URL

                {

                    method: 'get'

                }

            );

        }

        </script>

    </head>

    <body>

    <input type="button" value="click" onclick="test()" />

    <div id="divResult" />

    </body>

</html>

此外åQŒAjax.Updater¾c»è¿˜æœ‰å¦å¤–一个功能，如果è¯äh±‚的页面内容中包括JavaScript脚本åQŒAjax.Updater¾cÕd¯ä»¥æ‰§è¡Œå…¶ä¸­çš„脚本åQŒåªéœ€è¦åœ¨Ajax操作选项中增加属æ€?#8220;evalScripts: true”卛_¯ã€‚对ä¾?-11中的data.html˜q›è¡Œä¿®æ”¹åQŒåœ¨å…¶ä¸­åŠ å…¥JavaScript脚本åQŒå¦‚ä¾?-13所½Cºã€?/p>

ä¾?-13  data.html

<script language="javascript" type="text/javascript">

sayHi = function() {

    alert("Hello, " + $F('name') + "!");

}

</script>

<input type="text" id="name" />

<input type="button" value="Click Me" onclick="sayHi()">

调用Ajax.Updater的JavaScript脚本修改为：

function test() {

    var myAjax = new Ajax.Updater(

        'divResult', // 更新的页面元ç´?/p>

        'data.html', // è¯äh±‚çš„URL

        {

            method: 'get',

            evalScripts: true

        }

    );

}

˜q™æ ·ž®±å¯ä»¥ä‹É用data.html™åµé¢çš„内å®ÒŽ›´æ–°å½“前页面中çš?lt;div>元素divResultåQŒåƈ且执行data.html™åµé¢ä¸­åŒ…含的JavaScript脚本ã€?/p>

˜q™é‡Œéœ€è¦æ³¨æ„çš„是例2-13中sayHi函数的写法，如果写成

function sayHi() {

    alert("Hello, " + $F('name') + "!");

}

或�/p>

var sayHi = function() {

    alert("Hello, " + $F('name') + "!");

}

½E‹åºæ˜¯ä¸èƒ½æ­£å¸¸è¿è¡Œçš„。这是因为Ajax.Updater执行脚本是通过eval的方式，而不是将脚本内容引入到当前页面，直接声明的function sayHi或者用var声明的sayHi函数åQŒå…¶ä½œç”¨åŸŸåªæ˜¯åœ¨˜q™æ®µè„šæœ¬å†…部åQŒå¤–部的其他脚本不能讉K—®sayHi函数。而按照例2-13的方式声明的函数åQŒå…¶ä½œç”¨åŸŸæ˜¯æ•´ä¸ªwindowã€?/p>

2.3.5  Ajax.PeriodicalUpdater¾c?/h3>

å’ŒAjax.Request¾cȝ›¸ä¼û|¼ŒAjax.PeriodicalUpdater¾cÖM¹Ÿ¾l§æ‰¿è‡ªAjax.Base¾c…R€‚在一些Ajax应用中，需要周期性地更新某些™åµé¢å…ƒç´ åQŒä¾‹å¦‚天气预报、即时新é—ȝ­‰½{‰ã€‚实现这æ ïLš„功能通常要ä‹É用JavaScript中的定时器函数setTimeout、clearTimeout½{‰ï¼Œè€Œæœ‰äº†Ajax.PeriodicalUpdater¾cÕd¯ä»¥å¾ˆå¥½åœ°½Ž€åŒ–è¿™¾cȝ¼–码工作ã€?/p>

新徏一个Ajax. PeriodicalUpdater¾cȝš„实例需要指å®?个参敎ͼš

l  containeråQšå°†è¦æ›´æ–°çš„™åµé¢å…ƒç´ idåQ?/p>

l  urlåQšè¯·æ±‚çš„URL地址åQ?/p>

l  optionsåQšAjax操作选项ã€?/p>

å’ŒAjax.Updater¾cȝ›¸ä¼û|¼ŒAjax.PeriodicalUpdater¾cÖM¹Ÿæ”¯æŒåŠ¨æ€æ‰§è¡ŒJavaScript脚本åQŒåªéœ€åœ¨Ajax操作选项中增加（evalScripts: trueåQ‰å±žæ€§å€¼å³å¯ã€?/p>

Ajax.PeriodicalUpdater¾cÀL”¯æŒä¸¤ä¸ªç‰¹ŒDŠçš„Ajax操作选项åQšfrequencyå’Œdecay。frequency参数很容易理解，既然是定时更新页面元素，或者定时执行脚本，那么多长旉™—´æ›´æ–°æˆ–者执行一‹Æ¡å‘¢åQŸfrequency指的ž®±æ˜¯ä¸¤æ¬¡Ajax操作之间的时间间隔，单位是秒åQŒé»˜è®¤å€égØ“2¿U’ã€?/p>

如果仅指定frequency参数åQŒç¨‹åºä¼šæŒ‰ç…§å›ºå®šçš„时间间隔执行Ajax操作。这æ ïLš„æ›´æ–°½{–略合理吗？½{”案取决于请求URL中数据的更新频率。如果请求的数据会很有规律地按照固定频率改变åQŒé‚£ä¹ˆåªè¦è®¾¾|®ä¸€ä¸ªåˆé€‚çš„frequencyå€û|¼Œž®±å¯ä»¥å¾ˆæœ‰æ•ˆåœ°å®žçŽ°é¡µé¢çš„定时更新。然而实际应用中的数据往往不会那么理想åQŒä¾‹å¦‚新闻，可能在一天中只有特定的一ŒD‰|—¶é—´æ›´æ–°é¢‘率会很高åQŒè€Œåœ¨å…¶ä»–æ—‰™—´åˆ™å‡ ä¹Žæ²¡æœ‰å˜åŒ–。经帔R‡åˆ°è¿™æ ïLš„情况该怎么办呢åQŸAjax.PeriodicalUpdater¾cÀL”¯æŒçš„decay属性就是äؓ了解册™¿™ä¸ªé—®é¢˜è€Œäñ”生的。当option中带有decay属性时åQŒå¦‚果请求返回的数据与上‹Æ¡ç›¸åŒï¼Œé‚£ä¹ˆä¸‹æ¬¡˜q›è¡ŒAjax操作的时间间隔会乘以一个decay的系数ã€?/p>

ä¸ÞZº†æ¯”较明显地看到decay属性的效果åQŒåœ¨è¯äh±‚的测试页面中加入记录旉™—´çš„脚本，代码如例2-14所½Cºã€?/p>

ä¾?-14  Ajax.PeriodicalUpdater¾cÕdº”用示ä¾?/p>

ex10.htmlåQ?/strong>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

    <head>

        <title>chapter 3</title>

        <script type="text/javascript" language="javascript"

         src="prototype.js" ></script>

        <script type="text/javascript" language="javascript">

        var str='';

        var intcount=0;

        function test() {

            var myAjax = new Ajax.PeriodicalUpdater(

                'divResult', // 定时更新的页面元ç´?/p>

                'script1.html', // è¯äh±‚çš„URL

                {

                    method: 'get', // HTTPè¯äh±‚的方式äØ“GET

                    evalScripts: true, // 是否执行è¯äh±‚™åµé¢ä¸­çš„脚本

                    frequency: 1, // 更新的频çŽ?/p>

                    decay: 1 // 衰减¾pÀL•°

                }

            );

        }

        </script>

    </head>

    <body>

    <input type="button" value="click" onclick="test()" />

    <div id="divResult" ></div>

    <div id="divResult2" ></div>

    </body>

</html>

script1.html:

<script language="javascript" type="text/javascript">

// Ajax.PeriodicalUpdater调用函数计数

// åœ?lt;div>元素divResult2中增加一行结果，òq¶è®°å½•å½“前时间和

// Ajax.PeriodicalUpdater的调用次�/p>

intcount++;

str = $('divResult2').innerHTML;

$('divResult2').innerHTML = str + "count = " + intcount+ ": " + new Date() + "<br>";

</script>

ä¾?-14的运行结果如å›?-4所½Cºã€?/p>

å›?-4  Ajax.PeriodicalUpdater¾cÕdº”用示ä¾?/p>

可以看到åQŒç”±äºŽè¯·æ±‚返回的数据一直没有发生变化，每次è¯äh±‚æ—‰™—´çš„间隔是上一‹Æ¡çš„2倍（decay=2åQ‰ã€‚如果某一‹Æ¡è¯·æ±‚返回的数据发生了变化，那么执行è¯äh±‚的时间间隔则恢复到初始倹{€?/p>

2.3.6  Ajax.Responders对象

Ajax.Responders对象¾l´æŠ¤äº†ä¸€ä¸ªæ­£åœ¨è¿è¡Œçš„Ajax对象列表åQŒåœ¨éœ€è¦å®žçŽîC¸€äº›å…¨å±€çš„功能时ž®±å¯ä»¥ä‹É用它。例如，在Ajaxè¯äh±‚发出以后需要提½Cºç”¨æˆäh“ä½œæ­£åœ¨æ‰§è¡Œä¸­åQŒè€Œæ“ä½œè¿”回以后则取消提示。利用Ajax.Responders对象ž®±å¯ä»¥å®žçŽ°è¿™æ ïLš„功能åQŒå¦‚ä¾?-15所½Cºã€?/p>

ä¾?-15  Ajax.Responders对象应用½CÞZ¾‹

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

    <head>

        <title>chapter 3</title>

        <script type="text/javascript" language="javascript"

         src="prototype.js" ></script>

        <script type="text/javascript" language="javascript">

        function test() {

            var myAjax = new Ajax.Request(

                'data.html',

                {

                    method: 'get',

                    onComplete: showResponse

                }

            );

        }

        function showResponse(response) {

            $('divResult').innerHTML = response.responseText;

        }      

        var handle = {

            onCreate: function() {

                Element.show('loading'); // 当创建Ajaxè¯äh±‚æ—Óž¼Œæ˜„¡¤ºloading

            },

            onComplete: function() {

                // 当请求成功返回时åQŒå¦‚果当前没有其他正在运行中的Ajaxè¯äh±‚åQŒéšè—loading

                if (Ajax.activeRequestCount == 0) {

                    Element.hide('loading');

                }

            }

        };

        // ž®†handle注册到全局的Ajax.Responders对象中，使其生效

        Ajax.Responders.register(handle);

        </script>

    </head>

    <body>

    <input type="button" value="click" onclick="test()" />

    <div id="divResult" ></div>

    <div id='loading' style="display:none">

        <img src="loading.gif">Loading...

    </div>

    </body>

</html>

ä¾?-15中定义了一个handle对象åQŒå…¶ä¸­åŒ…含onCreateå’ŒonComplete函数。页面中发出ä»ÖM½•ä¸€ä¸ªAjaxè¯äh±‚æ—‰™ƒ½ä¼šè°ƒç”¨onCreateæ–ÒŽ³•åQŒè€Œè¯·æ±‚完成时都会调用onCompleteæ–ÒŽ³•ã€‚例2-15的运行结果如å›?-5所½Cºã€?br />

feingto 2007-12-30 18:03 发表评论

]]>http://www.aygfsteel.com/feingto/archive/2007/12/29/171538.htmlfeingtofeingtoSat, 29 Dec 2007 06:59:00 GMThttp://www.aygfsteel.com/feingto/archive/2007/12/29/171538.htmlhttp://www.aygfsteel.com/feingto/comments/171538.htmlhttp://www.aygfsteel.com/feingto/archive/2007/12/29/171538.html#Feedback0http://www.aygfsteel.com/feingto/comments/commentRss/171538.htmlhttp://www.aygfsteel.com/feingto/services/trackbacks/171538.html阅读全文

feingto 2007-12-29 14:59 发表评论

]]> Ö÷Õ¾Ö©Öë³ØÄ£°å£º ³¤´ºÊÐ| »ôÖÝÊÐ| ±£¿µÏØ| ÇúËÉÏØ| Çø¡£| ͨ³ÇÏØ| ÐÂÃñÊÐ| Î÷ÏçÏØ| Å©°²ÏØ| ÁéèµÏØ| °¢°ÓÏØ| ÅîϪÏØ| ÐÂç­ÏØ| ÁúȪÊÐ| ·ïÑôÏØ| ¹®ÒåÊÐ| ´ÈϪÊÐ| ´óÌïÏØ| ÍòÈ«ÏØ| ºø¹ØÏØ| °ºÈÊÏØ| ¡»ØÏØ| ƽ¶ÈÊÐ| ξÊÏÏØ| ¶«¹âÏØ| ¿µ¶¨ÏØ| ·Ê¶«ÏØ| ºìºÓÏØ| ±¦·áÏØ| ÒËÀ¼ÏØ| ß®ÑôÏØ| °²¿µÊÐ| ËÄ×ÓÍõÆì| ÑǶ«ÏØ| ÇåºÓÏØ| ²ÔɽÏØ| ³£µÂÊÐ| Èʲ¼ÏØ| »ª³ØÏØ| ºÍÁÖ¸ñ¶ûÏØ| À¥É½ÊÐ|