3. Ajax 对象
上面提到的共通方法非常好,但是面对它吧,它们不是最高级的那类东西。它们是吗?你很可能自己编写
了这些甚至在你的脚本里面有类似功能的方法。但是这些方法只是冰山一角。
我很肯定你对prototype.js 感兴趣的原因很可能是由于它的AJAX 能力。所以让我们解释当你需要完
成AJAX 逻辑的时候,这个包如何让它更容易。
Ajax 对象是一个预定义对象,由这个包创建,为了封装和简化编写AJAX 功能涉及的狡猾的代码。 这
个对象包含一系列的封装AJAX 逻辑的类。我们来看看它们的一些。
3.1. 使用 Ajax.Request 类
如果你不使用任何的帮助程序包,你很可能编写了整个大量的代码来创建XMLHttpRequest 对象并且异
步的跟踪它的进程, 然后解析出响应 然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非
常的幸运。
为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。
假如你有一个应用程序可以通过url
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://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>
你看到传入 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。
更完全的解释,请参照 Ajax.Request 参考 和 Ajax 选项参考。
3.2. 使用 Ajax.Updater 类
如果你的服务器的另一端返回的信息已经是HTML 了,那么使用这个程序包中 Ajax.Updater 类将使
你的生活变得更加得容易。用它你只需提供哪一个元素需要被AJAX 请求返回的HTML 填充就可以了,例
子比我写说明的更清楚。
<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>
你可以看到,这段代码比前面的例子更加简洁,不包括 onComplete 方法,但是在构造方法中传入了一
个元素id。 我们来稍稍修改一下代码来描述如何在客户端处理服务器段错误成为可能。
我们将加入更多的选项, 指定处理错误的一个方法。这个是用 onFailure 选项来完成的。
我们也指定了一个 placeholder 只有在成功请求之后才会被填充。为了完成这个目的我们修改了第一
个参数从一个简单的元素id 到一个带有两个属性的对象, success (一切OK 的时候被用到) 和
failure (有地方出问题的时候被用到) 在下面的例子中没有用到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 onclick="getHTML()">
<div id="placeholder"></div>
如果你的服务器逻辑是返回JavaScript 代码而不是单纯的 HTML 标记, Ajax.Updater 对象可以
执行那段JavaScript 代码。为了使这个对象对待响应为JavaScript,你只需在最后参数的对象构造
方法中简单加入evalScripts: true 属性。
更完全的解释,请参照 Ajax.Updater 参考 和 Ajax 选项参考 。