全局ajax的使用
一、ajax介绍
详细介绍请看:http://www.runoob.com/ajax/ajax-tutorial.html
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
二、 ajax()介绍
详细介绍请看:http://www.w3school.com.cn/jquery/ajax_ajax.asp
ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。
最简单的情况下,$.ajax() 可以不带任何参数直接使用。
注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。
三、全局ajax的使用
详细介绍请看:jquery全局ajax参数详细执行分析-$.ajax竟然可以这样用!
详细介绍请看:Jquery $.ajax请求详解及ajax全局变量分析
jquery 提供了一个列表 全局Ajax事件处理程序 。 这些全局事件是发起每一个AJAX请求时产生。如果全局变量jQuery.ajaxSetup()是true。
默认情况下它是true。
-
.ajaxStart——注册一个处理程序被称为第一个AJAX请求时开始;每个页面中所有的ajax请求只发生一次。
-
.ajaxSend——附加一个函数执行之前发送一个AJAX请求;每次发起ajax请求就触发一次。
-
.ajaxError——注册一个处理程序被称为AJAX请求完成时一个错误;
-
.ajaxSuccess——附加一个函数执行时一个AJAX请求成功完成;
-
.ajaxComplete——注册一个处理程序被称为AJAX请求完成;每次发起一次ajaxsend请求就对应一次complete。
-
.ajaxStop——注册一个处理程序被称为当所有AJAX请求已经完成了。
每当一个Ajax请求即将发送,jQuery检查是否有任何其他响应过程中的Ajax请求。如果没有检查到,jQuery就会触发ajaxStart事件。
我们通过这些全局变量就能够保存每次ajax请求,并在每个ajax请求处理完成后,清理这个缓存。
使用例子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 添加ajax全局事件处理。 $(document).ajaxStart(onStart) .ajaxSend(onSend) .ajaxSuccess(onSuccess) .ajaxError(onError) .ajaxComplete(onComplete) .ajaxStop(onStop); /** * 第一个ajax请求完成开始时,执行此方法(2)--这是一个 Ajax 事件 * @param event 请求的事件 */ function onStart(event) { debugger console.log("onStart"); } /** * ajax请求发送之前,执行此方法(3) * @param event 请求的事件 */ function onSend(event) { debugger console.log("onSend"); } /** * ajax请求成功,执行成功方法后,执行此方法(5) * @param event 请求的事件 * @param xhr XMLHttpRequest * @param settings 操作 */ function onSuccess(event, xhr, settings) { debugger console.log(xhr.responseJSON) console.log("onSuccess"+event+xhr+settings); // window.onload("www.baidu.com") } /** * ajax请求失败,执行失败方法后,执行此方法(5)--这是一个 Ajax 事件 * @param event * @param xhr * @param settings */ function onError(event, xhr, settings) { debugger console.log("onError"+event+xhr+settings); } /** * ajax请求完成时,执行此方法(6)--这是一个 Ajax 事件 * @param event * @param xhr * @param settings */ function onComplete(event, xhr, settings) { debugger console.log("onComplete"+event+xhr+settings); } /** * 所有的ajax请求完成时,执行此方法(7)--这是一个 Ajax 事件 * @param event */ function onStop(event) { debugger console.log("onStop"+event); } $("button").click(function(){ debugger $.ajax({ url: 'http://localhost:8090/csyadminService/exampleAjax', type: 'POST', data: { name: 'test1', sex: 'test2' }, success: function (result) {// (4) debugger if(result.code != "666") { return; } alert("ce") console.log("success:"+result); }, error:function (result) { // (4) console.log("error:"+result); } }); // (1) });
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<button>点我</button>