JavaWeb自我复习之AJAX和JSON

一、AJAX

1.概念:

ASynchronous JavaScript And XML 异步的JavaScript 和 XML

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

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

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

Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

通过在与后台服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的部分进行更新。

传统的网页(不使用Ajax)如果需要更新内容,必须重载整个网页页面。

提升用户的体验

2.实现方式:

  1. 原声的JS实现方式(了解一下)
    1. <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <script>
              //定义方法
              function fun() {
                  //发送异步请求
                  //1.创建核心对象
                  var xmlhttp;
                  if (window.XMLHttpRequest) {
                      // 用于现代浏览器的代码
                      xmlhttp = new XMLHttpRequest();
                  } else {
                      // 应对老版本 IE 浏览器的代码
                      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                  }
      
                  //2.建立连接
                  /*
                      参数:
                          1.请求方式:GET、POST
                              * get方式:请求参数在URL后边拼接,send方法为空参
                              * post方式:请求参数在send方法中定义
                          2.请求的URL:
                          3.同步或异步请求:async:true(异步)或 false(同步)
                   */
                  xmlhttp.open("GET","ajaxServlet?username=tom",true);
      
                  //3.发送请求
                  xmlhttp.send();
      
                  //4.接收并处理来自服务器的响应结果
                  //获取方式: xmlhttp.responseText;
                  //什么时候获取?当服务器响应成功后在获取
                  //当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange
                  xmlhttp.onreadystatechange = function() {
                      //判断readyState就绪状态是否为4,判断status响应状态码是否为200
                      if (this.readyState == 4 && this.status == 200) {
                          //获取服务器响应结果
                          // document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
                          var responseText = xmlhttp.responseText;
                          alert(responseText);
                      }
                  };
              }
          </script>
      </head>
      <body>
          <input type="button" value="发送异步请求" onclick="fun();">
          <input>
      </body>
      </html>
    2. readyState保存了 XMLHttpRequest 的状态。
      •   0: 请求未初始化
      •   1: 服务器连接已建立
      •   2: 请求已接收
      •   3: 正在处理请求
      •   4: 请求已完成且响应已就绪
  2. JQuery实现方式
    1. $.ajax()
      1. 语法:$.ajax({键值对});
      2. <!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:"ajaxServlet",//请求路径
        
                        type:"POST",//请求方式
        
                        // data:"username=jack&age=23",//请求参数
                        data: {"username":"jack","age":23},//请求参数
        
                        success:function (data) {
                            alert(data);
                        },//响应成功后的回调函数
        
                        error:function () {
                            alert("出错了");
                        },//表示如果请求响应出现错误会执行的回调函数
        
                        dataType:"text"//设置接收到的响应数据的格式
                    });
                }
            </script>
        </head>
        <body>
            <input type="button" value="发送异步请求" onclick="fun();">
            <input>
        
        </body>
        </html>
    2. $.get():发送get请求
      1. 语法:$.get(url,[data],[callback],[type])
        1. 参数:
          1. url:请求路径
          2. data:请求参数
          3. callback:回调函数
          4. type:响应结果的类型
    3. $.post()

二、JSON

1. 概念:

JavaScript Object Motation        JavaScript对象表示法

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

  • json现在多用于存储和交换文本信息的语法
  • 进行数据的传输
  • json比XML更小、更快、更易解析

2. 语法:

2.1 基本规则

  • 数据在名称/值对中:json数据时由键值对构成的
    • 键用引号(单双都行)引起来,也可以不使用引号
    • 值的取值类型:
      • 数字(证书或浮点数)
      • 字符串(在双引号中)
      • 逻辑值(true或false)
      • 数组(在方括号中)
      • 对象(在花括号中)
      • null
  • 数据又逗号分隔:多个键值对由逗号分隔
  • 花括号保存对象:使用{}定义json格式
  • 方括号保存数组:[]

2.2 获取数据:

  • json对象.键名
    • var person1 = {"name":"杨哥","age":"22","gender":true};
  • json对象["键名"]
    • var person2 = {"person2":[
                    {"name":"杨爷爷","age":22,"gender":true},
                    {"name":"杨gege","age":25,"gender":true},
                    {"name":"杨niubi","age":28,"gender":true}
                  ]};
  • 数组对象[索引]
    • var person3 = [
                  {"name":"杨爷爷","age":22,"gender":true},
                  {"name":"杨gege","age":25,"gender":true},
                  {"name":"杨niubi","age":28,"gender":true}
              ];
  • 获取对象中所有的键和值
    • //for in 循环
              for (var key in person1) {
                  //拿到的键对应的是字符串形式
                  // alert(key+":"+person1.key);//这样的方式获取不到,因为相当于person."name"
                  alert(key+":"+person1[key]);
              }
      
              //获取person3中的所有值
              for (var i = 0; i < person3.length; i++) {
                  var p = person3[i];
                  for (var key in p) {
                      alert(key+":"+p[key]);
                  }
              }

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

  • JSON解析器:
    • 常见的解析器:Jsonlib、Gson、fastjson、jackson

3.1 JSON转为Java对象(了解一下)

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

3.2Java对象转为JSON

  • 使用步骤:
    • 导入jackson的相关jar包
    • 创建Jackson核心对象 ObjectMapper
    • 调用ObjectMapper的相关方法进行转换
    • package com.yangge.test;
      
      import com.fasterxml.jackson.core.JsonProcessingException;
      import com.fasterxml.jackson.databind.ObjectMapper;
      import com.sun.deploy.perf.PerfRollup;
      import com.yangge.domain.Person;
      import org.junit.Test;
      
      import java.io.File;
      import java.io.FileWriter;
      
      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对象转换为字符串,并保存到指定文件中
                              Writer:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中
                              OutPutStream:将obj对象转换为JSON字符串,并将数据填充到字节输出流中
                      writeValueAsString(obj):将对象转为json字符串
               */
              String json1 = mapper.writeValueAsString(p);
              //{"name":"张三","age":23,"gender":"男"}
              System.out.println(json1);
      
              //writerValue,将数据写到d://a.txt文件中
      //        mapper.writeValue(new File("d://a.txt"),p);
      
              //writerValue,将数据关联到Writer中
              mapper.writeValue(new FileWriter("d://b.txt"),p);
          }
      }
      

      注解:

      • @JsonIgnore:排除属性

      • @JsonFormat:属性的格式化

    • 复杂java对象转换

      • List:数组

      • Map:与对象格式一致

      • @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> list =new  ArrayList<Person>();
                list.add(p);
                list.add(p1);
                list.add(p2);
        
                //2.转换
                ObjectMapper mapper = new ObjectMapper();
                String json = mapper.writeValueAsString(list);
                System.out.println(json);
            }
        
            @Test
            public void test4() throws Exception{
                //创建map对象
                Map<String,Object> map = new HashMap<String,Object>();
                map.put("name","张三");
                map.put("age","23");
                map.put("gender","男");
        
                //转换
                ObjectMapper mapper = new ObjectMapper();
                String json = mapper.writeValueAsString(map);
                System.out.println(json);
            }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值