<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('对不起,出错了。');
}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>
如果你的服务器逻辑是连同 HTML 标记返回 JavaScript 代码,Ajax.Updater 对象可以执行那段 JavaScript 代码。为了使这个对象对待响应为 JavaScript,你只需在最后参数的对象构造方法中简单加入 evalScripts:true 属性。但是值得提醒的是,像这个选项名 evalScripts 暗示的,这些脚本会被执行,但是它们不会被加入到 Page 的脚本中。“有什么区别?”,可能你会这样问。我们假定请求地址返回的东东像这样:
<script language="javascript" type="text/javascript">
function sayHi(){
alert('Hi');
}
</script>
<input type=button value="Click Me" onclick="sayHi()">
如果你以前这样尝试过,你知道这些脚本不会如你所期望的那样工作,原因是这段脚本会被执行,但像上面这样的脚本执行并不会创建一个名叫 sayHi 的函数,它什么也不做。如果要创建一个函数,我们应当把代码改成下面这个样子:
<script language="javascript" type="text/javascript">sayHi = function(){ alert('Hi'); };</script> <input type=button value="Click Me" onclick="sayHi()">
为什么我们在上面的代码中不使用 var 关键字来声明这个变量呢(指 sayHi),因为那样做创建出来的函数将只是当前脚本块的一个局部变量(至少在 IE 中是这样)。不写 var 关键字,创建出来的对象的作用域就是我们所期望的 window。
更多相关知识,请参看 Ajax.Updater 参考和 options 参考。
本文介绍如何使用Ajax.Updater类简化AJAX请求处理流程。通过示例代码展示了如何进行请求、处理服务器返回的HTML及JavaScript内容,并介绍了如何处理请求失败的情况。
487

被折叠的 条评论
为什么被折叠?



