Ajax的进阶学习(一)

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

加载请求

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

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

Ajax进阶.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax进阶</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <form>
        用户名:<input type="text" name="user" />
        邮 件:<input type="text" name="email" />
        <input type="radio" name="sex" value="男" />男
        <input type="radio" name="sex" value="女" />女
        <input type="button" value="提交" />
    </form>
    <span class="loading">正在加载中...</span>
    <div id="box">

    </div>
</body>
</html>

style.css:

.loading {
    display: none;
    color: red;
    font-weight: bold;
}

tomcat服务器端存在一个user.php,如下:

<?php
    echo $_POST[‘user‘].‘ - ‘.$_POST[‘email‘];
?>

然后现在加载一个找不到的url,诸如:http://dsafsefre/user.php

$("form input[type=button]").click(function() {
    $.ajax({
        type:"post",
        url:"http://dsafsefre/user.php",
        data:$("form").serialize(),
        success:function(response, status, xhr) {
            $("#box").html(response);
        }
    });
});

请求加载提示的显示和隐藏(必须绑定在document元素上)

$(document).ajaxStart(function() {
    $(".loading").show();
}).ajaxStop(function() {
    $(".loading").hide();
});

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

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

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

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

若global置为false,那么以下代码将不起作用:

$(document).ajaxStart(function() {
    $(".loading").show();
}).ajaxStop(function() {
    $(".loading").hide();
});

错误处理

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

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

$.ajax()使用属性提示错误:

$("form input[type=button]").click(function() {
    $.ajax({
        type:"post",
        url:"user1.php",
        data:$("form").serialize(),
        success:function(response, status, xhr) {
            $("#box").html(response);
        },
        error:function(xhr, errorText, errorStatus) {
            alert("错误!"); //错误!
            alert(errorText+":"+errorStatus); //error:Not Found
            alert(xhr.status+":"+xhr.statusText); //404:Not Found
        }
    });
});

$.post()使用连缀.error()方法提示错误,连缀方法将被.fail()取代

$("form input[type=button]").click(function() {
    $.post("user1.php").error(function(xhr, errorText, errorType) {
        alert("错误!"); //错误!
        alert(errorText+":"+errorType); //error:Not Found
        alert(xhr.status+":"+xhr.statusText); //404:Not Found
    });
});

$.post()使用全局.ajaxError()事件提示错误

$("form input[type=button]").click(function() {
    $.post("user1.php");
});
$(document).ajaxError(function(event, xhr, settings, infoError) {
    //alert("错误!"); //错误!
    //alert(event.type); //ajaxError
    //alert(event.target); //[object HTMLDocument]
    //for(var i in event) {
    //    document.write(i + "<br/>"); //打印事件对象的属性和方法
    //}

    //alert(settings); //[object Object]
    //for(var i in settings) {
    //   document.write(i + "<br/>");
    //}
    //alert(settings.url); //user1.php
    //alert(settings.type); //post
    alert(infoError); //Not Found
});

请求全局事件

jQuery对于Ajax操作提供了很多全局事件方法,.ajaxStart()、.ajaxStop()、.ajaxError()等事件方法。他们都属于请求时触发的全局事件,除了这些,还有一些其他全局事件:

.ajaxSuccess(),对应一个局部方法:.success(),请求成功完成时执行。

.ajaxComplete(),对应一个局部方法:.complete(),请求完成后注册一个回调函数。

.ajaxSend(),没有对应的局部方法,只有属性beforeSend,请求发送之前要绑定的函数。

先看看.ajaxSend()/.ajaxSuccess()/.ajaxError()/.ajaxComplete()的执行顺序:

以上代码除jQuery代码变化之外,其余均不变,jQuery代码如下:

$("form input[type=button]").click(function() {
    $.post("user1.php");  //或$.post("user.php")
});
$(document).ajaxSend(function() {
    alert("发送请求之前执行");
}).ajaxComplete(function() {
    alert("请求完成后,不管是否失败成功都执行");
}).ajaxSuccess(function() {
    alert("请求成功后执行");
}).ajaxError(function() {
    alert("请求失败后执行");
});

注意:全局事件方法是所有Ajax请求都会触发到,并且只能绑定在document上,而局部方法,则针对某个Ajax。对于一些全局事件方法的参数,大部分为对象,而这些对象有哪些属性或方法能调用,可以通过遍历方法得到。

$.post()使用局部方法.success()、.complete()、.error()、beforeSend是局部属性,没有对应的局部方法beforeSend()。

$("form input[type=button]").click(function() {
    $.post("user1.php", $("form").serialize()).success(function() {
        alert("请求成功后执行");
    }).complete(function() {
        alert("请求完成后,不管是否失败成功都执行");
    }).error(function() {
        alert("请求失败后执行");
    }).beforeSend(function() {
        alert("发送请求之前执行"); //无效
    });
});

$.ajax()方法,可以直接通过属性设置即可

$("form input[type=button]").click(function() {
    $.ajax({
        type:"post",
        url:"user.php",
        data:$("form").serialize(),
        success:function(response, status, xhr) {
            alert("请求成功后执行");
        },
        complete:function() {
            alert("请求完成后,不管是否失败成功都执行");
        },
        beforeSend:function() {
            alert("发送请求之前执行");
        },
        error:function() {
            alert("请求失败后执行");
        }
    });
});

注意:在jQuery1.5版本以后,使用.success()、.error()和.complete()连缀的方法,可以用.done()、.fail()和.always()取代。

时间: 2024-10-12 11:05:30

Ajax的进阶学习(一)的相关文章

42步进阶学习—让你成为优秀的Java大数据科学家!

作者 灯塔大数据 本文转自公众号灯塔大数据(DTbigdata),转载需授权 如果你对各种数据类的科学课题感兴趣,你就来对地方了.本文将给大家介绍让你成为优秀数据科学家的42个步骤.深入掌握数据准备,机器学习,SQL数据科学等. 本文将这42步骤分为六个部分, 前三个部分主要讲述从数据准备到初步完成机器学习的学习过程,其中包括对理论知识的掌握和Python库的实现. 第四部分主要是从如何理解的角度讲解深入学习的方法.最后两部分则是关于SQL数据科学和NoSQL数据库. 接下来让我们走进这42步进

Android 进阶学习:事件分发机制全然解析,带你从源代码的角度彻底理解(上)

http://blog.csdn.net/guolin_blog/article/details/9097463 事实上我一直准备写一篇关于Android事件分发机制的文章,从我的第一篇博客開始,就零零散散在好多地方使用到了Android事件分发的知识.也有好多朋友问过我各种问题,比方:onTouch和onTouchEvent有什么差别,又该怎样使用?为什么给ListView引入了一个滑动菜单的功能,ListView就不能滚动了?为什么图片轮播器里的图片使用Button而不用ImageView?

状态保持以及AJAX的初步学习

嘿嘿,今天学习的有点迷茫哦,主要学习把验证码使用在登录页面时间的一些逻辑,学习这个时间并没有那么的迷惑哦,可是自己写程序时间倒是有点反应迟钝,不过还好总是在最后搞清楚啦,另外就是一步一步的学习是接近项目期,今天下午学习了ajax,这个使用javascript写起来还是蛮麻烦的,嘿嘿,但是使用jquery实现是非常的简单的,不知道是不是由于我刚接触的原因,下面来总结一下今天学习的内容,感觉今天学习的还是很有必要详细总结的,因为在以后的项目中还是经常会使用的. 一.状态保持 1.cookie的添加与

【原创】PHP程序员进阶学习书籍参考指南

PHP程序员进阶学习书籍参考指南 @heiyeluren lastmodify: 2016/2/18 [初阶](基础知识及入门) 01. <PHP与MySQL程序设计(第4版)>  http://item.jd.com/10701892.html 02. <深入浅出MySQL 数据库开发 优化与管理维护 第2版> http://item.jd.com/11381295.html 03. <实战Nginx:取代Apache的高性能Web服务器> http://dwz.cn

Java进阶学习(2)——log4j的学习和使用

Java进阶学习(2)--log4j的学习和使用 简介Loj4j Log4j的组成 Log4j主要由三大组组件构成: Logger: 负责生成日志,并能够对日志信息进行分类筛选,通俗的讲就是决定什么日志信息应该被输出,什么日志信息应该被忽略. Appender: 定义了日志信息输出的目的地,指定日志信息应该被输出到什么地方,这些地方可以是控制台.文件或网络设备等. Layout: 指定日志信息的输出格式. 说明: 一个Logger可以有多个Appender,这意味着日志信息可以被输出到多个设备上

java进阶学习计划

断断续续使用java也已经有两年了,算是最熟悉的开发工具了.但写的代码都是以项目为导向,追求work around,还需要打好基础才能长远发展. 大致的进阶学习计划, 阶段1:深究java语法,阅读常用库的jdk源码,了解jvm机制; 阶段2:阅读基于java的开源框架源码,各种framework,container. 希望可以坚持下来,经常更新技术博客. java进阶学习计划

Java:进阶学习(1)——网络编程

Java:进阶学习(1)--网络编程 基础 Socket与ServerSocket Socket又称"套接字",网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. Socket方法 getInetAddress();    远程服务端的IP地址 getPort();    远程服务端的端口 getLocalAddress()    本地客户端的IP地址 getLocalPort()    本地客户端的端口 getInputStream();   

Linux初学者进阶学习资源整理

Linux初学者进阶学习资源整理 实验楼分享的Linux学习路径,用图文并茂的形式清晰直观的告诉了Linux初学者该如何从一个新手小白进阶成为Linux高手. 不过这条Linux学习路径到底只是一个学习计划,没能有详细的教程提供给大家学习.回想之前写的(干货)Linux学习资源推荐,也只是比较全面的列举了可以学习Linux的地方. 于是乎便有了这篇Linux初学者进阶学习资源整理,将会按照学习路径的知识点学习为大家提供详细的教程(不限于视频.书籍.网络教程.技术博客等资源). Linux初级入门

Jmeter进阶学习二(参数化)

1.疑问:为啥要使用参数化? 在测试过程中,参数化也是一种很重要的东西,比如:如果系统过程中多次使用同一个id,万一此id发生变化了,就需要每个文件中id一个一个的进行修改,如果使用参数化的话,就只需修改一个文件即可: 这样的话可以减少工作量: 2.此处采用的是用户定义的变量: 3.如何调用定义的变量? ...... 未完待续.... Jmeter进阶学习二(参数化)