06-讨论

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

16.1.3　讨论

jQuery的Ajax架构核心是 jQuery.ajax() 方法。这个方法为所有浏览器到服务器的请求和响应提供了基础。所以，我们要更详细地研究这个方法。为了初始化到服务器的一个请求，把包含请求参数的一个设置对象传递给 $.ajax 方法。可用选项很多，最常用的请求选项是 type 、 url 、 complete 、 dataType 、 error 和 success ：

var options = {
　　 type: 'GET'
};

当启动Ajax请求时首先要考虑的选项是服务器HTTP请求类型，大部分情况下是GET或者POST类型：

var options = {
　　 type: 'GET',
　　 url: 'hello-ajax.html',
　　 dataType: 'html'
};

接下来我们要注意 URL 和 dataType 选项。URL的含义不言自明，值得一提的是后面的交互。当将 cache 选项设置为false时，jQuery将附加一个 get 变量 _=<random number> （例如， /server-ajax-gateway?_=6273551235126 ），该变量用于避免浏览器、代理和服务器发送缓存的响应。最后， dataType 选项指定服务器响应的期望数据格式。例如，如果你希望服务器返回HTML，则选项值 html 是合适的：

var options = {
　　 type: 'GET',
　　 url: 'hello-ajax.html',
　　 dataType: 'html',
　　 error: function(xhr, textStatus, errorThrown) {
　　　　　alert('An error occurred! ' + errorThrown);
　　 },
　　 success: function(data, textStatus) {
　　　　　$('body').append( data );
　　 }
};

我们要定义的下两个选项是两个回调方法，一个称为 error ，另一个称为 success 。它们的标题恰当地表示了功能， error 在请求中有错误时调用， success 在成功响应的时候调用（由服务器返回的响应类型是否为200确定）。 complete 是另一个常用的选项，定义了在响应成功或者错误之后执行的一个回调方法：

var options = {
　　 type: 'GET',
　　 url: 'hello-ajax.html',
　　 dataType: 'html',
　　 complete: function(xhr, textStatus) {
　　　　　//处理响应的代码
　　 }
};

一旦设置定义完毕，就可以继续执行请求：

var options = {
　　 type: 'GET',
　　 url: 'hello-ajax.html',
　　 dataType: 'html',
　　 complete: function(xhr, textStatus) {
　　　　　//处理响应的代码
}
};
$.ajax( options );

还可以用内联方式设置选项：

$.ajax({
　　 type: 'GET',
　　 url: 'hello-ajax.html',
　　 dataType: 'html',
　　 complete: function(xhr, textStatus) {
　　　　　//处理响应的代码
　　 }
});

最终解决方案请求文件 hello-ajax.html 并在成功请求返回时将内容（ html ）附加到 <body> 元素中。如果请求失败，则触发 error 方法，用一条消息警告用户：

(function($) {
　　 $(document).ready(function() {
　　　　　$('#update').click(function() {
　　　　　　　 $.ajax({
　　　　　　　　　　type: 'GET',
　　　　　　　　　　url: 'hello-ajax.html',
　　　　　　　　　　dataType: 'html',
　　　　　　　　　　success: function(html, textStatus) {
　　　　　　　　　　　　 $('body').append(html);
　　　　　　　　　　},
　　　　　　　　　　error: function(xhr, textStatus, errorThrown) {
　　　　　　　　　　　　 alert('An error occurred! ' + errorThrown);
　　　　　　　　　　}
　　　　　　　 });
　　　　　});
　　 });
})(jQuery);

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

06-讨论

16.1.3 讨论

16.1.3　讨论