18-讨论

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

16.4.3　讨论

本秘诀和其他秘诀略有不同，我们将纵览jQuery提供的多个函数和快捷方法，清晰地表现它们之间的差异。

jQuery提供了一些发出Ajax请求的快捷方法。根据前面介绍Ajax的秘诀，存在如下的快捷方法： .load() 、 $.get() 、 $.getJSON() 、 $.getScript() 和 $.post() ，但是我们首先回顾自己的解决方案：

$('#contents').load('hello-world.html');

.load(url) 方法对 hello-world.html 发出一个GET Ajax请求，并在 #contents 中放置结果的内容。 .load() 方法有两个可选的参数 data 和 callback 。 data 参数可以是一个映射对象（或者JavaScript对象）或者一个字符串（自jQuery 1.3起）。下面的例子传入值为 world 的 hello 变量。（这和如下的URL一样： helloworld.html?hello=world ）

$('#contents').load('hello-world.html', { hello: 'world' });

第三个可选参数是一个回调函数，在请求完成（ success 或者 error) 时调用。在下面的例子中，请求完成时触发一条警告消息：

$('#contents').load('hello-world.html', { hello: 'world' }, function() {
　　 alert('Request completed!');
});

接下来要研究的两个方法是 $.get() 和 $.post() 。这两个方法都接受相同的参数， $.get() 方法发送一个GET HTTP请求，而 $.post() 方法发送一个POST HTTP请求。我们将研究一个使用 $.get() 请求的示例。 $.get() 方法接受的参数有 url 、 data 、 callback 和 type 。前三个参数的作用和前面的 load() 方法一样，所以只介绍最后一个参数 type：

$.get(
　　 'hello-world.html',
　　 { hello: 'world' },
　　 function(data) {
　　　　　alert('Request completed!');
　　 },
　　'html'
);

type 参数可以接受如下值： xml 、 html 、 script 、 json 、 jsonp 或 text 。这些 type 值确定来自Ajax请求的响应文本在传递到回调函数之前如何处理。在前一个例子中，因为指定 type 参数 html ，所以回调函数的数据参数将为DOM对象的形式。使用 xml 作为 type 参数值将传递 xml DOM对象。如果 type 参数指定为 script , 服务器返回的结果数据将在触发 callback 方法之前执行。 json 和 jsonp 格式都会将一个JavaScript对象传递给 callback 方法, jsonp 的不同之处在于jQuery将在请求中传递一个方法名称，将回调方法映射到请求定义的匿名函数。这样做允许跨域请求。最后， text 格式正如其名：以字符串形式将普通文本传递给 callback 方法。

现在，我们来看看最后两个快捷方法： $.getJSON() 和 $.getScript() 。 $.getJSON() 方法接受 url 、 data 和 callback 参数。 $.getJSON() 实际上是 $.get() 方法和为JSON或者JSONP设置的相关参数的组合体。下面的例子将向Filckr发起一个 JSONP 请求，从公共时间线（public timeline）请求照片：

$.getJSON(
　　 'http://www.flickr.com/services/feeds/photos_public.gne?
format=json&jsoncallback=?',
　　 function(json) {
　　 }
);

因为这个请求是跨域的，jQuery自动将请求当作JSONP处理，并填写对应的 callback 函数名。这也意味着，jQuery将在文档中插入一个 <script> 标记初始化请求，代替XMLHttpRequest对象。Flickr的API允许设置 jsoncallback get 变量以指定 callback 函数名。你将会注意到URL的 jsoncallback=? 部分。jQuery将智能地用对应的函数名自动替换 ? 。默认情况下，jQuery将附加一个 callback= 变量，但是允许像例子中展示的那样对其进行修改。 callback 替换在GET和POST请求URL上都有效，但是对于数据对象中传入的参数无效。使用JSON的方法参见秘诀16.7和秘诀16.8，Flickr示例的完整JSONP实现参见秘诀16.9。

$.getScript() 通过Ajax请求或者动态插入用于跨域支持的 <script> 执行请求，然后评估返回的数据并最终触发所提供的回调函数。在下面的例子中，将在文档中添加一个脚本，然后调用回调中提供的一个函数：

// hello-world.js
function helloWorld(msg) {
　　 alert('Hello world! I have a message for you: ' + msg);
}
// hello-world.html
(function($) {
　　 $(function() {
　　　　　$.getScript('hello-world.js', function() {
　　　　　　　 helloWorld('It is a beautiful day!');
　　　　　});
　　 });
})(jQuery);

Previous 上一篇本节目录 Next 下一篇

18-讨论

16.4.3 讨论

16.4.3　讨论