prototype对ajax的支?/a>
Ajax 对象
上面提到的共通方法非常好Q但是面对它吧,它们不是最高的那cMѝ它们是吗?你很可能自己~写了这些甚臛_你的脚本里面有类似功能的Ҏ。但是这些方法只是冰׃角?/p>
我很肯定你对prototype.js感兴的原因很可能是׃它的AJAX能力。所以让我们解释当你需要完成AJAX逻辑的时候,q个包如何让它更Ҏ?/p>
Ajax 对象是一个预定义对象Q由q个包创建,Z装和简化编?a target="_top">AJAX 功能涉及的狡猄代码?q个对象包含一pd的封装AJAX逻辑的类。我们来看看它们的一些?/p>
1.4.1. 使用 Ajax.Requestc?/h3>
如果你不使用M的帮助程序包Q你很可能编写了整个大量的代码来创徏XMLHttpRequest对象q且异步的跟t它的进E,然后解析出响?然后处理它。当你不需要支持多于一U类型的览器时你会感到非常的幸q?/p>
Z支持 AJAX 功能。这个包定义?Ajax.Request cR?/p>
假如你有一个应用程序可以通过url http://yoursever/app/get_sales?empID=1234&year=1998与服务器通信。它q回下面q样的XML 响应?/p>
<?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对象和服务器通信q且得到q段XML是非常简单的。下面的例子演示了它是如何完成的?/p>
<script>
function searchSales()
{
var empID = $F('lstEmployees');
var y = $F('lstYears');
var url = 'http://yoursever/app/get_sales';
var pars = 'empID=' + empID + '&year=' + y;
var myAjax = new Ajax.Request(
url,
{method: 'get', parameters: pars, onComplete: showResponse}
);
}
function showResponse(originalRequest)
{
//put returned XML in the textarea
$('result').value = originalRequest.responseText;
}
</script>
<select id="lstEmployees" size="10" onchange="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" onchange="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>
你看C?Ajax.Request构造方法的W二个对象了吗?参数{method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的q个对象有一个名?method gؓ 'get'的属性,另一个属性名?parameters 包含HTTPh的查询字W串Q和一?tt>onComplete 属?Ҏ包含函数showResponse?/p>
q有一些其它的属性可以在q个对象里面定义和设|,?asynchronousQ可以ؓtrue ?false 来决定AJAXҎ务器的调用是否是异步的(默认值是 trueQ?/p>
q个参数定义AJAX调用的选项。在我们的例子中Q在W一个参数通过HTTP GET命oh那个urlQ传入了变量 pars包含的查询字W串Q?Ajax.Request 对象在它完成接收响应的时候将调用showResponse Ҏ?/p>
也许你知道, XMLHttpRequest在HTTPh期间报告进度情c这个进度被描述为四个不同阶D:Loading, Loaded, Interactive, ?Complete。你可以?Ajax.Request 对象在Q何阶D调用自定义Ҏ Q?em>Complete 是最常用的一个。想调用自定义的Ҏ只需要简单的在请求的选项参数中的名ؓ onXXXXX 属?Ҏ中提供自定义的方法对象?像我们例子中的 onComplete 。你传入的方法将会被用一个参数调用,q个参数?XMLHttpRequest 对象自己。你会用这个对象去得到q回的数据ƈ且或许检查包含有在这ơ调用中的HTTPl果代码?status 属性?/p>
q有另外两个有用的选项用来处理l果。我们可以在onSuccess 选项处传入一个方法,当AJAX无误的执行完后调用,相反的,也可以在onFailure选项处传入一个方法,当服务器端出现错误时调用。正?tt>onXXXXX 选项传入的方法一Pq两个在被调用的时候也传入一个带有AJAXh?tt>XMLHttpRequest对象?/tt>
我们的例子没有用M有趣的方式处理这?XML响应Q我们只是把q段XML放进了一个文本域里面。对q个响应的一个典型的应用很可能就是找到其中的惌的信息,然后更新面中的某些元素Q或者甚臛_能做某些XSLT转换而在面中生一些HTML?/p>
更完全的解释Q请参照 Ajax选项参?/a>?/p>
1.4.2. 使用 Ajax.Updater c?/h3>
如果你的服务器的另一端返回的信息已经是HTML了,那么使用q个E序包中 Ajax.Updater cd使你的生zd得更加得Ҏ。用它你只需提供哪一个元素需要被AJAXhq回的HTML填充可以了Q例子比我写说明的更清楚?/p>
<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
var myAjax = new Ajax.Updater('placeholder', url, {method: 'get', parameters: pars});
}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>
你可以看刎ͼq段代码比前面的例子更加z,不包?onComplete ҎQ但是在构造方法中传入了一个元素id?我们来稍E修改一下代码来描述如何在客L处理服务器段错误成ؓ可能?/p>
我们加入更多的选项Q?指定处理错误的一个方法。这个是?onFailure 选项来完成的?/p>
我们也指定了一?placeholder 只有在成功请求之后才会被填充。ؓ了完成这个目的我们修改了W一个参C一个简单的元素idC个带有两个属性的对象Q?success (一切OK的时候被用到) ?failure (有地方出问题的时候被用到) 在下面的例子中没有用?tt>failure属性,而仅仅在 onFailure 处用了 reportError Ҏ?/p>
<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 onclick="getHTML()">
<div id="placeholder"></div>
如果你的服务器逻辑是返回JavaScript 代码而不是单U的 HTML 标记Q?Ajax.Updater对象可以执行那段JavaScript代码。ؓ了ɘq个对象对待响应为JavaScriptQ你只需在最后参数的对象构造方法中单加?tt>evalScripts: true属性?/p>