Ajax--实现检测用户名是否存在功能

（一）什么是Ajax

（二）同步交互与异步交互

（三）AJAX常见应用情景

（四）AJAX的优缺点

（五）使用jQuery实现AJAX

1.使用JQuery中的ajax方法实现步骤（jQuery是js的一个框架）

[2. $.ajax()](#2.$ .ajax())

语法:

（六）案例：实现光标移开输入框就判断用户名是否存在的功能

思路：

运行结果：

（一）什么是Ajax

Ajax（Asynchronous Javascript And XML）翻译成中文就是"异步JavaScript和XML"，即使用JavaScript与服务器进行异步交互，传输的数据为XML。
AJAX还可以在浏览器实现局部刷新的效果，即不需要刷新整个页面，就比如之前的案例：验证码，这一特点给用户的感受是在不知不觉中完成请求和响应过程。
特点：

与服务器异步交互

实现浏览器页面局部刷新

（二）同步交互与异步交互

**同步交互：**客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

**异步交互：**客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

通俗来说，同步交互就如同，当你向一个人发消息，你发了一条，必须要等对方回复了才能发下一条，异步交互则不需要等待对方的回复，两人可以同时发送自己想发的信息。

（三）AJAX常见应用情景

当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为zhangSan的用户是否存在，最终服务器返回true表示名为zhangSan的用户已经存在了，浏览器在得到结果后显示"用户名已被注册！"。

整个过程中页面没有刷新，只是局部刷新了；

在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

（四）AJAX的优缺点

优点：

AJAX使用JavaScript技术向服务器发送异步请求

AJAX不需要刷新整个页面

因为服务器不是响应的整个页面，而是局部，所以AJAX能够提高系统的性能

缺点：

AJAX并不适用所有场景，有很多情况还是需要用到同步交互

AJAX虽然提高了用户的体验，但无形中向服务器发送了太多请求，导致服务器的压力增大

因为AJAX是在浏览器中使用JavaScript技术完成的，所以还需要考虑服务器的兼容性问题

（五）使用jQuery实现AJAX

JQuery中已经将AJAX相关的操作进行了封装,使用时只需要在合适的地方调用AJAX相关的方法即可

1.使用JQuery中的ajax方法实现步骤（jQuery是js的一个框架）

先引入jQuery文件
调用jQuery中的ajax函数
编写Servlet方法（接受请求并处理）
在ajax中接收来自服务端的结果

2.$.ajax()

$.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层的AJAX的实现,具有较高灵活性

语法:

$.ajax(

参数1：请求地址url,

参数2：请求类型,

参数3：请求参数,

参数4：请求参数的类型,

参数5：请求成功的回调函数

);

常用设置参数如下:

参数说明

String url 发送请求的地址,默认为当前页地址

String type 请求方式(POST或者GET,默认为GET)

Number timeout 设置请求超时时间

Object data 或 String data 发送到服务器的数据

String dataType 预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text

function beforeSend(XMLHttpRequest xhr) 发送请求前调用的函数参数xhr,可选, XMLHttpRequest对象

function complete(XMLHttpRequest xhr,String ts) 请求完成后调用的函数(请求成功或失败时均调用)参数: xhr,可选, XMLHttpRequest对象, ts可选,描述请求类型的字符串

function success(Object result,String ts) 请求成功后调用的函数参数result:可选,由服务器返回的数据参数ts可选,描述请求类型的字符串

function error(XMLHttpRequest xhr,String em,Exception e) 请求失败时调用的函数参数: xhr,可选, XMLHttpRequest对象, 参数em可选,错误信息参数e:可选 ,捕获的异常对象

boolean global 默认为true,表示是否触发全局的AJAX事件

参数	说明
String url	发送请求的地址,默认为当前页地址
String type	请求方式(POST或者GET,默认为GET)
Number timeout	设置请求超时时间
Object data 或 String data	发送到服务器的数据
String dataType	预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text
function beforeSend(XMLHttpRequest xhr)	发送请求前调用的函数参数xhr,可选, XMLHttpRequest对象
function complete(XMLHttpRequest xhr,String ts)	请求完成后调用的函数(请求成功或失败时均调用)参数: xhr,可选, XMLHttpRequest对象, ts可选,描述请求类型的字符串
function success(Object result,String ts)	请求成功后调用的函数参数result:可选,由服务器返回的数据参数ts可选,描述请求类型的字符串
function error(XMLHttpRequest xhr,String em,Exception e)	请求失败时调用的函数参数: xhr,可选, XMLHttpRequest对象, 参数em可选,错误信息参数e:可选 ,捕获的异常对象
boolean global	默认为true,表示是否触发全局的AJAX事件

（六）案例：实现光标移开输入框就判断用户名是否存在的功能

思路：

绑定事件bluron，实现光标移开聚焦即可检测用户名是否存在
在jsp中使用ajax函数，湘服务器传递参数
编写Servlet类，通过response对象得到响应输出流，湘客户端写入用户名是否存在的数据
编写dao层方法，从数据库中查询该用户名的信息
JSP页面：

html 复制代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function(){
            $("#uname").blur(function(){
                var uname = $(this).val();
                if(uname == ""){
                    $("#remind").html("用户名不能为空");
                } else {
                    $.ajax({
                        url: "http://localhost:8080/CheckUsername",
                        type: "get",
                        data: "uname=" + uname,
                        dataType: "text",
                        success: function(result) {
                            console.log("Response received: " + result);
                            alert(result);
                        },
                        error: function(xhr, status, error) {
                            console.error("AJAX Error: " + status + error);
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>
用户名：<input type="text" name="uname" id="uname" /><span id="remind"></span>
</body>
</html>

Servlet方法：

java 复制代码

@WebServlet("/CheckUsername")
public class CheckUsernameServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 接收前端输入的用户名
        String uname = req.getParameter("uname");
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        UserService userService = new UserServiceImpl();
        if(userService.queryUsername(uname)){
            resp.getWriter().write("用户名已存在");
        }else{
            resp.getWriter().write("用户名不存在");
        }
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }
}

Dao层方法：

java 复制代码

public class UserDaoImpl implements UserDao {
    @Override
    public boolean queryUsername(String uname) {
        Connection conn = null;
        try {
            conn= JdbcUtils.getConnection();
            String sql="select * from users where username = ? ";
            QueryRunner qr=new QueryRunner();
            List<User> users = qr.query(conn,sql,new BeanListHandler<User>(User.class),uname);
            if (users.size()==0){
                return false;
            }else {
                return true;
            }
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
    }
}

运行结果：

用户名不存在：

用户名已存在：