第一百七十四节，jQuery，Ajax进阶

Posted 2020-09-03 林贵秀

jQuery，Ajax进阶

 

学习要点：

　　1.加载请求

　　2.错误处理

　　3.请求全局事件

　　4.JSON 和 JSONP

　　5.jqXHR 对象

 

在 Ajax 课程中，我们了解了最基本的异步处理方式。本章，我们将了解一下 Ajax 的 一些全局请求事件、跨域处理和其他一些问题。

 

一．加载请求

在 Ajax 异步发送请求时，遇到网速较慢的情况，就会出现请求时间较长的问题。而超 过一定时间的请求，用户就会变得不再耐烦而关闭页面。而如果在请求期间能给用户一些提 示，比如：正在努力加载中...，那么相同的请求时间会让用户体验更加的好一些。

jQuery 提供了两个全局事件，.ajaxStart()和.ajaxStop()。这两个全局事件，只要用户触发 了 Ajax，请求开始时（未完成其他请求）激活.ajaxStart()，请求结束时（所有请求都结束了） 激活.ajaxStop()。

ajaxStart()方法，请求开始时（未完成其他请求）激活.ajaxStart()，在document上使用，参数是匿名函数，可以在函数里做请求时的提示和操作

ajaxStop()方法，请求结束时（所有请求都结束了）激活.ajaxStop()，在document上使用，参数是匿名函数，可以在函数里做请求结束的提示和操作

    //ajax请求
    $(‘form input[type=button]‘).click(function () {
        $.ajax({
            type: ‘POST‘,
            url: ‘http://www.test.php‘,
            data: $(‘form‘).serialize(),
            success: function (response, status, xhr) {
                $(‘#box‘).html(response);
            }
        });
    });

    //监测ajax请求
    $(document).ajaxStart(function () {  //未完成请求时
        $(‘span‘).show();  //显示正在请求，请稍等
    }).ajaxStop(function () {  //请求结束时
        $(‘span‘).hide();  //隐藏请求提示元素
    });

 

如果请求时间太长，可以设置超时

    //ajax请求
    $(‘form input[type=button]‘).click(function () {
        $.ajax({
            type: ‘POST‘,
            url: ‘http://www.test.php‘,
            data: $(‘form‘).serialize(),
            success: function (response, status, xhr) {
                $(‘#box‘).html(response);
            },
            timeout : 500  //如果请求时间太长，可以设置超时
        });
    });

    //监测ajax请求
    $(document).ajaxStart(function () {  //未完成请求时
        $(‘span‘).show();  //显示正在请求，请稍等
    }).ajaxStop(function () {  //请求结束时
        $(‘span‘).hide();  //隐藏请求提示元素
    });

 

如果某个 ajax 不想触发全局事件，可以设置取消

    //ajax请求
    $(‘form input[type=button]‘).click(function () {
        $.ajax({
            type: ‘POST‘,
            url: ‘http://www.test.php‘,
            data: $(‘form‘).serialize(),
            success: function (response, status, xhr) {
                $(‘#box‘).html(response);
            },
            global : false  //如果某个 ajax 不想触发全局事件，可以设置取消
        });
    });

    //监测ajax请求
    //global : false了就不会触发这两个事件了，这里就不起作用了
    $(document).ajaxStart(function () {  //未完成请求时
        $(‘span‘).show();  //显示正在请求，请稍等
    }).ajaxStop(function () {  //请求结束时
        $(‘span‘).hide();  //隐藏请求提示元素
    });

 

二．错误处理

Ajax 异步提交时，不可能所有情况都是成功完成的，也有因为代码异步文件错误、网 络错误导致提交失败的。这时，我们应该把错误报告出来，提醒用户重新提交或提示开发者 进行修补。

 在之前高层封装中是没有回调错误处理的，比如$.get()、$.post()和.load()。所以，早期 的方法通过全局.ajaxError()事件方法来返回错误信息。而在 jQuery1.5 之后，可以通过连缀 处理使用局部.error()方法即可。而对于$.ajax()方法，不但可以用这两种方法，还有自己的属 性方法 error : function () {}。

$.ajax()使用属性提示错误,error : function () {}。