13_JavaWeb——AJAX

最新推荐文章于 2024-04-23 00:29:43 发布

子平Zziping

最新推荐文章于 2024-04-23 00:29:43 发布

阅读量1.1k

点赞数

分类专栏： Java Web学习笔记文章标签： ajax javascript maven json intellij-idea

本文链接：https://blog.csdn.net/qq_45926462/article/details/124544000

版权

Java Web学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

AJAX简介

概念：Asynchronous JavaScript And XML：异步的JavaScripe和XML
作用：
与服务器进行数据交换：通过AHAX可以给服务器发送请求，并获取服务器响应数据
使用AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验等。
同步：客户端请求服务器端后需等待服务器处理后才可继续操作
异步：客户端请求服务器端后无需等待服务器处理而可以继续执行操作

AJAX快速入门

编写AjaxServlet，并使用response输出字符串

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1. 响应数据
        resp.getWriter().write("hello ajax");
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

创建XMLHttpRequest对象：用于和服务器交换数据
向服务器发送请求
获取服务器响应数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1. 创建核心对象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2. 发送请求
      /*
          open(nethod, url, async);
              method：请求的类型：GET 还是 POST
              url：服务器（文件）位置
              async：true（异步）或 false（同步）
      */
    xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet", true);
    xhttp.send();
    //3. 获取响应
      /*
          readyState:
              0: 请求未初始化
              1: 服务器连接已建立
              2: 请求已接收
              3: 正在处理请求
              4: 请求已完成且响应已就绪
          status:
              200 : OK
      */
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert(this.responseText);
        }
    };
</script>
</body>
</html>

案例

使用AJAX验证用户名是否存在

需求：在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否在数据库已存在

register.html		SelectUserServlet
1. 给用户输入框绑定光标失去焦点事件 2. 发送Ajax请求，携带username参数 3. 处理响应	请求 ------> <------ 响应	1. 接收用户名 2. 调用service查询User 3. 返回标记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
</head>
<body>
<div class="form_div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span><a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="/Demo1/registerServlet" method="post">
        <table>
            <tr>
                <td>用户名：</td>
                <td class="inputs">
                    <input type="text" name="username" id="username" placeholder="请输入用户名">
                    <br>
                    <span id="username_err" class="err_msg">用户名已存在</span>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" name="password" id="password" placeholder="请输入密码">
                    <br>
                    <span id="password_err" class="err_msg"></span>
                </td>
            </tr>
        </table>
        <div class="buttons">
            <input type="submit" value="注册" id="reg-btn">
        </div>
        <br class="clear">
    </form>
</div>
<script>
    //1. 给用户名输入框绑定失去焦点事件
    document.getElementById("username").onblur = function (){
        //2. 发送ajax请求
        //获取用户名的值
        var username = this.value;
        //2.1. 创建核心对象
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.2. 发送请求
        xhttp.open("GET", "http://localhost:8080/Demo5/selectUserServlet?username="+username);
        xhttp.send();
        //2.3. 获取响应
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                //alert(this.responseText);
                //判断
                if(this.responseText == "true"){
                    //用户名已存在，提示错误信息
                    document.getElementById("username_err").style.display = '';
                }else{
                    //用户名可用，提示正确信息
                    document.getElementById("username_err").style.display = 'none';
                }
            }
        };
    }
</script>
</body>
</html>

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1. 接收用户名
        String username = req.getParameter("username");
        //2. 调用service方法，查询用户信息(模拟)
        boolean flag = false;
        //3. 响应标记
        resp.getWriter().write(flag ? "true" : "false");
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

Axios异步框架

Axios对原生的AJAX进行封装，简化书写
官网：https://www.axios-http.cn/

Axios快速入门

1. 引入axios的js文件
2. 使用axios发送请求，并获取响应结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="js/axios.js"></script>
<script>
    //1. get请求
    /*axios({
        method: "get",
        url: "http://localhost:8080/ajax-demo/axiosServlet?name=zhangsan"
    }).then(function (response) {
        alert(response.data);
    })*/
    //2. post请求
    axios({
        method: "post",
        url: "http://localhost:8080/ajax-demo/axiosServlet",
        data: "name=lisi"
    }).then(function (response) {
        alert(response.data);
    })
</script>
</body>
</html>

Axios请求方式别名

<script>
    //1. get请求
    /*axios.get("http://localhost:8080/ajax-demo/axiosServlet?name=zhangsan")
        .then(function (response) {
            alert(response.data);
    });*/
    //2. post请求
    axios.post("http://localhost:8080/ajax-demo/axiosServlet", "name=lisi")
        .then(function (response) {
            alert(response.data);
    });
</script>

JSON

概念：JavaScript Object Notation。JavaScript对象表示法
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

JSON基础语法

定义：
var 变量名 = {
  "key1":value1,
  "key2":value2,
  ...
}
vlaue的数据类型有：
数字（整数或浮点数）
字符串（在""中）
逻辑值（true或者false）
数组（在[]中）
对象（在{}中）
null
获取数据：
    变量名.key

JSON数据和Java对象转换

请求数据：JSON字符串转化为Java对象
响应数据：Java对象转化为JSON字符串

fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换

使用：

导入坐标

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

Java对象转JSON字符串

JSON字符串转Java对象

public class FastjsonDemo {
    public static void main(String[] args) {
        //1. Java对象转JSON字符串
        User user = new User();
        user.setId(1);
        user.setUsername("张三");
        user.setPassword("123456");
        String s = JSON.toJSONString(user);
        System.out.println(s);
        //2. JSON字符串转Java对象
        User user1 = JSON.parseObject(s, User.class);
        System.out.println(user1);
    }
}

案例

需求：使用Axios+JSON完成品牌列表数据查询和添加

此处有问题尚未解决

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
    private BrandService brandService = new BrandService();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1. 接收数据   req.getParameter无法接收json数据
        BufferedReader reader = req.getReader();
        StringBuilder sb = new StringBuilder();
        String line = null;
        while ((line = reader.readLine()) != null) {
            sb.append(line);
        }
        String jsonStr = sb.toString();
        //2. 转换数据
        Brand brand = null;
        try {
            brand = JSON.parseObject(jsonStr, Brand.class);
        } catch (JSONException e) {
            e.printStackTrace();
        }
        //3. 业务处理
        brandService.add(brand);
        //4. 响应数据
        resp.getWriter().write("success");
        /*//获取请求体数据
        BufferedReader br = req.getReader();
        String params = br.readLine();
        System.out.println(params);
        //将json字符串转为Java对象
        Brand brand = JSON.parseObject(params, Brand.class);
        //2. 调用service方法添加
        brandService.add(brand);
        //3. 响应成功标识
        resp.getWriter().write("success");*/
    }

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

当使用注释中的代码时，添加能够成功，但浏览器报500

案例资源

子平Zziping

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
13_JavaWeb——AJAX

AJAX简介概念：Asynchronous JavaScript And XML：异步的JavaScripe和XML作用：与服务器进行数据交换：通过AHAX可以给服务器发送请求，并获取服务器响应数据使用AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验等。同步：客户端请求服务器端后需等待服务器处理后才可继续操作异步：客户端请求服务器端后无需等待.
复制链接

扫一扫