ajaxStart()与ajaxStop() | ajaxSend()与ajaxComplete() | ajaxError()

最新推荐文章于 2023-12-28 09:38:28 发布

无盐海

最新推荐文章于 2023-12-28 09:38:28 发布

阅读量3.4k

点赞数

分类专栏： AJAX | JSON

本文链接：https://blog.csdn.net/Fanbin168/article/details/45094349

版权

AJAX | JSON 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

《1》

ajaxStart() 设置当前第一个AJAX请求开始时执行的处理函数。
ajaxSend() 设置在AJAX请求被发送前执行的处理函数。

ajaxComplete() 设置当AJAX请求完成(无论成功或失败)时执行的处理函数。
ajaxStop() 设置当前最后一个AJAX请求结束时执行的处理函数。

<html>
<head>
    <title></title>
    <script src="jquery-1.11.2.js"></script>
</head>
<body>
    <label for="UserId">请输入用户的ID编号:</label><input type="text" id="UserId" name="UserId" style="width:20px" />
    <input type="button" id="btnClick" value="提交" />
    <div id="loadMes" style="display:none">我正在努力加载中哦.....</div>
    <div id="loadData"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery-1.11.2.js"></script>
</head>
<body>
    <label for="UserId">请输入用户的ID编号:</label><input type="text" id="UserId" name="UserId" style="width:20px" />
    <input type="button" id="btnClick" value="提交" />
    <div id="loadMes" style="display:none">我正在努力加载中哦.....</div>
    <div id="loadData"></div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("#btnClick").click(function () {
            var id = $("#UserId").val();
            $.get("loadHandler.ashx", { id: id }, function (data, status, jsXHR) {//为了测试error这里填写了一个找不到的url地址
                $("#loadData").text(data);
            }).error(function (XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.statusText) }).success(function (data, status, jsXHR) { alert(status) });
        });


        //--------------------------ajaxStart()与ajaxStop()这两个全局事件必须绑定在document元素上。




        //在Ajax异步发送请求时，遇到网速比较慢的时候，就会出现请求比时间较长的问题，用户等的不耐烦就会关闭页面。而如果在请求期间能给用户一些提示。比如：正在努力加载中... 那么用户可能会等久一点，体验就业好一些了。

        //jquery提供了两个全局事件，ajaxStart()和ajaxStop() 这两个全局事件，只要用户触发了Ajax,请求开始（仅仅是准备开始请求，还未完成请求）那么就会触发ajaxStart()这个事件。  当用户请求结束的时候就会触发ajaxStop()事件

        $(document).ajaxStart(function () { $("#loadMes").show(); }).ajaxStop(function () { $("#loadMes").hide(); alert("加载完毕") });

        //当然我们也可以分开来写

        $(document).ajaxStart(function () { alert("我是start") });
        $(document).ajaxStop(function () { $("#loadMes").hide(); alert("请求完毕") })





        //----------------ajaxSend()与ajaxComplete()这两个全局事件必须绑定在document元素上。





        //ajaxSend()函数用于设置当AJAX请求即将被发送时执行的回调函数。(它比ajaxStart()稍微慢一点。一般而言，连续执行多个AJAX请求，只有其中的第一个AJAX请求会触发ajaxStart事件。等到所有AJAX请求执行完毕后，再次连续执行多个AJAX请求，还是只有其中的第一个AJAX请求会触发ajaxStart事件。 )

        //ajaxComplete()函数用于设置当AJAX请求完成(无论成功或失败)时执行的回调函数。

        $(document).ajaxSend(function () { $("#loadMes").show(); }).ajaxComplete(function () { $("#loadMes").hide(); })





        //----------------------ajaxError()这个全局事件只能绑定在document元素上（）




        //这是一个全局AJAX事件函数，用于为任何AJAX请求的ajaxError事件绑定事件处理函数

        $(document).ajaxError(function (event, jsXHR, settings, errorType) {
            //第一个参数（事件对象）
            alert(event.type); //打印出：ajaxError    即：触发的事件
            alert(event.target); //打印出：[object HTMLDocument]   即：触发事件的元素

            //第二个参数
            alert(jsXHR.statusText);  //第二个参数是一个XMLHttpRequst对象

            //第三个参数  详情请参照http://www.w3school.com.cn/jquery/ajax_ajax.asp
            for (var a in settings) {
                document.write(a + "<br/>") //通过打印得知：其实这个settings就是本次AJAX请求的所有参数设置：详情如下
                /*
                url              注意：settings是一个对象。以下都是这个对象的属性或者方法
                type
                isLocal
                global
                processData
                async
                contentType
                accepts
                contents
                responseFields
                converters
                flatOptions
                xhr
                jsonp
                jsonpCallback
                success
                dataTypes
                crossDomain
                hasContent
                */
            }

            alert(settings.url); //打印出：loadHandler.ashx?id=v  即：发生错误的请求url
            alert(settings.type);//打印出：GET   即：发生错误的请求的请求方式
            alert(settings.global) //打印出：true 即：是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件

            alert(settings.async); //打印出：true 即请求为异步。 如果是false 表示请求为同步
            alert(settings.dataTypes); //打印出：text,html  即：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断 */

            for (var b in settings.contents) {  //contents是一个对象
                document.write(b + "<br/>")  //打印出： xml, html,json,script
            }

            //第四个参数 （错误描述）
            alert(errorType); //打印出：Internal Server Error :即发生错误的类型 ，内部服务器错误
        })
    })
</script>

无盐海

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajaxStart()与ajaxStop() | ajaxSend()与ajaxComplete() | ajaxError()

《1》ajaxStart() 设置当前第一个AJAX请求开始时执行的处理函数。ajaxSend() 设置在AJAX请求被发送前执行的处理函数。 ajaxComplete() 设置当AJAX请求完成(无论成功或失败)时执行的处理函数。ajaxStop() 设置当前最后一个AJAX请求结束时执行的处理函数。请输入用户的ID编号:
复制链接

扫一扫