prototype.js 的 Ajax.updater 的 用法

[size=medium]
http://www.cnblogs.com/beyondGodLike/archive/2009/08/04/1538543.html
一、ajax.updater
方法有3个参数: ajax.updater(container, url, options)
分别表示 1.控件id；2.请求的url；3.具体如下（可选）：

属性 类型 Default 描述

method Array 'post' HTTP 请求方式。get or post

parameters String '' 在HTTP请求中传入的url格式的值列表。

asynchronous Boolean true 指定是否做异步 AJAX 请求。

postBody String undefined 在HTTP POST的情况下，传入请求体中的内容。

requestHeaders Array undefined 和请求一起被传入的HTTP头部列表， 这个列表必须含有偶数个项目， 任何奇数项目是自定义的头部的名称， 接下来的偶数项目使这个头部项目的字符串值。 例子:['my-header1', 'this is the value', 'my-other-header', 'another value']

onXXXXXXXX Function(XMLHttpRequest) undefined 在AJAX请求中，当相应的事件/状态形成的时候调用的自定义方法。 例如 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 这个方法将被传入一个参数， 这个参数是携带AJAX操作的 XMLHttpRequest对象。

onSuccess Function(XMLHttpRequest) undefined 当AJAX请求成功完成的时候调用的自定义方法。 这个方法将被传入一个参数， 这个参数是携带AJAX操作的 XMLHttpRequest对象。

onFailure Function(XMLHttpRequest) undefined 当AJAX请求完成但出现错误的时候调用的自定义方法。 这个方法将被传入一个参数， 这个参数是携带AJAX操作的 XMLHttpRequest对象。

insertion Function(Object, String) null 为了把返回的文本注入到一个元素中而执行的方法。 这个方法将被传入两个参数，要被更新的对象并且只应用于 Ajax.Updater 的响应文本 。

evalScripts Boolean undefined, false 决定当响应到达的时候是否执行其中的脚本块，只在 Ajax.Updater 对象中应用。

decay Number undefined, 1 决定当最后一次响应和前一次响应相同时在
Ajax.PeriodicalUpdater 对象中的减漫访问的次数， 例如，如果设为2，后来的刷新和之前的结果一样， 这个对象将等待2个设定的时间间隔进行下一次刷新， 如果又一次一样， 那么将等待4次，等等。 不设定这个只，或者设置为1，将避免访问频率变慢。

function getContents()
{
var request_url = "test1.html"; // 需要获取内容的url
var request_pars = '';//请求参数

var myAjax = new Ajax.Updater('result', request_url,{ // 将request_url返回内容绑定到id为result的容器中
method : 'get', //HTTP请求的方法,get or post
parameters : request_pars, //请求参数
onFailure : reportError, //失败的时候调用 reportError 函数
onLoading : loading, //正在获得内容的时候
onComplete : done //内容获取完毕的时候
});
}

function loading()
{
$('loading').style.display = 'block';
}

function done()
{
$('loading').style.display = 'none';
}

function reportError(request)
{
alert('Sorry. There was an error.');
}


Ajax.Updater为我们提供加载文档时候的三种状态, onComplete,onLoading,onFailure.我们可以自定义一个函数分别相应这三种不同的状态。
下面的例子用到了success (一切OK的时候才被用到) ，和它同等地位的属性还有一个failure (有地方出问题的时候被用到) 这里没用到。出错时在 onFailure 处调用 reportError 方法。
复制代码
<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
var myAjax = new Ajax.Updater(
{success: 'placeholder'},
url,
{method: 'get', parameters: pars, onFailure: reportError});
}
function reportError(request)
{
alert('Sorry. There was an error.');
}
</script>

<input type=button value=GetHtml οnclick="getHTML()">
<div id="placeholder"></div>

二、使用 Ajax.Request 类 详解

使用 Ajax.Request 类 ,其实这个JS类不是系统自带的,而是网上的高人写的通用的JS类库,被广泛的使用,这个JS类为:prototype.js。
如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建 XMLHttpRequest 对象并且异步的跟踪它的进程，然后解析响应并处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。

为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。

假如你有一个应用程序可以通过 http://yoursever/app/get_sales?empID=1234&year=1998 与服务器通信。它返回下面这样的 XML 响应：

<?xml version="1.0" encoding="utf-8" ?>
<ajax-response>
<response type="object" id="productDetails">
<monthly-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-01</year-month>
<sales>$8,115.36</sales>
</employee-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-02</year-month>
<sales>$11,147.51</sales>
</employee-sales>
</monthly-sales>
</response>
</ajax-response>

用 Ajax.Request 对象和服务器通信并且得到这段 XML 是非常简单的。下面的例子演示了它是如何完成的：

<script>
function searchSales()
{
var empID = $F('lstEmployees');
var y = $F('lstYears');
var url = 'http://yourserver/app/get_sales';
var pars = 'empID=' + empID + '&year=' + y;

var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onComplete: showResponse
});

}

function showResponse(originalRequest)
{
// 将返回的 XML 放到 textarea 内
$('result').value = originalRequest.responseText;
}
</script>

<select id="lstEmployees" size="10" οnchange="searchSales()">
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" οnchange="searchSales()">
<option selected="selected" value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>
<br><textarea id=result cols=60 rows=10 ></textarea>

你注意到传入 Ajax.Request 构造方法的第二个对象了吗？参数 {method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为 method 值为 'get' 的属性，另一个属性名为 parameters 包含 HTTP 请求的查询字符串，和一个 onComplete 属性/方法包含函数 showResponse。

还有一些其它的属性可以在这个对象里面定义和设置，如 asynchronous，可以为 true 或 false 来决定 AJAX 对服务器的调用是否是异步的（默认值是 true）。

这个参数定义 AJAX 调用的选项。在我们的例子中，在第一个参数通过 HTTP GET 命令请求那个 url，传入了变量 pars 包含的查询字符串，Ajax.Request 对象在它完成接收响应的时候将调用 showResponse 方法。

也许你知道，XMLHttpRequest 在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调用自定义方法 ，Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。 就像我们例子中的 onComplete。你传入的方法将会被用一个参数调用，这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP 结果代码的 status 属性。

还有另外两个有用的选项用来处理结果。我们可以在 onSuccess 选项处传入一个方法，当 AJAX 无误的执行完后调用，相反的，也可以在 onFailure 选项处传入一个方法，当服务器端出现错误时调用。正如 onXXXXX 选项传入的方法一样，这两个在被调用的时候也传入一个带有 AJAX 请求的 XMLHttpRequest 对象。

我们的例子没有用任何有趣的方式处理这个 XML 响应， 我们只是把这段 XML 放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息，然后更新页面中的某些元素， 或者甚至可能做某些 XSLT 转换而在页面中产生一些 HTML。

在 1.4.0 版本中，一种新的事件回传外理被引入。如果你有一段代码总是要为一个特殊的事件执行，而不管是哪个 AJAX 调用引发它，那么你可以使用新的 Ajax.Responders 对象。

假设你想要在一个 AJAX 调用正在运行时，显示一些提示效果，像一个不断转动的图标之类的，你可以使用两个全局事件句柄来做到，其中一个在第一个调用开始时显示图标，另一个在最后一个调用完成时隐藏图标。看下面的例子。

<script>
var myGlobalHandlers = {
onCreate: function(){
Element.show('systemWorking');
},

onComplete: function() {
if(Ajax.activeRequestCount == 0){
Element.hide('systemWorking');
}
}
};

Ajax.Responders.register(myGlobalHandlers);
</script>

<div id='systemWorking'><img src='spinner.gif'>Loading...</div>
[/size]