jQuery Ajax 实例全解析(2)_H5之家 - 中国HTML5教程资源分享第一站

TUQHTML5中文学习网 - HTML5先行者学习网

如果你设置了请求的格式为"json"，此时你没有设置Response回来的ContentType 为：Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。TUQHTML5中文学习网 - HTML5先行者学习网

注意一下，alert(data.result); 由于设置了Accept报头为“json”，这里返回的data就是一个对象，并不需要用eval()来转换为对象。TUQHTML5中文学习网 - HTML5先行者学习网

TUQHTML5中文学习网 - HTML5先行者学习网

4. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。TUQHTML5中文学习网 - HTML5先行者学习网

参数

url (String) : 待载入 JS 文件地址。TUQHTML5中文学习网 - HTML5先行者学习网

callback (Function) : (可选) 成功载入后回调函数。TUQHTML5中文学习网 - HTML5先行者学习网

jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。TUQHTML5中文学习网 - HTML5先行者学习网

这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码：TUQHTML5中文学习网 - HTML5先行者学习网

加载并执行 test.js。TUQHTML5中文学习网 - HTML5先行者学习网

jQuery 代码:TUQHTML5中文学习网 - HTML5先行者学习网

$.getScript("test.js");TUQHTML5中文学习网 - HTML5先行者学习网

加载并执行 AjaxEvent.js ，成功后显示信息。TUQHTML5中文学习网 - HTML5先行者学习网

jQuery 代码:TUQHTML5中文学习网 - HTML5先行者学习网

$.getScript("AjaxEvent.js", function(){ alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同？"); });

TUQHTML5中文学习网 - HTML5先行者学习网

加载完后请重新点击一下上面的 Load 请求看看有什么不同。TUQHTML5中文学习网 - HTML5先行者学习网

jQuery Ajax 事件TUQHTML5中文学习网 - HTML5先行者学习网

Ajax请求会产生若干不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件：局部事件和全局事件。TUQHTML5中文学习网 - HTML5先行者学习网

局部事件就是在每次的Ajax请求时在方法内定义的，例如：TUQHTML5中文学习网 - HTML5先行者学习网

$.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ... });

全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义：TUQHTML5中文学习网 - HTML5先行者学习网

$("#loading").bind("ajaxSend", function(){ $(this).show(); }).bind("ajaxComplete", function(){ $(this).hide(); });

或者：TUQHTML5中文学习网 - HTML5先行者学习网

$("#loading").ajaxStart(function(){ $(this).show(); });

我们可以在特定的请求将全局事件禁用，只要设置下 global 选项就可以了：TUQHTML5中文学习网 - HTML5先行者学习网

$.ajax({ url: "test.html", global: false,// 禁用全局Ajax事件. // ... });

下面是jQuery官方给出的完整的Ajax事件列表：TUQHTML5中文学习网 - HTML5先行者学习网

ajaxStart (Global Event)TUQHTML5中文学习网 - HTML5先行者学习网
This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.

beforeSend (Local Event)TUQHTML5中文学习网 - HTML5先行者学习网
This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)

ajaxSend (Global Event)TUQHTML5中文学习网 - HTML5先行者学习网
This global event is also triggered before the request is run.

success (Local Event)TUQHTML5中文学习网 - HTML5先行者学习网
This event is only called if the request was successful (no errors from the server, no errors with the data).

ajaxSuccess (Global Event)TUQHTML5中文学习网 - HTML5先行者学习网
This event is also only called if the request was successful.

error (Local Event)TUQHTML5中文学习网 - HTML5先行者学习网
This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).

ajaxError (Global Event)TUQHTML5中文学习网 - HTML5先行者学习网
This global event behaves the same as the local error event.

complete (Local Event)TUQHTML5中文学习网 - HTML5先行者学习网
This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.

ajaxComplete (Global Event)TUQHTML5中文学习网 - HTML5先行者学习网
This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.

ajaxStop (Global Event)TUQHTML5中文学习网 - HTML5先行者学习网
This global event is triggered if there are no more Ajax requests being processed.

jQuery Ajax 实例 全解析(2)

jQuery Ajax 实例全解析(2)