JavaScript框架比较–Ajax

Ajax

使用JavaScript框架最令人信服的理由是跨浏览器的标准化Ajax请求。Ajax请求是异步的HTTP请求，向服务器端脚本发送请求，然后得到一个响应结果，如如XML、JSON、HTML、纯文本格式的数据。大多数JavaScript框架有一定形式的Ajax请求对象，它接受一系列选项作为参数。这些选项包括回调函数，在得到Web服务器的响应时调用，ExtJS、MooTools和Prototype的Ajax请求看起来是这样的：

清单11：一个ExtJS 库中的Ajax请求

01. Ext.Ajax.request({

02. url: 'server_script.php',

03. params: {

04. name1: 'value1',

05. name2: 'value2'

06. },

07. method: 'POST',

08. success: function(transport) {

09. alert(transport.responseText);

10. }

11. });

ExtJS接受一个参数，包括url、params、method 和succcess处理函数等字段，url字段包含服务器端脚本的地址，被Ajax请求调用。Params本身就是一个对象，由键/值对组成，然后传递到服务器。method 字段有两个可选值：GET或POST，默认为post方法。最后一个字段是succcess，在服务器得到成功响应后调用。该例中，假定服务器端返回纯文本，这个文本通过alert()方法呈现给用户。

接下来，让我们进一步探讨MooTools中 Ajax的请求。

清单12：MooTools中的Ajax请求

01. new Request({

02. url: 'server-script.php',

03. data: {

04. name1: 'value1',

05. name2: 'value2'

06. },

07. method: 'post',

08. onComplete: function(response) {

09. alert(response);

10. }

11. }).send();

正如你看见，MooTools与ExtJS很相似。你会注意到，变量通过data字段传递，方法字段需要小写。此外，与success处理函数不同，MooTools使用onComplete函数。最后，与ExtJS不同，MooTools实际上用Request的send()函数发送请求。

最后，让我们看看Prototype 有哪些明显的不同。

清单13：Prototype 中的Ajax请求

01. new Ajax.Request('server-script.php', {

02. params: {

03. name1: 'value1',

04. name2: 'value2'

05. },

06. method: 'post',

07. onSuccess: function(transport) {

08. alert(transport.responseText);

09. }

10. });

看看，Prototype以同样的方式工作，但语法小有差异。对于初学者来说，原型的Request对象接受两个参数传递给构造函数。第一个参数是发送请求的URL地址，正如你在前面两个例子看到的那样，第二个参数是一个对象，包含各个Ajax请求的选项。当然，URl作为一个单独的参数传递，他不在选项列表中。另外，值得注意的是，与MooTools不同，Prototype 对象的构造函数隐式的发送请求，所以不需要调用任何方法触发HTTP请求。

大多数JavaScript框架对Ajax的支持已经超越了我这里所说的。一些明显的增强功能包括在接到响应后自动更新元素，而无需任何特殊的onSuccess 函数。一些库已经预先构建了自动完成功能，正如你在google搜索引擎看到的那样，在键入时给你一些查询建议。