学习笔记【JavaWeb-第十四节：Ajax&Json】

最新推荐文章于 2022-08-02 17:00:10 发布

十月花

最新推荐文章于 2022-08-02 17:00:10 发布

阅读量192

点赞数

分类专栏： # Java Web 文章标签： java ajax json

本文链接：https://blog.csdn.net/qq_53273362/article/details/112420424

版权

Java Web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Ajax

ASynchronous JavaScript And XML 异步的JavaScript和XML

同步和异步：客户端和服务器端相互通信的基础上

同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。

异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

Ajax可提升用户的体验

实现方式

原生的JS实现方式(了解)

function fun(){
    var xmlhttp;
    if (window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    /*参数：请求方式：GET ，
    请求的URL，
    同步或异步请求，true为异步false为同步*/
    xmlhttp.open("GET","test1.txt",true);

    xmlhttp.send();

    //接受并处理
    xmlhttp.onreadystatechange=function (){
        if (xmlhttp.readyState==4&&xmlhttp.states==200){
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
}

JQuery实现方式
1.$.ajax()

语法：$.ajax(url,[settings])
例子

function fun(){
    $.ajax({
         url:"ajaxServlet",//请求路径
         type:"POST",//请求方式
         // data:"username=jack&age=23",//请求参数
         data:{"username":"jack", "age":23},
         success:function (){
             
         },//响应成功的回调函数
         error:function (){
             
         },//出错的回调函数
         dataType:"text"
     });
}

2.$.get() 发送get请求

语法$.get(url,[data],[callback],[type])
例子：

function fun(){
    $.get("ajaxServlet",{username:"rose"},function (data){
        
    },"text")
}

3.$.post() 发送post请求

语法$.get(url,[data],[callback],[type])
例子：

function fun(){
    $.post("ajaxServlet",{username:"rose"},function (data){
        
    },"text")
}

Json

JavaScript Object Notation JavaScript对象表示法

作用：
现在多用于存储和交换文本的语法
进行数据的传输
JSON比XML更小更快更易解析。

语法：

基本规则

数据在名称/值对中：json数据是由键值对构成的
- 键用引号引起来，也可以不用。
- 取值类型：
  - 数字（整数或浮点型）
  - 字符串（在双引号中）
  - 逻辑值（true/false）
  - 数组（方括号中）
  - 对象（花括号中）
  - null
数据由逗号分隔：多个键值对由逗号隔开
花括号保存对象：使用{}定义json格式
方括号保存数据：[]

获取数据

json对象.键名
json对象["键名"]
数组对象[索引]

Json数据和Java对象的相互转换

JSON解析器：
常见的解析器：Jsonlib,Gson,Fastjson,jackson

JSON转为Java对象

导入jar包
创建Jackson核心对象ObjectMapper
调用ObjectMapper的相关方法进行转换
- readValue(json字符串数据，Class)

Java对象转为JSON

使用步骤：

导入jar包
创建Jackson核心对象ObjectMapper
调用ObjectMapper的相关方法进行转换
- writeValue(参数1，obj)：参数1：
  - File：将obj对象转换为JSON字符串，并保存到指定的文件中
  - Writer：将obj对象转换为JSON字符串，并将json数据填充到字符串输出流中
  - OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
- writeValueAsString(obj)：将对象转换为json字符串
- 注解：
  - @JsonIgnore：排除属性。
  - @JsonFormat：属性值格式化
- 复杂java对象转换
  - List：数组
  - Map：对象格式一致

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>

    <script>
        $(function (){
            $("#username").blur(function (){
               let username=$(this).val();
               $.get("findUserServlet",{username:username},function (data){
                   let span = $("#s_username");
                   if (data.userExsit){
                       span.css("color","red");
                       span.html(data.msg);
                   }else {
                       span.css("color","green");
                       span.html(data.msg);
                   }
               },"json");
            });
        });
        
    </script>
</head>
<body>

    <form action="">
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <span id="s_username"></span><br>
        <input type="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" value="注册">
    </form>
</body>
</html>

@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        String username = request.getParameter("username");

        Map<String,Object> map=new HashMap<>();

        if ("tom".equals(username)){
            map.put("userExsit",true);
            map.put("msg","此用户名已存在！");
        }else {
            map.put("userExsit",false);
            map.put("msg","此用户名可用！");
        }

        ObjectMapper mapper=new ObjectMapper();
        mapper.writeValue(response.getWriter(),map);

    }

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