jQuery中.ajaxStart()和.ajaxStop()方法的使用

2019-02-13 10:00:11

.ajaxStart()和.ajaxStop()方法是jQuery提供的一组函数，通过它们能够为各种与Ajax相关的事件注册回调函数。可以把它们添加给任何jQuery对象。
当 Ajax 请求开始且尚未进行其他传输时，会触发.ajaxStart()的回调函数。
当 Ajax 请求最后一次活动请求终止时，则会执行通过.ajaxStop()注册的回调函数。
所有的“观察员”都是全局性的，因为无论创建它们的代码位于何处，当Ajax通信发生时都需要调用它们。而且这些方法都与.ready()方法一样，只能由$(document)调用。

比如：在网速比较慢时，加载数据需要较长时间，这时为了提高用户体验度，可以通过这些方实现。

$(document).ready(function() {
    $('<div id="loading">Loading...</div>')
    .insertBefore('#dictionary')
});

而在CSS文件中，我们为这个<div>添加了一条display:none;样式规则，以便在初始时隐藏这条信息。要在恰当的时机显示这条信息，只需通过.ajaxStart()将它注册为一个“观察员”即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Personal Information</title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#letter-a a').click(function (event) {
                event.preventDefault();
                var requestData = { name: $(this).text() };
                $.get('a.php', requestData, function (data) {
                    $('#container').html(data);
                });
            });

            $(document).ready(function () {
                var $loading = $('<div id="loading">Loading...</div>').insertBefore('#container');
                $(document).ajaxStart(function () {
                    $loading.show();
                }).ajaxStop(function () {
                    $loading.hide();
                });
            });

        });
    </script>
</head>
<body>
    <div id="main">
        <div class="letter" id="letter-a">
            <h3><a href="#">John</a></h3>
            <h3><a href="#">Rose</a></h3>
            <h3><a href="#">James</a></h3>
        </div>
        <div id="container">
        </div>
    </div>
</body>
</html>

还有一些观察员方法，如.ajaxError()，会向它们的回调函数发送一个对 XMLHttpRequest 对象的引用。这样就可以做到区别不同的请求来提供不同的行为。其他更具体的处理可以通过使用低级的$.ajax()函数来完成。