day22 --> (AJAX、JSON)

标签：name 23 -- gender age JSON json AJAX new

AJAX :

概念：ASynchronous JavaScript And XMl 异步的JavaScript 和 XML

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

AJAX 是一种无需重新加载整个页面的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。传统的网页【不使用Ajax技术】如果需要更新内容，必须加载整个网页页面。

作用：提升用户的体验

2.实现方式【2种】：

1.原生的JS实现方式【较少使用，了解】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    //定义方法
    function fun(){
      //发送异步请求
      //1、创建核心对象
      var xhttp;
      if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
      } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

      //2、建立连接
      /*
        参数：
          1、请求方式：GET、POST
                    get方式：请求参数在URL后边拼接，send方法为空参
                    post方式：请求参数在send方法中定义
          2、请求的URL路径
          3、同步或异步：true（同步），false(异步)
       */
      xhttp.open("GET", "ajaxServlet?username=tom", true);

      //3、发送请求
      xhttp.send();

      //4、接收并处理来自服务器的响应结果
      //获取方式 ：xmlhttp.responseText
      //什么时候获取？当服务器响应成功后在获取
        ///当xhttp对象的就绪状态改变时，触发事件onreadystatechange
        xhttp.onreadystatechange = function() {
            //判断readyState就绪状态是否为4，响应状态码为200
            if (this.readyState == 4 && this.status == 200) {
                //获取服务器的响应结果
                let responseText = xhttp.responseText;
                alert(responseText);
            }
        };
    }
  </script>
</head>
<body>
  <input type="button" value="发送异步请求" onclick="fun();">
<input>
</body>
</html>

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1、获取请求参数
        String username = request.getParameter("username");

        //处理业务逻辑，耗时
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            throw new RuntimeException(e);
        }

        //2、打印username
        System.out.println(username);

        //3、响应
        response.getWriter().write("hello: " + username);

    }

2.JQuery实现方式【重点掌握】

1.$.ajax()

语法：$.ajax({键值对})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script>
    //定义方法
    function fun(){
      //使用$.ajax的方式发送异步请求

      //注意：每个键值对用逗号隔开，最后一个不用逗号
      $.ajax({
        url:"ajaxServlet1", //请求路径
        type:"POST", //请求方式，默认GET
        //data:"username=jack&age=23", //请求参数 <方式一>
        data:{"username":"jack","age":23}, //请求参数<方式二，推荐>
        success:function (data) { //data参数：接收服务器响应的值
          //响应成功后的回调函数
          alert(data);
        },
        error:function () {
          //响应请求出现错误会执行的回调函数
          alert("出错了");
        },
        dataType:"text" //设置接收到的响应数据的格式
      });
    }
  </script>
</head>
<body>
  <input type="button" value="发送异步请求" onclick="fun()">
  <input type="text">
</body>
</html>

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

语法：$.get(url,[data],[callback],[type]) ，红色：必须，绿色：可选

参数：

url : 请求路径

data : 请求参数

callback : 回调函数

type : 响应结果类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script>
    //定义方法
    function fun(){
        $.get("ajaxServlet",{username:"rose"},function (data) {
            alert(data);
        },"text");
    }
  </script>
</head>
<body>
  <input type="button" value="发送异步请求" onclick="fun()">
  <input type="text">
</body>
</html>

3.$.post()

post的实现方式和get方式极其类似，不同之处仅仅是$.get变为$.post

JSON ：

1.概念：JavaScript Object Notation ：JavaScript对象表示法【用JSON表示对象】

Person p = new Person();

p.setName("张三");

p.setAge(23);

p.setGender("男");

----------------------------

var p = {"name":"张三","age":23,"gender":"男"};

json现在多用于存储和交换文本信息的语法

进行数据的传输

json比xml更小、更快，更易解析

2.语法：

1、基本规则

数据名称/值对中：json数据是由键值对构成的

键：用引号【" "、' '】引起来，也可以不使用引号

值的取值类型：

1.数字（整数或者浮点数）

2.字符串（在双引号中）

3.逻辑值（true 或者 false）

4.数组（在方括号中）{"persons":[{ },{ },...]}

5.对象（在花括号中） {"address"{"province":"北京"...}}

数据由逗号分隔：数据：多个键值对用逗号分隔

花括号保存对象：使用 { } 定义 json 格式

方括号保存数据：[ ]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1、定义基本格式
        var person = {"name":"张三",age:23,'gender':true};
        //alert(person);
        //获取name的值
        //var name = person.name;
        var name = person["name"];
        //alert(name);

        //2.1、嵌套格式 : {} --> []
        var persons = {
            "persons":[
                {"name":"张三","age":23,"gender":true},
                {"name":"李四","age":24,"gender":true},
                {"name":"王五","age":25,"gender":false}
                ]};
        //alert(person);
        //获取对象”王五“姓名
        let name1 = persons.persons[2].name;
        //alert(name1);

        //2.2、嵌套格式 ：[] --> {}
        var ps = [
            {"name":"张三","age":23,"gender":true},
            {"name":"李四","age":24,"gender":true},
            {"name":"王五","age":25,"gender":false
        }];
        //alert(ps);
        //获取对象“李四”的值
        alert(ps[1].name);
    </script>
</head>
<body>

</body>
</html>

2、获取数据

1. json对象.键名

2. json对象["键名"]

3.数组对象[索引]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1、定义基本格式
        var person = {"name":"张三",age:23,'gender':true};

        //2.2、嵌套格式 ：[] --> {}
        var ps = [
            {"name":"张三","age":23,"gender":true},
            {"name":"李四","age":24,"gender":true},
            {"name":"王五","age":25,"gender":false
        }];

        //获取person对象中所有的键和值
        //for in 循环
        /*for (var key in person){
            alert(key + ":" + person[key]);
        }*/

        //双层for循环嵌套
        for (let i = 0; i < ps.length; i++) {
            for (let key in ps[i]){
                alert(key + ": " + ps[i][key]);
            }
        }

    </script>
</head>
<body>

</body>
</html>

3、JSON数据和Java对象的相互转换

JSON解析器：

常见的解析器：Jsonlib，Gson，fastjson,jackson【学习】

1.Java对象转为JSON

使用步骤：

1.导入 jackson 相关 jar 包

2.创建Jack核心对象：ObjectMapper

3.调用ObjectMapper的相关方法进行转换

1、转换方法

public class JacksonTest {
    //Java对象转为JSON对象
    @Test
    public void test1() throws Exception {
        //1、创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");

        //2、创建Jackson的核心对象 ObjectMapper
        ObjectMapper mapper = new ObjectMapper();

        //3、转换
        /*
            转换方法：
                writeValue(参数1,obj) :
                    参数1：
                        File : 将obj对象转换为JSON对象，并保存到指定的文件中
                        Writer ：将obj对象转换为JSON对象，并将json数据填充到字符输出流中
                        OutputStream : 将obj对象准换为JSON字符串，并将json数据填充到字节输出流中
                writeValueAsString(obj) : 将对象转为json字符串
         */
        String json = mapper.writeValueAsString(p);
        //System.out.println(json);

        //writeValue,将数据写到d盘homework文件夹下
        //mapper.writeValue(new File("d://homework//a.txt"),p);

        //writeValue,将数据关联到Writer中
        mapper.writeValue(new FileWriter("d://homework//b.txt"),p);
    }
}

2、注解：

1.@JsonIgnore : 排除属性

2.@JsonFormat : 属性值的格式化

    @Test
    public void test2() throws Exception{
        //1、创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");
        p.setBirthday(new Date());

        //2、转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(p);

        System.out.println(json);
    }

3、复杂Java对象转换

1.List ：数组

 @Test
    public void test3() throws Exception{
        //1、创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");
        p.setBirthday(new Date());

        Person p1 = new Person();
        p1.setName("张三");
        p1.setAge(23);
        p1.setGender("男");
        p1.setBirthday(new Date());

        Person p2 = new Person();
        p2.setName("张三");
        p2.setAge(23);
        p2.setGender("男");
        p2.setBirthday(new Date());

        //创建List集合
        List<Person> ps = new ArrayList<>();
        Collections.addAll(ps,p,p1,p2);
        /*
        [{"name":"张三","age":23,"gender":"男","birthday":"2022-12-02"},
         {"name":"张三","age":23,"gender":"男","birthday":"2022-12-02"},
         {"name":"张三","age":23,"gender":"男","birthday":"2022-12-02"}]
         */

        //2、转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(ps);

        System.out.println(json);
    }

2.Map : 对象格式一致

@Test
    public void test4() throws Exception {
        //1、创建map对象
        Map<String,Object> map = new HashMap<String,Object>();
        map.put("name","张三");
        map.put("age",23);
        map.put("gender","男");
        //2、转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(map);
        System.out.println(json);
        /*
            {"gender":"男","name":"张三","age":23}
         */
    }

2.JSON对象转换为Java对象（较少使用）

1.使用步骤：

1.导入 jackson 相关 jar 包

2.创建Jack核心对象：ObjectMapper

3.调用ObjectMapper的相关方法进行转换

//演示：JSON字符串转换为Java对象
    @Test
    public void test5() throws Exception{
        //1、初始化JSON字符串
        String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";

        //2、创建ObjectMapper对象
        ObjectMapper mapper = new ObjectMapper();

        //3、转换为Java对象 【Person】
        Person person = mapper.readValue(json, Person.class);

        System.out.println(person);

    }

案例：

校验用户名是否存在：

1.服务器响应的数据，在客户端使用时，要想当作json数据格式使用

方式一： $.get(type) : 将最后一个参数 type 指定为 "json"

方式二：在服务器端设置 MIME 类型 --> response.setContentType("application/json;charset=utf-8");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<form>
  <input type="text" id="username" placeholder="请输入用户名">
    <span id="s_span"></span><br>
  <input type="password" placeholder="请输入密码"><br>
  <input type="button" value="注册">
</form>
</body>
    <script>
        //用户名文本框失去焦点
        $("#username").blur(function () {
            //1、获取username文本框的内容
            let username = $(this).val();
            //发送ajax异步请求
            //期望服务器响应回的数据格式：{"userExist":true,"msg":此用户名太受欢迎，请更换一个"}
            //                        {"userExist":false,"msg":用户名可用}
            $.get("findUserServlet",{username:username},function (data) {
                //alert(data);
                //判断userExist键的值是否是true
                let span = $("#s_span");
                if (data.userExist){
                    //用户名存在
                    span.css("color","red");
                    span.html(data.msg);
                }else {
                    //用户名不存在
                    span.css("color","green");
                    span.html(data.msg);
                }
            })
        })
    </script>
</html>

@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1、获取用户名
        String username = request.getParameter("username");

        //2、调用service层来判断用户名是否存在

        //期望服务器响应回的数据格式：{"userExist":true,"msg":此用户名太受欢迎，请更换一个"}
        //                        {"userExist":false,"msg":用户名可用}

        //设置响应的数据格式为json
        response.setContentType("application/json;charset=utf-8");
        Map<String,Object> map = new HashMap<>();

        //此处模拟数据库中的名字为 tom
        if ("tom".equals(username)){
            //存在
            map.put("userExist",true);
            map.put("msg","此用户名太受欢迎，请更换一个");
        }else {
            //不存在
            map.put("userExist",false);
            map.put("msg","用户名可用");
        }

        //将map转为json，并且将其写入到页面上【传递给客户端】
        //将map --> json
        ObjectMapper mapper = new ObjectMapper();
        //传递给客户端
        mapper.writeValue(response.getWriter(),map);

    }
}

标签：name,23,--,gender,age,JSON,json,AJAX,new
From： https://www.cnblogs.com/yumengqifei/p/16944115.html

相关文章

赞助商

阅读排行