22 AJAX JSON

目录

Ajax

概念

发送异步请求是不会刷新整个页面的

实现方式

原生js实现

jq实现

JSON

概念

获取数据

json对象与java对象相互转换

java对象 ---> json字符串

json字符串 ---> java对象

案例  实时监测用户名是否合法

---

1. Ajax

   1. 概念

      1. 异步的JavaScript和xml
      2. 无需重新加载整个页面的情况下,可以部分更新网页

   2. 发送异步请求是不会刷新整个页面的

   3. 实现方式

      1. 原生js实现

         1. 不推荐
         2. 步骤
            1. 创建核心对象
            2. 建立连接
            3. 发送请求
            4. 接收并处理服务器的响应结果

      2. jq实现

         1. $.ajax()
            1. 通用方式, 但是有点麻烦
            2. 参数中使用大括号来传递键值对
               1. data : {"name":"lq" , "password":"123456"}
               2. success : function (data) { ... }
                  1. 参数data是用来接受服务器传回来的数据的
            3. 常用键值对
               1. url
               2. type
               3. data
               4. success
               5. error
               6. dataType
                  1. 设置接收到的数据的响应格式

            4. $.ajax({
                   url:"ajaxServlet1111" , // 请求路径
                   type:"POST" , //请求方式
                   //data: "username=jack&age=23",//请求参数
                   data:{"username":"jack","age":23},
                   success:function (data) {
                       alert(data);
                   },//响应成功后的回调函数
                   error:function () {
                       alert("出错啦...")
                   },//表示如果请求响应出现错误，会执行的回调函数
               
                   dataType:"text"//设置接受到的响应数据的格式
               });
               

                

         2. $.get()
            1. 和post一样
         3. $.post()

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

                

2. JSON

   1. 概念

      1. JavaScript Object Notation   JavaScript对象封装
      2. JavaScript对象表示法, 可以将传输的数据封装为对象, 类似于javaBean
      3. 比xml更小更方便
   2. 使用JSON不需要导入jquery包

   3. 获取数据

      1. json对象.键名
      2. json["键名"]
         1. 写起来麻烦, 但是, 遍历一个json数据对象时, 如果你想获取值, 又必须使用这个, 因为上面的那个json对象.键名中的键名不能是字符串
      3. 数组对象[索引]

   4. json对象与java对象相互转换

      1. json作为浏览器与服务器之间的数据传输媒介

      2. java对象 ---> json字符串

         1. writeValue(Object)
         2. 概念
            1. json字符串的格式和我们之前写的一样
            2. 不太常用
         3. json解析器
            1. 常见的解析器
               1. Jsonlib
                  1. 官方解析器
               2. Gson
                  1. 谷歌家的解析器
               3. Fastjson
                  1. 阿里的解析器
               4. jackson
                  1. 我们学的解析器
                  2. 因为后面Spring框架用的就是这个解析器
         4. jackson
            1. 注解
               1. @JsonIgnore  
                  1. javaBean中有些成员变量并不作为属性使用, 这个时候就可以使用这个注解

         5. public void testNew() throws JsonProcessingException {
                //创建对象
                Person person = new Person();
                person.setName("lq");
                person.setAge(21);
                person.setGender("m");
                //创建核心对象
                ObjectMapper objectMapper = new ObjectMapper();
                //将java对象转成json字符串
                String s = objectMapper.writeValueAsString(person);
                System.out.println("s = " + s);
            }

             

         6. jackson也可以转换list和map对象, 产生的字符串也正是我们期望的格式

            1. @Test
               public void test5() throws Exception {
                   //创建对象
                   String json="{\"name\":\"lq\",\"age\":21,\"gender\":\"m\",\"date\":\"2020-03-30\"}";
                   HashMap<String, Object> map = new HashMap<>();
                   //创建核心对象
                   ObjectMapper objectMapper = new ObjectMapper();
                   Person s = objectMapper.readValue(json,Person.class);
                   System.out.println("s = " + s);
               }

                

      3. json字符串 ---> java对象

         1. 概念
            1. readValue(json字符串数据 , Class)
         2. json字符串的大括号不能少

3. 案例  实时监测用户名是否合法

   1. $("#username").blur(function () {
          //获取标签里的数据
          var username = $("#username").val();
          //使用post方式传输数据
          $.post(
              "servletFindUser",//url
              {username:username},//json数据
              function (data) {//回调函数
                  //期望的返回的数据的格式:{userExist:true/false}
                  if (data.userExist){
                      //用户名存在
                      $("#span1").css("color","red")
                      $("#span1").html("The username has existed,please use other one")
                  } else {
                      //不存在
                      $("#span1").html("The username is available")
                      $("#span1").css("color","green")
                  }
              },
              "json"//服务器返回的数据类型, 如果不指定的话, 默认是字符串格式的, 不是json格式, 所以需要在此处特别声明一下
          )
      })

       

   2. request.setCharacterEncoding("utf-8");
      String username = request.getParameter("username");
      //使用map存储数据
      HashMap<String, Object> map = new HashMap<>();
      ServiceUser serviceUser = new ServiceUserImpl();
      boolean userExist= serviceUser.findUserByUsername(username);
      if (userExist){
          //用户名存在
          map.put("userExist",true);
      }else {
          //不存在
          map.put("userExist",false);
      }
      ObjectMapper mapper = new ObjectMapper();
      //需要设置响应文件的格式, 否则会乱码
      response.setContentType("application/json;charset=utf-8");
      //直接将json数据写到response.getWriter()中
      mapper.writeValue(response.getWriter(),map);