异步数据交互ajax和axios

AJAX 与Ax ios

一、案例 准备

本次使用一个简单的登录来测试 ajax与axios（使用 javaweb 开发测试）
话不多说，上代码

1、首先数据库必不可少

很多字段基本没用上，可以忽略不及，只要用户名密码即可

-- auto-generated definition

create table users
(
    id       varchar(50)   not null
        primary key,
    name     varchar(50)   not null comment '姓名',
    age      int           null comment '年龄',
    sex      int default 1 null comment '性别,1代表男，0代表女默认男,',
    password varchar(20)   not null,
    check (`sex` in (0, 1))
)
    charset = utf8;

2、实体类紧跟其后

public class User {

    private String id;
    private String name;
    private String password;
    private int age;
    private int sex;
}
//此处省略了getter和setter方法以及构造等其他方法

3、然后 就是 数据库 访问层

数据库连接的工具类

public class JdbcUtils {

    private static final String JDBC_URL = "jdbc:mysql://localhost:3306/test?useSSL=false&amp;serverTimezone=UTC&amp;charsetEncoding=utf-8";
    private static final String USERNAME = "root";
    private static final String PASSWORD = "root";
    private static Connection con = null;
    private static Statement stm = null;
    private static ResultSet rs = null;

    /**
     * @return
     * 获取连接
     */
    public static Connection getCon() {
        try {
//            1.注册驱动
            Class.forName("com.mysql.cj.jdbc.Driver");
//            2.加载连接
            con = DriverManager.getConnection(JDBC_URL, USERNAME, PASSWORD);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return con;
    }


    /**
     * @param sql
     * @return
     * 公共增删改的方法，因为增删改对行影响，所以返回row
     */

    public static int update(String sql) {
        int row = 0;
        try {
            if (con == null) {
                con = getCon();
            }
            stm = con.createStatement();
            row = stm.executeUpdate(sql);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return row;
    }


    /**
     * @param sql
     * @return
     * 查询的方法
     */
    public static ResultSet query(String sql) {
        try {
            if (con == null) {
                con = getCon();
            }
            stm = con.createStatement();
            rs = stm.executeQuery(sql);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return rs;
    }

    /**
     *
     * @param connection
     * @param statement
     * @param resultSet
     * 关闭连接，释放资源
     */
    public static void closeAll(Connection connection, Statement statement, ResultSet resultSet) {
        try {
            if (connection != null) {
                connection.close();
            }
            if (statement != null) {
                statement.close();
            }
            if (resultSet != null) {
                resultSet.close();
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

数据库访问层，没有写接口，直接写的简单化开发

public class UserDao {

    /**
     * 
     * @param sql
     * @return
     * 封装的是一个集体查数据的私有方法
     */
    private List<User> get(String sql) {
        ResultSet resultSet = JdbcUtils.query(sql);

        List<User> list = new ArrayList<>();
        User user;
        try {
            while (resultSet.next()) {
                user = new User();
                user.setId(resultSet.getString("id"));
                user.setName(resultSet.getString("name"));
                user.setAge(resultSet.getInt("age"));
                user.setSex(resultSet.getInt("sex"));
                user.setPassword(resultSet.getString("password"));
                list.add(user);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            JdbcUtils.closeAll(null, null, resultSet);
        }
        return list;
    }

    /**
     * 
     * @param username 用户名
     * @param password 密码
     * @return
     * 登录方法，简单实现一下，
     */
    public boolean login(String username, String password) {
        String sql = "SELECT * FROM users WHERE name='" + username + "' AND password='" + password + "'";
        List<User> list = get(sql);
        if (list == null || list.isEmpty()) {
            return false;
        }
        System.out.println(list);
        return true;
    }
}

4、直接 servlet类

这里我直接省略了service层

@WebServlet(urlPatterns = "/user")
public class UserController extends HttpServlet {


    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String username = request.getParameter("username");
        String password = request.getParameter("password");

        System.out.println(username + "---doGet---" + password);

        UserDao userDao = new UserDao();
        boolean login = userDao.login(username, password);
        System.out.println(login);
    }


    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      /*
      //        字节流，中文乱码
        ServletInputStream inputStream = request.getInputStream();
        byte[] bytes = new byte[1024];
        int len = 0;
        String str = null;
        while ((len = inputStream.read(bytes)) != -1) {
            str = new String(bytes, 0, len);
        }
        System.out.println("str-----" + str);
//        字符流和字节流获取数据任取一种都可，不过字节流中文乱码，建议使用字符流
        */

/*
//        设置编码
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html; charset=utf-8");
*/

//        使用字符流读取数据
        BufferedReader reader = request.getReader();
        char[] buf = new char[1024];
        int len = 0;
//        StringBuilder str = new StringBuilder();
        StringBuffer str = new StringBuffer();
        while ((len = reader.read(buf)) != -1) {
            str.append(buf, 0, len);
        }
        UserDao userDao = new UserDao();
//        将前端获取到的StringBuffer对象转成String
        String s = String.valueOf(str);
        System.out.println("str=====" + str+"--------ts====="+s);

//        先判空，在判断是不是JSON格式
        if (s != null) {
            if (JSONObject.isValid(s)) {
//        转换为JSON格式
                JSONObject jsonObject = JSONObject.parseObject(s);
                String username = jsonObject.getString("username");
                String password = jsonObject.getString("password");
                System.out.println(username + "---doPost---" + password);
                boolean login = userDao.login(username, password);
                System.out.println(login);
            }else {
                System.out.println("数据格式有问题，用户名密码默认为空");
                boolean login = userDao.login(null, null);
                System.out.println(login);
            }
        }
    }

}

因为在dopost 方法中post 请求不携带数据，所以使用request.getParameter();获取不到数据，这时候就需要使用到数据流了。
上面dopost中使用的是字符流获取数据
下面是字节流获取数据，因为字节流获取数据，中文会乱码，所以一般使用字符流

/* 
   @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//        字节流，中文乱码
        ServletInputStream inputStream = request.getInputStream();
        byte[] bytes = new byte[1024];
        int len = 0;
        String str = null;
        while ((len = inputStream.read(bytes)) != -1) {
            str = new String(bytes, 0, len);
        }
        System.out.println("str-----" + str);
        String[] data = str.split(",");
        for (String datum : data) {
            System.out.println(datum);
        }

    }
*/

5、过滤器

@WebFilter(urlPatterns = "/*")这是拦截全部的请求，然后将字符编码处理过后才放行

@WebFilter(urlPatterns = "/*")
public class EncodingFilter implements Filter {


    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {

        HttpServletRequest request = (HttpServletRequest) servletRequest;

        String method = request.getMethod();
        System.out.println(method);

        //判断是post方法，设置编码
        if ("POST".equals(method)) {
            servletRequest.setCharacterEncoding("utf-8");
            servletResponse.setContentType("text/html; charset=UTF-8");
        }
        filterChain.doFilter(servletRequest, servletResponse);

    }

    @Override
    public void destroy() {

    }

}

5、注意一点

Get和post都能够提交数据，那么他们有什么不同呢？

不同点一：

通过get方式提交的数据有大小的限制，通常在1024字节左右。也就是说如果提交的数据很大，用get方法就可需要小心；而post 方式没有数据大小的限制，理论上传送多少数据都可以。
不同点二：

通过get传递数据，实际上是将传递的数据按照”key，value”的方式跟在URL的后面来达到传送的目的的；而post 传递数据是通过http 请求的附件进行的，在URL中并没有明文显示。
不同点三：

通过Get方式提交的数据安全性不高，而Post方式的更加安全~

二、原生的ajax 请求

登录页面代码内容基本相同也可忽略不计，使用一个即可

1、原生的使用XMLHttpRequest对象获取的异步 操作

//发送同步请求
        //1.创建ajax引擎对象----所有操作都是由ajax引擎完成
        var xmlHttp = new XMLHttpRequest();
        //2.为引擎对象绑定监听事件
        xmlHttp.onreadystatechange = function() {
            //当状态变化时处理的事情
            if (xmlHttp.readyState == 4 &amp;&amp; xmlHttp.status == 200) {
                //5.接收响应信息
                var data = xmlHttp.responseText;
                //alert(data);
                document.getElementById("span2").innerHTML=data;
            }
        }
        //3.绑定服务器地址
        //第一个参数：请求方式GET/POST
        //第二个参数：后台服务器地址
        //第三个参数：是否是异步 true--异步   false--同步
        xmlHttp.open("GET", "http://localhost:8099/ajax_demo/user"
            false);
        //4.发送请求
        xmlHttp.send();

        // 在JS原生Ajax中，也可以指定 如果是post提交
        // 在发送请求之前设置一个头
        // xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//xmlHttp.send(data);

2、看原生 ajax在实例中用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生ajax（通过XMLHttpRequest对象）登录</title>

    <!--
    使用原生ajax异步传输数据
    -->
</head>
<body>
<div id="loginFrom" style="margin: 20% 30%">
    <input type="text" name="username" placeholder="用户名" class="params"><br>
    <input type="text" name="password" placeholder="密码" class="params"><br>
    <input type="submit" value="get登录" onclick="loginGet()">
    <input type="submit" value="post登录" onclick="loginPost()">

    <div class="result" width="10px" height="10px"></div>
</div>

<script>

    function loginGet() {

        let username = document.getElementsByName("username")[0].value;
        let password = document.getElementsByName("password")[0].value;

        //1.创建ajax引擎对象
        let xmlHttpRequest = new XMLHttpRequest();

        console.log("-------get====" + "username=" + username + ",password=" + password)
        //3.绑定服务器地址
        //第一个参数：请求方式GET/POST
        //第二个参数：后台服务器地址
        //第三个参数：是否是异步 true--异步   false--同步

        xmlHttpRequest.open("GET", "http://localhost:8099/ajax_axios_demo/user?username=" + username + "&amp;password=" + password, true);
        xmlHttpRequest.send();

        //2.为引擎对象绑定监听事件
        xmlHttpRequest.onreadystatechange = function () {
            //当状态变化时处理
            if (xmlHttpRequest.status == 200 &amp;&amp; xmlHttpRequest.readyState == 4) {
                //接收响应数据
                let data = xmlHttpRequest.responseText;
                console.log("-----" + data);
            } else {
                console.log("error!")
            }
        }
    }

    function loginPost() {

        let username = document.getElementsByName("username")[0].value;
        let password = document.getElementsByName("password")[0].value;

        //1.创建ajax引擎对象
        let xmlHttpRequest = new XMLHttpRequest();

        console.log("-------post====" + "username=" + username + ",password=" + password)

        //3.绑定服务器地址
        //第一个参数：请求方式GET/POST
        //第二个参数：后台服务器地址
        //第三个参数：是否是异步 true--异步   false--同步
        xmlHttpRequest.open("POST", "http://localhost:8099/ajax_axios_demo/user", true);
        xmlHttpRequest.setRequestHeader("Content-type", "application/json;charset=utf-8");
        //4.发送请求
        xmlHttpRequest.send("{'username':'" + username + "','password':'" + password+"'}");

        // 在JS原生Ajax中，也可以指定 如果是post提交
        // 在发送请求之前设置一个头
        //2.为引擎对象绑定监听事件
        xmlHttpRequest.onreadystatechange = function () {
            //当状态变化时处理
            if (xmlHttpRequest.status == 200 && xmlHttpRequest.readyState == 4) {
                //接收响应数据
                let data = xmlHttpRequest.responseText;
                console.log("-----" + data);
            } else {
                console.log("error!")
            }
        }
    }

    function login() {

        let username = document.getElementsByName("username")[0].value;
        let password = document.getElementsByName("password")[0].value;
        //1.创建ajax引擎对象
        let xmlHttpRequest = new XMLHttpRequest();
        //2.为引擎对象绑定监听事件
        xmlHttpRequest.onreadystatechange = function () {
            //当状态变化时处理
            if (xmlHttpRequest.status == 200 && xmlHttpRequest.readyState == 4) {
                //接收响应数据
                let data = xmlHttpRequest.responseText;
                console.log("-----" + data);
            } else {
                console.log("error!")
            }
        }

        console.log("-------====" + "username=" + username + ",password=" + password)
        xmlHttpRequest.open("GET", "http://localhost:8099/ajax_axios_demo/user?username=" + username + "&password=" + password, true);
        xmlHttpRequest.send();

        //3.绑定服务器地址
        //第一个参数：请求方式GET/POST
        //第二个参数：后台服务器地址
        //第三个参数：是否是异步 true--异步   false--同步
        // xmlHttpRequest.open("POST", "http://localhost:8099/ajax_axios_demo/user?username=admin&password=123456", true);
        // xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        //4.发送请求
        // xmlHttpRequest.send();

        // 在JS原生Ajax中，也可以指定 如果是post提交
        // 在发送请求之前设置一个头
    }
</script>

</body>
</html>

三、AJAX

1、先导入jQuery.js

由官网https://jquery.com/download/可知
首先需要导入

<script src="https://unpkg.com/axios/dist/jQuery.min.js"></script>

2、看jQuery封装的ajax在实例中用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于jQuery的ajax登录</title>
    <!--
        使用jQuery.js封装的ajax
        -->
</head>
<body>
<div id="loginFrom" style="margin: 20% 30%">
    <input type="text" name="username" placeholder="用户名" class="params"><br>
    <input type="text" name="password" placeholder="密码" class="params"><br>
    <input type="submit" value="get登录" onclick="loginGet()">
    <input type="submit" value="post登录" onclick="loginPost()">

    <div class="result" width="10px" height="10px"></div>

    <script src="static/jquery-3.6.0.min.js"></script>

    <script>

        function loginGet() {
            let username = document.getElementsByName("username")[0].value;
            let password = document.getElementsByName("password")[0].value;
            console.log("-------get--------")
            $.ajax({
                method: 'GET',
                // url:'http://localhost:8099/ajax_demo/user?username='+username+'&password='+password,
                url: 'http://localhost:8099/ajax_demo/user',
                data: {
                    username: username,
                    password: password
                }
            }).then(response => {
                console.log(response.data)
            }).catch(error => {
                console.log(error.data);
            });

        };

        function loginPost() {

            let username = document.getElementsByName("username")[0].value;
            let password = document.getElementsByName("password")[0].value;
            console.log("-------post--------");
            $.ajax({
                method: 'POST',
                url: 'http://localhost:8099/ajax_demo/user',
                data: {
                    username: username,
                    password: password
                }
            }).then(response => {
                console.log(response.data);
            }).catch(error => {
                console.log(error.data);
            });
        }

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

四、Axios

1、先导入axios.js

由官网可知
首先需要导入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


//由于发送的是json字符串，get携带数据使用常规方法接受可以，但post不携带数据，故需用键值对接收

2、看axios在实例中用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于axios登录</title>

    <!--
        使用axios发送异步请求
        -->

</head>
<body>
<div id="loginFrom" style="margin: 20% 30%">
    <input type="text" name="username" placeholder="用户名" class="params"><br>
    <input type="text" name="password" placeholder="密码" class="params"><br>
    <input type="submit" value="get登录" onclick="loginGet()">
    <input type="submit" value="post登录" onclick="loginPost()">

    <div class="result" width="10px" height="10px"></div>
</div>


<script src="static/axios.js"></script>

<script>

    function loginGet() {
        let username = document.getElementsByName("username")[0].value;
        let password = document.getElementsByName("password")[0].value;
        console.log("-------get--------")
        axios.get('http://localhost:8099/ajax_axios_demo/user',
            {
                params: {
                    username: username,
                    password: password
                },
            }).then(response => {
            console.log(response.data)
        }).catch(error => {
            console.log(error.data);
        });
    }

    function loginPost() {

        let username = document.getElementsByName("username")[0].value;
        let password = document.getElementsByName("password")[0].value;
        console.log("-------post--------");
        axios({
            method: 'post',
            // url:'/user',
            url: 'http://localhost:8099/ajax_axios_demo/user',
            data: {
                username: username,
                password: password
            }
        }).then(response => {
            console.log(response.data);
        }).catch(error => {
            console.log(error.data);
        });
    }

</script>

</body>
</html>

3、基于Vue的axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>基于Vue的axios登录</title>
    <!--
        基于Vue的axios异步请求
        -->
        <script src="static/vue-2.6.14.js"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->


</head>
<body>
<div id="app">
    <div id="loginFrom" style="margin: 20% 30%">
        <input v type="text" placeholder="用户名" v-model="username"><br>
        <input type="text" placeholder="密码" v-model="password"><br>
        <input type="submit" value="get登录" @click="loginGet">
        <input type="submit" value="post登录" @click="loginPost">

    </div>
</div>

<script src="static/axios.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            username: '',
            password: ''
        },
        methods: {
            loginGet() {
                console.log("-------get--------")
                axios.get('http://localhost:8099/ajax_axios_demo/user',
                    {
                        params: {
                            username: this.username,
                            password: this.password
                        },
                    }).then(response => {
                    console.log(response.data)
                }).catch(error => {
                    console.log(error.data);
                });
            },
            loginPost() {
                console.log("-------post--------");
                axios({
                    method: 'post',
                    url: 'http://localhost:8099/ajax_axios_demo/user',
                    data: {
                        username: this.username,
                        password: this.password
                    }
                }).then(response => {
                    console.log(response.data);
                }).catch(error => {
                    console.log(error.data);
                });
            }
        }
    });

</script>
</body>
</html>

原代码在gitee上https://gitee.com/xiaohe2323/ajax_axios_demo.git

原文地址:https://blog.csdn.net/hsp262323/art icle/details/124280529

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_41456.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

文章 目录

AJAX 与Ax ios

一、案例 准备

1、首先数据库必不可少

2、实体类紧跟其后

3、然后 就是 数据库 访问层

4、直接 servlet类

5、过滤器

5、注意一点

二、原生的ajax 请求

1、原生的使用XMLHttpRequest对象获取的异步 操作

2、看原生 ajax在实例中用法

三、AJAX

1、先导入jQuery.js

2、看jQuery封装的ajax在实例中用法

四、Axios

1、先导入axios.js

2、看axios在实例中用法

3、基于Vue的axios

发表回复取消回复

AJAX 与Axios

一、案例准备

1、首先数据库必不可少

2、实体类紧跟其后

3、然后就是数据库访问层

4、直接servlet类

5、过滤器

5、注意一点

二、原生的ajax请求

1、原生的使用XMLHttpRequest对象获取的异步操作

2、看原生ajax在实例中用法

三、AJAX

1、先导入jQuery.js

2、看jQuery封装的ajax在实例中用法

四、Axios

1、先导入axios.js

2、看axios在实例中用法

3、基于Vue的axios

相关文章

发表回复 取消回复

AJAX 与Ax ios

4、直接 servlet类

二、原生的ajax 请求

2、看原生 ajax在实例中用法

发表回复取消回复