全局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请求处理完成后，清理这个缓存。

---

使用例子：

// 添加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)
});

全局ajax的js代码

<button>点我</button>

全局ajax的html代码