Ajax 简单方法尽管 XHR 对象自身不是很复杂，但这也有足够的细微差别使您很快就能理解当今 Ajax 库中的抽象层。Dojo 和 YUI 也不例外，它们都提供一个易于使用的包装器。当您使用一个库处理 XHR 时，能发现一些常见主题。至少，包装器应该：
- 提供被调用资源的 URI
- 提供传递参数的方式
- 提供一种指定被调用 HTTP 方法（get、post）的方法
- 包括一种处理调用结果的回调技术
YUI 和 AjaxYUI 将其 XHR 包装器隐藏在连接管理器中。API 很直观：您调用单个方法，并返回一个连接对象。一个典型的调用如清单 1 所示。
清单 1. 一个 YUI Ajax 调用样例1
2
3
4
5
6
7
8
9
10
11
12
13
14
| var url = "/fooApp/validate";
var msg_div = document.getElementById("messages");
var callback =
{
success: function(o) { msg_div.innerHTML = o.responseText},
failure: function(o) { console.debug("An error occurred: ", o);}
};
function validate() {
var form = document.getElementById("pim");
YAHOO.util.Connect.setForm(form);
var transaction = YAHOO.util.Connect.asyncRequest("GET", url, callback);
}
|
比起其他库，这看起来有点冗长，这是因为，为了便于阅读我展开了一些。您可以将回调函数和 URL 直接放入调用函数 Connect.asyncRequest 中。如您所见，您能检索某些元素 — 在本例中是一个 <div>，它将容纳服务器返回的信息 — 以及包含您想要发送到服务器的数据的表单。在连接管理器上调用 setForm 方法，会基于您所做的调用类型（在本例中是 GET 请求），收集表单并将它们适当地打包。当验证方法被调用时，对服务器的异步调用将被触发。
Dojo 和 AjaxDojo 的方法类似于 YUI 方法，只不过没那么冗长。Dojo 的 XHR 包装器在 Dojo Base 内，并且提供针对几个主要 HTTP 动词（post、get、put 和 delete）的方法。清单 2 中有一种调用 Dojo 方法的方式。
清单 2. 一个 Dojo Ajax 调用样例1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| var xhrParms = {
url: "/fooApp/validate",
load: function(response){
dojo.byId("messages").innerHTML = response;
},
error: function(data){
console.debug("An error occurred: ", data);
},
timeout: 2000,
form: "pim"
};
function validate() {
dojo.xhrGet(xhrParms);
}
|
我再次选择展开代码来提高可读性，但是，如果您喜欢，您可以将参数直接放在调用函数 dojo.xhrGet 中。正如您所见，这个例子和 YUI 有点相似，但有一些很有趣的差异。第一，您可能注意到明显缺乏 document.getElementById 调用。通过 ID 获取元素是常用的方法，但是超过 20 个字符时很容易发生输入错误！很多库提供各种形式的快捷方式，Dojo 提供 dojo.byId。尽管不如 Prototype 的 $ 这样精炼，但仍然是一个很大的改进。同样，当 validate 方法被调用时，您对服务器的调用将被调用。 |
