异步请求-Ajax

 
 
Ajax基本介绍

1. AJAX 即Asynchronous Javascript And XML"(异步JavaScript和XML)
2. Ajax是一种浏览器异步发起请求(指定发哪些数据)，局部更新页面的技术

前端访问后端携带的某些数据，可能后端是不需要的，但前端还是是会一股脑的发送过来的
后端因为某些原因没有给前端响应的话，那么前端是会一直处于等待状态，直到超时

使用ajax，可以指定那些数据发送给后端，并且是以异步的方式(ajax发送完后，前端页面可以继续往下执行，无需等待)

 
Ajax原理示意图

1. 在前端创建XMLHttpRequest对象[ajax引擎对象]
2. 将要指定发送的数据放入XMLHttpRequest对象中，并异步发送(XMLHttpRequest对象通过http请求发送指定数据后(http请求由XMLHttpRequest对象发出)，可以继续往下执行的
3. 当服务端返回http响应时，XMLHttpRequest对象可以指定由哪个函数来处理(本质就是事件绑定)
4. 得到返回的数据后，可以进行dom操作，完成局部刷新/页面/数据

 
使用ajax的优点

1. 可以通过XMLHttpRequest对象，发送指定数据, 数据量小, 速度快
2. XMLHttpRequest是异步发送, 在服务端没有Http响应前，浏览器不需要等待，用户可以进行其它操作
3. 可以进行局部刷新，提高了用户的体验

 
Ajax使用
创建Ajax引擎对象(XmlHttpRequest)

var xhr = new XMLHttpRequest();

 
Ajax向服务端发送请求

xhr.open("GET", "/ajax/checkUserServlet?uname=" + username, true);

xhr.send();

send(string): 里面的string是POST请求才添加的

如果是GET请求，http请求携带的数据是跟在http://host:port/工程名/资源名?后面的,那么在open的第二个参数url把数据拼接在最后即可，发送直接xhr.send()

如果是POST请求，http请求携带的数据是不会跟在URL后面,所以在发送时，将数据以字符串的形式携带,xhr.send(string)

API	解释
open(method, url, async)	规定请求的类型、URL 以及是否异步处理请求。 ● method：请求的类型，GET或POST ● url：文件在服务器上的位置 ● async： true(异步）或 false(同步)
send(string)	将请求发送到服务器。 string：仅用于POST请求

 
Ajax服务器响应

API	解释
responseText	获得字符串形式的响应数据。 可以是JSON字符串
responseXML	获得XML形式的响应数据。

 
onreadystatechange 事件
当http响应回来时，会自动触发一个事件：onreadystatechange 事件
可以通过事件给它绑定一个函数，这个函数就可以拿到返回的数据

当数据变化了-->导致readyState变化-->触发onreadystatechange事件-->调用绑定的函数

下面是XMLHttpRequest 对象的三个重要的属性:

属性	描述
onreadystatechange	存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
readyState	存有XMLHttpRequest的状态。从0到4发生变化。 ● 0：请求未初始化 ● 1：服务器连接已建立. ● 2：请求已接收 ● 3：请求处理中 ● 4：请求已完成，且响应已就绪
status	200： “OK” 404：未找到页面

具体使用

    <script type="text/javascript">
        window.onload = function () {
            var button = document.getElementById("checkButton");
            button.onclick = function () {
                //1.创建XMLHttpRequest
                var xhr = new XMLHttpRequest();
                //获取用户填写的用户名
                var username = document.getElementById("uname").value;
                //2.准备发送指定数据 open,send
                /**
                 * "GET", 请求方式
                 *"/ajax/checkUserServlet?username=" + username, URL
                 * true, 异步发送
                 */
                xhr.open("GET", "/ajax/checkUserServlet?uname=" + username, true);

                //说明，在send函数调用前，给XMLHttpRequest 绑定一个事件onreadystatechange
                //该事件表示，可以去指定一个函数，当数据变化，会触发readyState
                //每当xhr对象readyState 改变时，就会触发onreadystatechange事件
                xhr.onreadystatechange = function () {
                }

                //真正发送ajax请求[http请求]
                //说明如果你POST请求，再send("发送的数据")
                xhr.send();
            }
        }
    </script>

 

JQuery操作Ajax
$.ajax

常用参数	描述
url	用来设置发送请求的地址，默认是当前页地址
type	请求的方式 get 或 post
data	发送到服务器的数据。将自动转换为请求字符串格式
success: function (data, status, xhr) {}	成功的回调函数 这是一个Ajax事件
error	失败的回调函数
dataType	返回的数据类型 常用 json 或 text

    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //发出ajax请求
                /*
                   * 1. 指定参数时，需要在 {}
                   * 2. 给参数时，前面需要指定参数名
                   * 3. dataType: "json"要求服务器返回的数据格式是JSON
                 */
                $.ajax({ //这里我们直接给json，为啥我要传日期，为了浏览器缓存
                    url: "/ajax/checkUserServlet3",
                    type: "POST",
                    data: {
                        username: $("#uname").val(),
                        date: new Date()
                    },
                    error: function () { //失败后的回调函数
                    },
                    success: function (data, status, xhr) { //成功后的回调函数
                    },
                    dataType: "json"
                })
    </script>

 

$.get

get()方法通过远程HTTP GET请求载入信息。
这是一个简单的GET请求功能以取代复杂$.ajax
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax

因为，\$.get请求 简写了 $.ajax的写法(前面可以不用加参数名)，
因此在传递参数时，要严格按照url，data，success, dataType 这个顺序传递

参数	描述
url	必需。规定将请求发送的哪个URL
data	可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)	可选。规定当请求成功时运行的函数。
dataType	可选。规定的服务器响应的数据类型。

    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //说明
                //1. $.get()默认是get请求，不需要指定请求方式
                //2. 不需要指定参数名
                //3. 填写的实参,是顺序 url, data, success回调函数,返回的数据格式
                //.get()使用
                $.get(
                    "/ajax/checkUserServlet3",
                    {
                        username: $("#uname").val(),
                        data: new Date()
                    },
                    function (data, status, xhr) { //成功后的回调函数
                    },
                    "json"
                )
            })
        })
    </script>

 
$.post

参数	描述
url	必需。规定把请求发送到哪个URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, xhr)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。

因为，\$.post请求 简写了 $.ajax的写法(前面可以不用加参数名)，
因此在传递参数时，要严格按照url，data，success, dataType 这个顺序传递
 
getJson
getJson：请求方式为get，返回的数据类型：JSON
使用getJson函数：必须要求返回的数据是JSON

参数	描述
url	必需。规定将请求发送的哪个URL。
data	可选。规定连同请求发送到服务器的数据。
success(data, status, xhr)	可选。规定当请求成功时运行的函数。

    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //说明
                //1. 如果你通过jquery发出的ajax请求是get并且返回的数据格式是jSON
                //2. 可以直接使用getJSON()函数，就很简洁
                $.getJSON(
                    "/ajax/checkUserServlet3",
                    {
                        username: $("#uname").val(),
                        data: new Date()
                    },
                    function (data, status, xhr) { //成功后的回调函数
                    }
                )
            })
        })
    </script>

 
小细节
回调函数
由程序员编写，不由程序员调用。而是由某个事件触发调用的函数
 
$.ajax、$.get、$.post、$JSON 的 success 都会返回三个参数

参数	描述
data	返回的数据
status	返回的状态
xhr	返回的 XMLHttpRequest 对象
其中返回的结果，可以通过 data.数据参数名的方式取出

从后端返回的数据一定要指定格式
比如，后端返回的是JSON格式，那么一定要加上response.setContentType("text/json;charset=utf-8");
 
 

Ajax基本介绍

前端访问后端携带的某些数据，可能后端是不需要的，但前端还是是会一股脑的发送过来的
后端因为某些原因没有给前端响应的话，那么前端是会一直处于等待状态，直到超时

Ajax基本应用场景

Ajax原理示意图

传统的WEB数据通信方式

Ajax数据通信方式

1.在前端创建XMLHttpRequest对象[ajax引擎对象]-->2.将要指定发送的数据放入XMLHttpRequest对象中，并异步发送(XMLHttpRequest对象通过http请求发送指定数据后(http请求由XMLHttpRequest对象发出)，可以继续往下执行的)-->3.当服务端返回http响应时，XMLHttpRequest对象可以指定由哪个函数来处理(本质就是事件绑定)-->4.得到返回的数据后，可以进行dom操作，完成局部刷新/页面/数据

Ajax使用

创建Ajax引擎对象(XmlHttpRequest)
 

Ajax向服务端发送请求
send(string): 里面的string是POST请求才添加的

如果是GET请求，http请求携带的数据是跟在http://host:port/工程名/资源名?后面的,那么在open的第二个参数url把数据拼接在最后即可，发送直接xhr.send()

如果是POST请求，http请求携带的数据是不会跟在URL后面,所以在发送时，将数据以字符串的形式携带,xhr.send(string)

 

Ajax服务器响应
http响应返回的数据就存在XMLHttpRequest对象中

 

onreadystatechange 事件
当http响应回来时，会自动触发一个事件：onreadystatechange 事件
可以通过事件给它绑定一个函数，这个函数就可以拿到返回的数据

当数据变化了-->导致readyState变化-->触发onreadystatechange事件-->调用绑定的函数

Ajax应用

完成的步骤

预备工作
先将一条完成的线打通，点击提交，可以正确调用servlet

1.服务端能正确接收到Ajax请求[http请求]
login.html

        window.onload = function () {
            var checkButton = document.getElementById("checkButton");
            checkButton.onclick = function () {
                //1.创建XMLHttpRequest对象(ajax引擎对象)
                var xhr = new XMLHttpRequest();
                //获取用户填写的用户名
                var uname = document.getElementById("uname").value;
                //2.准备发送指定数据 open,send
                /**
                 * "GET", 请求方式
                 *"/ajax/checkUserServlet?username=" + username, URL
                 * true, 异步发送
                 */
                xhr.open("GET", "/ajax/checkUserServlet?uname=" + uname, true);

                //真正发送ajax请求[http请求]
                //说明如果你POST请求，再send("发送的数据")
                xhr.send();
            }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //注意这里uname 是 填写 Ajax请求的URL 后面携带的数据名称,不再是表单的name
        String uname = request.getParameter("uname");
    }

2.XMLHttpRequest对象可以接收到http请求
login.html

    <script type="text/javascript">
        window.onload = function () {
            var checkButton = document.getElementById("checkButton");
            checkButton.onclick = function () {
                //1.创建XMLHttpRequest对象(ajax引擎对象)
                var xhr = new XMLHttpRequest();
                //获取用户填写的用户名
                var uname = document.getElementById("uname").value;

                //说明，在send函数调用前，给XMLHttpRequest 绑定一个事件onreadystatechange
                //该事件表示，可以去指定一个函数，当数据变化，会触发onreadystatechange
                //每当xhr对象readyState 改变时，就会触发onreadystatechange事件
                xhr.onreadystatechange = function () {
                    console.log("xhr=", xhr);
                }

                //2.准备发送指定数据 open,send
                /**
                 * "GET", 请求方式
                 *"/ajax/checkUserServlet?username=" + username, URL
                 * true, 异步发送
                 */
                xhr.open("GET", "/ajax/checkUserServlet?uname=" + uname, true);
                //真正发送ajax请求[http请求]
                //说明如果你POST请求，再send("发送的数据")
                xhr.send();
            }
        }
    </script>

CheckUserServlet

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //注意这里uname 是 填写 Ajax请求的URL 后面携带的数据名称,不再是表单的name
        //接收到ajax提交的数据
        String uname = request.getParameter("uname");
        response.setContentType("text/html;charset=utf-8");

        //假定用户名为king,就不可使用，其他用户名可以
        if ("king".equals(uname)) { //不能使用king用户名
            User king = new User(100, "king", "king@qq.com", "666");
            //把king对象转成JSON字符串
            String strKing = new Gson().toJson(king);
            //返回
            response.getWriter().write(strKing);
        } else {
            //如果用户名可以用,返回""
            response.getWriter().write("");
        }
    }

3.在前端页面可以得到返回的数据

login.html

    <script type="text/javascript">
        window.onload = function () {
            var checkButton = document.getElementById("checkButton");
            checkButton.onclick = function () {
                //1.创建XMLHttpRequest对象(ajax引擎对象)
                var xhr = new XMLHttpRequest();
                //获取用户填写的用户名
                var uname = document.getElementById("uname").value;

                //说明，在send函数调用前，给XMLHttpRequest 绑定一个事件onreadystatechange
                //该事件表示，可以去指定一个函数，当数据变化，会触发onreadystatechange
                //每当xhr对象readyState 改变时，就会触发onreadystatechange事件
                xhr.onreadystatechange = function () {
                    var responseText = xhr.responseText;
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        console.log("responseText=", responseText);
                    }
                }

                //2.准备发送指定数据 open,send
                /**
                 * "GET", 请求方式
                 *"/ajax/checkUserServlet?username=" + username, URL
                 * true, 异步发送
                 */
                xhr.open("GET", "/ajax/checkUserServlet?uname=" + uname, true);
                //真正发送ajax请求[http请求]
                //说明如果你POST请求，再send("发送的数据")
                xhr.send();
            }
        }
    </script>

4.局部刷新
login.html

    <script type="text/javascript">
        window.onload = function () {
            var button = document.getElementById("checkButton");
            button.onclick = function () {
                //1.创建XMLHttpRequest
                var xhr = new XMLHttpRequest();
                //获取用户填写的用户名
                var username = document.getElementById("uname").value;
                //2.准备发送指定数据 open,send
                /**
                 * "GET", 请求方式
                 *"/ajax/checkUserServlet?username=" + username, URL
                 * true, 异步发送
                 */
                xhr.open("GET", "/ajax/checkUserServlet?uname=" + username, true);

                //说明，在send函数调用前，给XMLHttpRequest 绑定一个事件onreadystatechange
                //该事件表示，可以去指定一个函数，当数据变化，会触发onreadystatechange
                //每当xhr对象readyState 改变时，就会触发onreadystatechange事件
                xhr.onreadystatechange = function () {
                    //把返回的jon数据，显示在div
                    document.getElementById("div1").innerHTML = xhr.responseText;
                    //如果请求己完成，且响应己就绪，并且状态码是200
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var responseText = xhr.responseText;
                        if (responseText != "") {
                            document.getElementById("myres").value = "用户名不可用";
                        } else {
                            document.getElementById("myres").value = "用户名可用";
                        }
                    }
                }

                //真正发送ajax请求[http请求]
                //说明如果你POST请求，再send("发送的数据")
                xhr.send();
            }
        }
    </script>

测试其他用户名

测试king用户名

 

应用升级-接入数据库

建表
注意创建的dao一定要与表中的字段保持一致！

-- 建表
CREATE table `user` (
		id INT PRIMARY KEY AUTO_INCREMENT,
		username VARCHAR(32) NOT NULL DEFAULT '',
		pwd varchar(255) NOT NULL DEFAULT '',		
		email varchar(255) NOT NULL DEFAULT ''
) CHARACTER SET utf8 COLLATE utf8_bin ENGINE INNODB;

-- 插入测试数据
INSERT into `user` VALUES(null,'king',MD5('123456'),'king@qq.com');
INSERT INTO `user` VALUES(null,'tom',MD5('123'),'tom@163.com');

跟之前做的满汉楼没有很大的区别，有一点要注意，JavaWeb在运行时的文件都在out目录下，因此要获取src目录下的文件时，需要使用类加载器（配置文件druid.properties不能直接通过src目录直接读取）

JDBCUtilsByDruid

...
public class JDBCUtilsByDruid {

    private static DataSource ds;

    //在静态代码块完成 ds初始化
    static {
        Properties properties = new Properties();
        try {
            //properties.load(new FileInputStream("D:\\idea\\JavaWeb\\ajax\\src\\druid.properties"));
            //解读
            //1.目前我们是javaweb方式启动
            //2．所以要获取src目录下的文件，需要使用类加载器
            properties.load(JDBCUtilsByDruid.class.getClassLoader().getResourceAsStream("druid.properties"));
            ds = DruidDataSourceFactory.createDataSource(properties);
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
....

UserService

package com.study.service;

import com.study.dao.UserDAO;
import com.study.entity.User;

/**
 * @author 珀筱
 */
@SuppressWarnings({"all"})
/*
    UserService提供业务方法
    比如getUserByName
 */
public class UserService {
    //属性userDao，方便操作数据库
    private UserDAO userDAO = new UserDAO();

    //查询用户
    public User getUserByName(String username) {
        String sql = "select * from user where username = ?";
        return userDAO.querySingle(sql, User.class, username);
    }
}

CheckUserServlet2

package com.study.servlet;

import com.google.gson.Gson;
import com.study.entity.User;
import com.study.service.UserService;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author 珀筱
 */
public class CheckUserServlet2 extends HttpServlet {
    //定义UserService
    private UserService userService = new UserService();

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收到ajax提交的数据
        String uname = request.getParameter("uname");
        response.setContentType("text/html;charset=utf-8");
        User user = userService.getUserByName(uname);
        //到DB查询
        //如果有就返回user对象，否则，返回的是null
        if (user != null) { //说明用户名存在... 返回该user的json格式数据字符串
            String strUser = new Gson().toJson(user);
            response.getWriter().write(strUser);
        } else {
            response.getWriter().write("");
        }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

测试king用户名

测试其他用户名

 
 

JQuery操作Ajax

原生Ajax请求问题分折

$.ajax 介绍

回调函数：由程序员编写，不由程序员调用。而是由某个事件触发调用的函数

url：用来设置发送请求的地址，默认是当前页地址

 
type：设置请求方式

 
data

 
success

 
dataType

 

$.get 与 $.post 介绍

$.get请求

$.post请求

 

getJson 介绍

getJson：请求方式为get，返回的数据类型：JSON
使用getJson函数：必须要求返回的数据是JSON

 

Jquery $.ajax 应用案例

预备工作
先将一条完成的线打通，点击提交，可以正确调用servlet

1.服务端能正确接收到Ajax请求(使用JQuery来完成Ajax的请求)
login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //发出ajax请求
                /*
                   * 1. 指定参数时，需要在 {}
                   * 2. 给参数时，前面需要指定参数名
                   * 3. dataType: "json"要求服务器返回的数据格式是JSON
                 */
                $.ajax({ //这里我们直接给json，为啥我要传日期，为了浏览器缓存
                    url: "/ajax/checkUserServlet3",
                    type: "POST",
                    data: {
                        username: $("#uname").val(),
                        data: new Date()
                    },
                    error: function () { //失败后的回调函数
                        console.log("失败~");
                    },
                    success: function (data, status, xhr) {
                        console.log("成功~");
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                    },
                    dataType: "json"
                })
    </script>

CheckUserServlet

public class CheckUserServlet2 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        System.out.println("username=" + username);
    }

 
2.$.ajax的回调函数被调用(http响应返回)
这里调用到失败的回调函数，是因为没有返回json数据(指定服务端返回的数据类型是 JSON)

返回JSON字符串

public class CheckUserServlet2 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        System.out.println("username=" + username);
        //创建gson对象
        Gson gson = new Gson();
        User user = new User(-1, "", "", "");
        response.getWriter().write(gson.toJson(user));
    }

成功后的回调函数被调用，但是可以发现返回的格式有问题，解析成XML文件了

只需要在返回时，指定返回的类型(JSON)即可
response.setContentType("text/json;charset=utf-8");

public class CheckUserServlet3 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收jquery发送的ajax数据
        String username = request.getParameter("username");
        
        Gson gson = new Gson();
        //指定返回的类型
        response.setContentType("text/json;charset=utf-8");

		//如果用户名为king,则用户名不可用
        if ("king".equals(username)) {
            User user = new User(100, "king", "123", "king@qq.com");
            response.getWriter().write(gson.toJson(user));            
        } else { //如果用户名为其他,则用户名可用
            //返回一个不存在的User
            User user = new User(-1, "", "", "");
            response.getWriter().write(gson.toJson(user));
        }
    }

 
3.在前端页面可以得到返回的数据,并局部刷新

    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                $.ajax({
                    url: "/ajax/checkUserServlet2",
                    type: "GET",
                    data: {
                        username: $("#uname").val(),
                        date: new Date()
                    },
                    error: function () {
                        console.log("失败~");
                    },

                    success: function (data, status, xhr) {
                        console.log("成功~");
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                        $("#div1").html(JSON.stringify(data));
                        if ("" == data.username) {
                            $("#myres").val("该用户名可用");
                        } else {
                            $("#myres").val("该用户名不可用");
                        }

                    }, dataType: "json",
                })
            })
        })
    </script>

success回调函数，会返回三个参数：data, status, xhr

参数	解释
data	返回的数据
status	返回的状态
xhr	XMLHttpRequest[ajax引擎对象]

取出返回的数据使用 data.数据参数名
这个返回数据名，可以通过抓包来查看
比如要取得返回email,使用data.email即可

这些数据参数名从哪来？
我们返回的是一个user对象的JSON字符串
因此，这些数据参数名就是user类定义的属性名

 
查看结果

 
 

Jquery $.get 应用案例

login.html

因为，.get()请求 简写了 .ajax的写法(前面可以不用加参数名)，
因此在传递参数时，要严格按照url，data，success, dataType) 这个顺序传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //说明
                //1. $.get()默认是get请求，不需要指定请求方式
                //2. 不需要指定参数名
                //3. 填写的实参,是顺序 url, data, success回调函数,返回的数据格式
                //.get()使用
                $.get(
                    "/ajax/checkUserServlet3",
                    {
                        username: $("#uname").val(),
                        data: new Date()
                    },
                    function (data, status, xhr) { //成功后的回调函数
                        console.log("成功~");
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                        //data是json对象->显示转成son的字符串
                        $("#div1").html(JSON.stringify(data));
                        if ("" == data.username) {
                            $("#myres").val("该用户名可用");
                        } else {
                            $("#myres").val("该用户名不可用");
                        }
                    },
                    "json"
                )
            })
        })
    </script>

 

Jquery $.post 应用案例

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //说明$.post()和$.get() 的方式一样
                //只是这时，是按post方式发送ajax请求
                $.post(
                    "/ajax/checkUserServlet3",
                    {
                        username: $("#uname").val(),
                        data: new Date()
                    },
                    function (data, status, xhr) { //成功后的回调函数
                        console.log("$.post()成功~");
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                        //data是json对象->显示转成son的字符串
                        $("#div1").html(JSON.stringify(data));
                        if ("" == data.username) {
                            $("#myres").val("该用户名可用");
                        } else {
                            $("#myres").val("该用户名不可用");
                        }
                    },
                    "json"
                )
            })
        })
    </script>

 

Jquery getJson 应用案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //说明
                //1. 如果你通过jquery发出的ajax请求是get并且返回的数据格式是jSON
                //2. 可以直接使用getJSON()函数，就很简洁
                $.getJSON(
                    "/ajax/checkUserServlet3",
                    {
                        username: $("#uname").val(),
                        data: new Date()
                    },
                    function (data, status, xhr) { //成功后的回调函数
                        console.log(".getJSON()成功~");
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                        //data是json对象->显示转成son的字符串
                        $("#div1").html(JSON.stringify(data));
                        if ("" == data.username) {
                            $("#myres").val("该用户名可用");
                        } else {
                            $("#myres").val("该用户名不可用");
                        }
                    }
                )
            })
        })
    </script>