JSON + AJAX + ThreadLocal + 文件上传下载

JSON数据交换

规则

JSON对象和字符串转换

  <script type="text/javascript">
    var jsonPerson = {
      "name": "jack",
      "age": 20
    }
    console.log(jsonPerson);
    var strPerson = JSON.stringify(jsonPerson);//对jsonPerson没有影响
    console.log(strPerson);

    //格式必须满足JSON格式
    var strDog = "{\"name\":\"John\",\"age\":30}";
    var jsonDog = JSON.parse(strDog);
    console.log(jsonDog)
  </script>

 注意与细节

在定义JSON对象时,key可以不加引号,在浏览器查看的时候都会加上双引号,所以可以直接相互转换 

在java中使用

 应用场景

json字符串与javabean转换

public class JavaJson {
    public static void main(String[] args) {
        Gson gson = new Gson();
        Book book = new Book(100, "学java");
        //javabean->json字符串
        String strBook = gson.toJson(book);
        System.out.println(strBook);
        //json字符串->javabean
        //strBook就是json字符串,Book.class底层是反射
        Book book1 = gson.fromJson(strBook, Book.class);
        System.out.println(book1);
    }
}

json字符串与list对象转换

public class JavaJson {
    public static void main(String[] args) {
        Gson gson = new Gson();
        ArrayList<Book> list = new ArrayList<>();
        list.add(new Book(100, "学java1"));
        list.add(new Book(200, "学java2"));
        //javabean->json字符串
        String strBookList = gson.toJson(list);
        System.out.println(strBookList);
        //json字符串->集合,需要gson提供的一个类:TypeToken
        //返回类型的完整路径,然后进行底层反射
        //TypeToken<List<Book>>()会调用无参构造器(protected不同包不能使用)
        //加了{}就是匿名内部类,是Type的子类,执行子类的无参构造器时,默认super,不受protected限制
        Type type = new TypeToken<List<Book>>() {}.getType();
        List<Book> bookList = gson.fromJson(strBookList, type);
        System.out.println(bookList);
    }
}

json字符串与map对象转换

public class JavaJson {
    public static void main(String[] args) {
        Gson gson = new Gson();
        Map<String,Book> map = new HashMap<>();
        map.put("k1",new Book(100, "学java1"));
        map.put("k2",new Book(200, "学java2"));
        //javabean->json字符串
        String strBookList = gson.toJson(map);
        System.out.println(strBookList);
        
        //json字符串->集合,需要gson提供的一个类:TypeToken
        Map<String,Book> bookMap = gson.fromJson(strBookList, new TypeToken<Map<String,Book>>(){}.getType());
        System.out.println(bookMap);
    }
}

AJAX异步请求

 传统web数据通信方式

 AJAX数据通信方式

可以进行局部刷新 

应用

验证用户名是否存在

public class CheckUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("u");
        System.out.println(username);
        response.setContentType("text/html;charset=utf-8");
        
        if("king".equals(username)) {
            User king = new User(100, "king", "666", "king@sohu.com");
            String strKing = new Gson().toJson(king);
            response.getWriter().write(strKing);
        } else {
            response.getWriter().write("");
        }
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script>
        window.onload = function () {
            var checkButton = document.getElementById("checkButton");
            checkButton.onclick = function () {
                var xhr = new XMLHttpRequest();
                var uname = document.getElementById("uname").value;
                xhr.open("GET","/ajax/check?u=" + uname, true);
                //在send函数调用前,给XMLHttpRequest绑定一个事件,当数据变化,会触发该事件
                xhr.onreadystatechange = function () {
                    // console.log(xhr);
                    if(xhr.readyState == 4 && xhr.status == 200) {
                        document.getElementById("div1").innerText = xhr.responseText;
                        var responseText = xhr.responseText;
                        if(responseText != "") {
                            document.getElementById("myres").value = "用户名不可用";
                        } else {
                            document.getElementById("myres").value = "用户名可用";
                        }
                    }
                }
                xhr.send();
            }

        }
    </script>
</head>
<body>
<h1>用户注册~</h1>
<form action="/ajax/check" method="POST">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="checkButton" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的json数据</h1>
<div id="div1"></div>
</body>
</html>

JQuery操作AJAX

$.ajax方法

$.get请求和$.post请求 

 $.getJSON

 应用

public class CheckUserServlet extends HttpServlet {
    private UserService userService = new UserService();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //取决于JQuery中data定义的名字
        String username = request.getParameter("username");
        System.out.println(username);
        response.setContentType("text/json;charset=utf-8");
        if("king".equals(username)) {
            User user = new User(100, "king", "abc", "king@sohu.com");
            response.getWriter().write(new Gson().toJson(user));
        } else {
            User user = new User(1, "", "", "");
            response.getWriter().write(new Gson().toJson(user));
        }
    }
}

3种情况 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script src="script/jquery-3.7.1.js"></script>
    <script>
        $(function () {
            $("#checkButton").click(function () {
                    $.ajax({
                        url: "/ajax/check",
                        type: "POST",
                        data: {
                            username: $("#uname").val(),
                            //传日期,为了浏览器缓存,浏览器一直变化,会发送POST请求
                            date: new Date()
                        },
                        error: function () {//失败后的回调函数
                            console.log("失败")
                        },
                        success: function (data, status, xhr) {
                            console.log(data);
                            console.log(status);
                            console.log(xhr);
                            $("#div1").html(JSON.stringify(data));
                            if("" == data.username) {
                                $("#myres").val("该用户名可用");
                            } else {
                                $("#myres").val("该用户名不可用");
                            }
                        },
                        dataType: "json"
                    })
                
                
                //讲解.get()使用,必须按顺序url,data,success回调函数,返回的数据格式
                $.get(
                    "/ajax/check",
                    {
                        username: $("#uname").val(),
                        date: new Date()
                    },
                    function (data, status, xhr) {
                        //可以根据状态码处理失败的情况
                        console.log(data);
                        console.log(status);
                        console.log(xhr);
                        $("#div1").html(JSON.stringify(data));
                        if ("" == data.username) {
                            $("#myres").val("该用户名可用");
                        } else {
                            $("#myres").val("该用户名不可用");
                        }
                    },
                    "json"
                )
                
                
                //如果通过jquery发出的ajax请求是get,并且返回的数据格式是json,可以直接使用getJson()函数
                $.getJSON(
                    "/ajax/check",
                    {
                        username: $("#uname").val(),
                        date: new Date()
                    },
                    function (data, status, xhr) {
                        //可以根据状态码处理失败的情况
                        console.log(data);
                        console.log(status);
                        console.log(xhr);
                        $("#div1").html(JSON.stringify(data));
                        if ("" == data.username) {
                            $("#myres").val("该用户名可用");
                        } else {
                            $("#myres").val("该用户名不可用");
                        }
                    }
                )
            })
        })
    </script>
</head>
<body>
<h1>用户注册~</h1>
<form action="/ajax/check" method="POST">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="checkButton" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的json数据</h1>
<div id="div1"></div>
</body>
</html>

ThreadLocal线程数据共享和安全

 set分析 

 

演示:在一个线程中,共享数据(线程安全)

public class T1 {

    //创建ThreadLocal对象
    public static ThreadLocal<Object> threadLocal1 = new ThreadLocal<>();
    public static ThreadLocal<Object> threadLocal2 = new ThreadLocal<>();

    public static class Task implements Runnable {
        @Override
        public void run() {
            Dog dog = new Dog();
            Pig pig = new Pig();
            /*
            public void set(T value) {
                1、获取当前线程,关联到当前线程
                Thread t = Thread.currentThread();
                2、通过线程对象,获取ThreadLocalMap
                   是ThreadLocal的静态内部类
                ThreadLocalMap map = getMap(t);
                3、如果map不为空,就将数据(Dog...)放入map
                   key:threadLocal,value:存放的数据
                   一个threadLocal只能关联一个数据,set会替换掉
                4、如果map为null,就创建一个和当前关联的ThreadLocal,并且将该数据放入
                if (map != null) {
                    map.set(this, value);
                } else {
                    createMap(t, value);
                }
            }
            * */
            threadLocal1.set(dog);
//            threadLocal1.set(pig);替换
            threadLocal2.set(pig);//跟threadLocal2关联,并且都被当前Thread管理
            System.out.println("在run方法中的线程= " + Thread.currentThread().getName());
            System.out.println("在run方法中的dog= " + dog);
            new T1service().update();
        }
    }

    public static void main(String[] args) {
        new Thread(new Task()).start();
    }
}
public class T1service {
    public void update() {
        /*
        public T get() {
            1、先得到当前的线程对象
            Thread t = Thread.currentThread();
            2、获取到对应的ThreadLocalMap
            ThreadLocalMap map = getMap(t);
            if (map != null) {
            3、如果map不为空,根据当前的ThreadLocal对象,得到对应的Entry
                ThreadLocalMap.Entry e = map.getEntry(this);
                if (e != null) {
                4、如果Entry不为空,返回当前ThreadLocal关联的数据value
                    @SuppressWarnings("unchecked")
                    T result = (T)e.value;
                    return result;
                }
            }
            return setInitialValue();
        }
        * */
        Object o = T1.threadLocal1.get();
        String name = Thread.currentThread().getName();
        System.out.println("在T1service的update()线程是= " + name);
        System.out.println("在T1service的dog是= " + o);
        new T2DAO().update();
    }
}
public class T2DAO {
    public void update() {
        Object o = T1.threadLocal1.get();
        String name = Thread.currentThread().getName();
        System.out.println("在T2DAO的update()线程是= " + name);
        System.out.println("在T2DAO的dog是= " + o);
    }
}

web文件

 上传

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 指定了base标签 -->
    <base href="<%=request.getContextPath()+"/"%>>">
    <style type="text/css">
        input[type="submit"] {
            outline: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #31B0D5;
            border: none;
            width: 70px;
            height: 35px;
            font-size: 20px;
        }

        img {
            border-radius: 50%;
        }

        form {
            position: relative;
            width: 200px;
            height: 200px;
        }

        input[type="file"] {
            position: absolute;
            left: 0;
            top: 0;
            height: 200px;
            opacity: 0;
            cursor: pointer;
        }
    </style>

    <script type="text/javascript">
        function prev(event) {
            //获取展示图片的区域
            var img = document.getElementById("prevView");
            //获取文件对象
            var file = event.files[0];
            //获取文件阅读器: Js的一个类,直接使用即可
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                //给img的src设置图片url
                img.setAttribute("src", this.result);
            }
        }
    </script>

</head>
<body>
<!-- 表单的enctype属性要设置为multipart/form-data
    enctype="multipart/form-data" 表示提交的数据是多个部分构造,有文件和文本
 -->

<form action="fileUploadServlet" method="post" enctype="multipart/form-data">
    家居图: <img src="2.jpg" alt="" width="200" height="200" id="prevView">
<%--    小伙伴愿意完成自己测试--%>
    <input type="file" name="pic" id="" value="" onchange="prev(this)"/>

    家居名: <input type="text" name="name"><br/>

    <input type="submit" value="上传"/>
</form>
</body>
</html>
public class WebUtils {

    public static String getYearMonthDay() {
        //如何得到当前的日期-> java基础 日期 三代类
        LocalDateTime ldt = LocalDateTime.now();
        int year = ldt.getYear();
        int monthValue = ldt.getMonthValue();
        int dayOfMonth = ldt.getDayOfMonth();
        String yearMonthDay = year + "/" + monthValue + "/" + dayOfMonth + "/";
        return yearMonthDay;
    }
}
public class FileUploadServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 判断是不是文件表单(enctype="multipart/form-data")
        if (ServletFileUpload.isMultipartContent(request)) {
            //2. 创建 DiskFileItemFactory 对象, 用于构建一个解析上传数据的工具对象
            DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();
            //3. 创建一个解析上传数据的工具对象
            /**
             *     表单提交的数据就是 input 元素
             *     <input type="file" name="pic" id="" value="2xxx.jpg" onchange="prev(this)"/>
             *     家居名: <input type="text" name="name"><br/>
             *     <input type="submit" value="上传"/>
             */
            ServletFileUpload servletFileUpload =
                    new ServletFileUpload(diskFileItemFactory);
            //解决接收到文件名是中文乱码问题
            servletFileUpload.setHeaderEncoding("utf-8");

            //4. 关键的地方, servletFileUpload 对象可以把表单提交的数据text / 文件
            //   将其封装到 FileItem 文件项中
            //   老师的编程心得体会: 如果我们不知道一个对象是什么结构[1.输出 2.debug 3. 底层自动看到]
            try {
                List<FileItem> list = servletFileUpload.parseRequest(request);
                /*
                list==>

                [name=3.jpg, StoreLocation=D:\hspedu_javaweb\apache-tomcat-8.0.50-windows-x64\apache-tomcat-8.0.50\temp\xupload__7e34374f_17fce4168b1__7f4b_00000000.tmp, size=106398bytes, isFormField=false, FieldName=pic,
                name=null, StoreLocation=D:\hspedu_javaweb\apache-tomcat-8.0.50-windows-x64\apache-tomcat-8.0.50\temp\xupload__7e34374f_17fce4168b1__7f4b_00000001.tmp, size=6bytes, isFormField=true, FieldName=name]

                 */
                //System.out.println("list==>" + list);
                for (FileItem fileItem : list) {
                    //System.out.println("fileItem=" + fileItem);
                    //判断是不是一个文件=> 你是OOP程序员
                    if (fileItem.isFormField()) {//如果是true就是文本 input text
                        String name = fileItem.getString("utf-8");
                        System.out.println("家具名=" + name);
                    } else {//是一个文件

                        //用一个方法
                        //获取上传的文件的名字
                        String name = fileItem.getName();
                        System.out.println("上传的文件名=" + name);

                        //把这个上传到 服务器的 temp下的文件保存到你指定的目录
                        //1.指定一个目录 , 就是我们网站工作目录下
                        String filePath = "/upload/";
                        //2. 获取到完整目录 [io/servlet基础]
                        //  这个目录是和你的web项目运行环境绑定的. 是动态.
                        //fileRealPath=D:\hspedu_javaweb\fileupdown\out\artifacts\fileupdown_war_exploded\xupload\
                        String fileRealPath =
                                request.getServletContext().getRealPath(filePath);
                        System.out.println("fileRealPath=" + fileRealPath);

                        //3. 创建这个上传的目录=> 创建目录?=> Java基础
                        //   老师思路; 我们也一个工具类,可以返回 /2024/11/11 字符串
                        File fileRealPathDirectory = new File(fileRealPath + WebUtils.getYearMonthDay());
                        if (!fileRealPathDirectory.exists()) {//不存在,就创建
                            fileRealPathDirectory.mkdirs();//创建
                        }

                        //4. 将文件拷贝到fileRealPathDirectory目录
                        //   构建一个上传文件的完整路径 :目录+文件名
                        //   对上传的文件名进行处理, 前面增加一个前缀,保证是唯一即可, 不错
                        name = UUID.randomUUID().toString() + "_" +System.currentTimeMillis() + "_" + name;
                        String fileFullPath = fileRealPathDirectory + "/" +name;
                        fileItem.write(new File(fileFullPath));

                        //5. 提示信息
                        response.setContentType("text/html;charset=utf-8");
                        response.getWriter().write("上传成功~");


                    }
                }

            } catch (Exception e) {
                e.printStackTrace();
            }
        } else {
            System.out.println("不是文件表单...");
        }
    }

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

下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件下载</title>
    <base href="<%=request.getContextPath()+"/"%>>">
</head>
<body>
<h1>文件下载</h1>
<a href="fileDownLoadServlet?name=1.jpg">点击下载小狗图片</a><br/><br/>
<a href="fileDownLoadServlet?name=韩顺平零基础Java笔记.pdf">点击下载 韩顺平零基础Java笔记.pdf</a><br/><br/>
<a href="fileDownLoadServlet?name=高山流水.mp3">点击下载 高山流水.mp3</a><br/><br/>
</body>
</html>
public class FileDownloadServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("FileDownloadServlet 被调用...");
        //1. 先准备要下载的文件[假定这些文件是公共的资源]
        //   重要: 保证当我们的tomcat启动后,在工作目录out下有download文件夹, 并且有可供下载的文件!!
        //   老师再次说明,如果你没有看到你创建的download在工作目录out下 rebuild project -> restart, 就OK

        //2. 获取到要下载的文件的名字
        request.setCharacterEncoding("utf-8");
        String downLoadFileName = request.getParameter("name");
        //System.out.println("downLoadFileName= " + downLoadFileName);

        //3. 给http响应,设置响应头 Content-Type , 就是文件的MIME
        //   通过servletContext 来获取
        ServletContext servletContext = request.getServletContext();
        String downLoadPath = "/download/"; //下载目录从 web工程根目录计算 /download/1.jpg
        String downLoadFileFullPath = downLoadPath + downLoadFileName;
        String mimeType = servletContext.getMimeType(downLoadFileFullPath);
        System.out.println("mimeType= " + mimeType);
        response.setContentType(mimeType);

        //4. 给http响应,设置响应头 Content-Disposition
        //   这里考虑的细节比较多,比如不同的浏览器写法不一样,考虑编码
        //   ff 是 文件名中文需要 base64, 而 ie/chrome 是 URL编码
        //   这里我们不需要同学们记住,只需知道原理
        //   老韩解读
        //(1)如果是Firefox 则中文编码需要 base64
        //(2)Content-Disposition 是指定下载的数据的展示形式 , 如果attachment 则使用文件下载方式
        //(3)如果是其他(主流ie/chrome) 中文编码使用URL编码
        if (request.getHeader("User-Agent").contains("Firefox")) {
            // 火狐 Base64编码
            response.setHeader("Content-Disposition", "attachment; filename==?UTF-8?B?" +
                    new BASE64Encoder().encode(downLoadFileName.getBytes("UTF-8")) + "?=");
        } else {
            // 其他(主流ie/chrome)使用URL编码操作
            response.setHeader("Content-Disposition", "attachment; filename=" +
                    URLEncoder.encode(downLoadFileName, "UTF-8"));
        }

        //5. 读取下载的文件数据,返回给客户端/浏览器
        //(1) 创建一个和要下载的文件,关联的输入流
        InputStream resourceAsStream =
                servletContext.getResourceAsStream(downLoadFileFullPath);
        //(2) 得到返回数据的输出流 [因为返回文件大多数是二进制(字节), IO java基础]
        ServletOutputStream outputStream = response.getOutputStream();

        //(3) 使用工具类,将输入流关联的文件,对拷到输出流,并返回给客户端/浏览器
        IOUtils.copy(resourceAsStream, outputStream);

    }

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

  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值