`AJAX`和`JSON`的解释

昱晟168

于 2022-04-29 19:40:12 发布

阅读量1.8k

点赞数

分类专栏： javaweb 文章标签： ajax json javascript

本文链接：https://blog.csdn.net/weixin_47267628/article/details/124502922

版权

javaweb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

`AJAX`和`JSON`

在这里插入图片描述

`AJAX`

概念：

ASynchronous JavaScript And XML 异步的JavaScript 和 xml

异步和同步

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

同步：客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作，使用得客户端的操作是连续的，提升用户的体验

特点

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

在这里插入图片描述

AJAX使得用户的操作是连续的，同步也减少对服务器的请求

原生的`Javascript`实现方式【了解】

@WebServlet( "/ajaxServlet")
public class Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取参数
        String username = request.getParameter("username");
        System.out.println(username);
        // 响应
        try {
            Thread.sleep(8000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        PrintWriter writer = response.getWriter();
        writer.write("hello"+username);
    }

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

<head>
    <meta charset="UTF-8">
    <title>模拟异步请求ajax</title>
  <script>
    function fun() {
      // 发送异步请求的步骤：
      //1.创建发送异步对象
      var xhttp;
      if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
      } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      // 2.获取连接
        /**
         * 第一个参数是：请求方式
         * 第二个参数是：请求的url：url：服务器（文件）位置
         * 第三个参数是：同步还是异步 ：async：true（异步）或 false（同步）
         *
         */
        xhttp.open("GET", "ajaxServlet?username=tom", true);
      // 3.发送
        xhttp.send();// 在post请求需要在send中传入参数

        // 4.接收服务器端的响应
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var responseText = xhttp.responseText;
                alert(responseText)
            }
        };
    }
  </script>
</head>
<body>
<input type="button" id="but1" onclick="fun();" value="发送异步请求"  />
<input type="text" />
</body>
</html>

上述的案例：可以看出，在异步中，用户可以继续操作，而在同步中用户必须要等待服务器的响应后，才能操作

`Jquery`实现方式

`$.ajax()`通用方式

<!--  引入 Jquery否则报错-->
  <script src="js/jquery-3.3.1.min.js"></script>
  <script>
    function fun(){
      $.ajax({
        //使用$.ajax()发送异步请求
        url:"ajaxServlet",//请求的url
        type:"post",//请求的方式
        //请求的参数方式一：
        // data:"username=tom&age=23",
        //请求的参数方式二：推荐使用
        data:{"username":"jack","age":"23"},
        success:function (data) {//data用于接收响应回数据
          alert(data);
        }
      });//回调函数，表示服务器成功响应执行该函数
    };
  </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();" />
<input />
</body>

重点理解参数【重点】：

 //使用$.ajax()发送异步请求
        url:"ajaxServlet",//请求的url
        type:"post",//请求的方式
        //请求的参数方式一：
        // data:"username=tom&age=23",
        //请求的参数方式二：推荐使用
        data:{"username":"jack","age":"23"},
          //回调函数，表示服务器成功响应执行该函数
        success:function (data) {//data用于接收响应回数据
          alert(data);
        },
        error:function () {
            alert("出错了。。。")
        },//表示如果请求响应出错时，针对执行的回调函数
          dataType:"text"//设置接受到的响应数据格式为纯文本类型
      });

参数有：url type data success error dataType

@WebServlet( "/ajaxServlet")
public class Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取参数
        String username = request.getParameter("username");
        System.out.println(username);
        // 响应
        try {
            Thread.sleep(8000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        PrintWriter writer = response.getWriter();
        writer.write("hello"+username);
    }

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

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

概念：通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

语法：$.get(url, [data], [callback], [type])【第一个参数是必须的，其他可以省略】

参数：
url:待载入页面的URL地址【必须参数】

data:待发送 Key/value 参数。如：`{ name: "John", time: "2pm" }`

callback:载入成功时回调函数。[用于服务器成功响应执行函数] 如： `$.get("test.php", function(data){
  alert("Data Loaded: " + data);});`

type:返回内容格式，xml, html, script, json, text, _default。

案例：

    <title>Jquery方式实现ajax中get请求</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script>
    function fun() {
      // 使用Jquery方式实现ajax中get的请求
      $.get("ajaxServlet",{username:"eeje",age:22},function (data) {//第三个参数是回调函数，只有成功响应才执行
          // 所以在可能出错时，不建议使用
        alert(data);
      },"text");
    }
  </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();" />
<input />
</body>

@WebServlet( "/ajaxServlet")
public class Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取参数
        String username = request.getParameter("username");
        System.out.println(username);
        // 响应
        try {
            Thread.sleep(8000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        PrintWriter writer = response.getWriter();
        writer.write("hello"+username);
    }

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

`$.post()`：发送`post`请求

概述：通过远程 HTTP POST 请求载入信息。

这是一个简单的 POST 请求功能以取代复杂$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

参数：
url:待载入页面的URL地址【必须参数】

data:待发送 Key/value 参数。如：`{ name: "John", time: "2pm" }`

callback:载入成功时回调函数。[用于服务器成功响应执行函数] 如： `$.post("test.php", function(data){
  alert("Data Loaded: " + data);});`

type:返回内容格式，xml, html, script, json, text, _default。

get 和 post请求的参数是一样的，只是请求的方式不同，两者有个相同的特点是：在调用回调函数时，服务器成功响应时，才能执行回调函数；如果可能出现错误建议使用$.ajax()方式

案例：

<title>Jquery方式实现ajax中get请求</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script>
    function fun() {
      // 使用Jquery方式实现ajax中get的请求
      $.post("ajaxServlet",{username:"eeje",age:22},function (data) {//第三个参数是回调函数，只有成功响应才执行
          // 所以在可能出错时，不建议使用
        alert(data);
      },"text");
    }
  </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();" />
<input />

@WebServlet( "/ajaxServlet")
public class Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取参数
        String username = request.getParameter("username");
        System.out.println(username);
        // 响应
        try {
            Thread.sleep(8000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        PrintWriter writer = response.getWriter();
        writer.write("hello"+username);
    }

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

`JSON`

概念和特点：

概念：

Javascript Object Notation，Javascript对象表示法

JSON特点

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

进行数据的传输

JSON 比 XML 更小、更快，更易解析。

语法【重点】

基本定义规则

1.数据在名称/值对象中：`JSON`数据是由键值对构成的

    - 键用引号`(单双引都可以)`起来，也可以不使用引号
    - 值的取值类型：
        1. 数字（整数或浮点数）

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

        3. 逻辑值（true 或 false）

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

        5. 对象（在花括号中） {"address":{"province"："陕西"....}}

        6. null
        
     
2.数据由逗号分隔：多个键值对由逗号分隔

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

4.方括号保存数组：`[]`

案例：

 <title>Json定义格式</title>
  <script>
    //基本定义格式：
    var person = {"username":"tom","age":23,"gender":true};
    alert(person)

    // {} 嵌着 []
    var persons = {person:[
        {username:"jock",age:23,gender:false},
        {username:"tom",age:22,gender:false},
        {username:"eeje",age:21,gender:true}
      ]};
    alert(persons)

    //  [] 嵌着 {}
    var  ps = [
      {username:"jock",age:23,gender:false},
      {username:"tom",age:22,gender:false},
      {username:"eeje",age:21,gender:true}
    ];
    alert(ps)
  </script>
</head>

获取数据【重点】

1.json对象.键名

2.josn对象.["键名"]

3.数组对象[索引]

4.遍历for(key in 类型 )

 <script>
    //基本定义格式：
    var person = {"username":"tom","age":23,"gender":true};
    // 获取username
    var username = person.username;
    // alert(username);
    // 遍历基本定义格式
    for (let key in person) {
        // alert(key+person.key);// 注意这样的方式是不能获取到key对应的值的，
        // 因为是等价于 person."username"
        // 一定要使用这样方式：person[key]:注意是不要传入""原来username本来就""引着
        alert(key+person[key]);
    }
    // {} 嵌着 []
    var persons = {person:[
        {username:"jock",age:23,gender:false},
        {username:"tom",age:22,gender:false},
        {username:"eeje",age:21,gender:true}
      ]};
    // 获取第二个对象的年龄
    var age = persons.person[1].age;
    // alert(age);
    // 获取中的所有值
    for (const person in persons) {
        var per = persons[person];
        for (let i = 0; i < per.length; i++) {
            alert(per[i].username+":"+per[i].age+":"+per[i].gender);
        }
    }
    //  [] 嵌着 {}
    var  ps = [
      {username:"jock",age:23,gender:false},
      {username:"tom",age:22,gender:false},
      {username:"eeje",age:21,gender:true}
    ];
    // 获取获取第三个对象的性别
    var gender = ps[2].gender;
    // alert(gender)
    // 遍历数组
    for (let i = 0; i < ps.length; i++) {
        var p = ps[i];
        for (const pKey in p) {
            alert(pKey+p[pKey]);//在[]中不能用""引起来
        }
    }
  </script>

`JSON`数据和`JAVA`对象相互转换

JSON解析器：

Jsonlib Gson fastjson jackson

1.`JSON`转为`JAVA`对象

使用步骤：jackson是Spring框架的

导入jackson相关的jar包
创建需要转化的对象
创建Jackson核心对象ObjectMapper
调用ObjectMapper相关的方法进行转换

java转换成json的方法

转换方法：两组方法
	方法一：
		writeValue(参数1，obj):
	      参数1：
	         File：将obj对象转换为JSON字符串，并保存到指定的文件中
	         Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
	         OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
	         
	 方法二：     
		writeValueAsString(obj):将对象转为json字符串

@Test
    public void test1() throws IOException {
        //使用Jackson将对象转成Json字符串
        Person p = new Person();
        p.setUsername("海康");
        p.setAge(20);
        p.setGender("男");
        // Jackson 核心对象 ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        // 调用转换方法
        /**
         * //一类方法：将对象转换成Json格式，并且与流相关
         * 1.public void writeValue(File var1, Object var2)
         * 2.public void writeValue(OutputStream var1, Object var2)
         * 3.public void writeValue(Writer var1, Object var2)
         *
         * //二类方法：直接将对象转换Json格式
         * 4.public String writeValueAsString(Object var1)
         */
        String s = mapper.writeValueAsString(p);
        //{"username":"海康","age":20,"gender":"男"}
        System.out.println(s);//返回值：{"username":"海康","age":20,"gender":"男"}
        // 注意是：在javaBean中没有生成getter方法会报的错误
        /**
         * No serializer found for class com.example.AjaxAndJSON.damain.Person and no properties discovered to create BeanSerializer
         * (to avoid exception, disable SerializationFeature.FAIL_ON_EMPTY_BEANS) )
         */

        mapper.writeValue(new File("d://a.txt"),p);
        mapper.writeValue(new FileWriter("d//b.txt"),p);
    }

public class Person {
    private String username;
    private Integer age;
    private String gender;

    public Person() {
    }

    @Override
    public String toString() {
        return "Person{" +
                "username='" + username + '\'' +
                ", age=" + age +
                ", gender=" + gender +
                '}';
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getUsername() {
        return username;
    }

    public Integer getAge() {
        return age;
    }

    public String getGender() {
        return gender;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }
}

注意是：一定要生成getter方法，否则会报错，因为是不能获取到该属性

注解【重点】

@JsonIgnore:排除属性
@JsonFormat:属性值得格式化
	@JsonFormat(parttern="yyyy-MM-dd")

如果希望某个属性不转换成json格式，可以在javabean中的该属性上加上@JsonIgnore注解，如果希望某个属性在转换成json格式时，以某种格式出现，可以使用@JsonFormat注解，在该注解中使用parttern=格式方式属性

@Test
    public void test2() throws JsonProcessingException {
        //使用Jackson将对象转成Json字符串
        Person p = new Person();
        p.setUsername("海康");
        p.setAge(20);
        p.setGender("男");
        p.setBirthday(new Date());
        // Jackson 核心对象 ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        // 调用转换方法
        String s = mapper.writeValueAsString(p);
        System.out.println(s);
        /**
         * 返回值：
         * 在birthday属性上加省略注解返回值
         * {"username":"海康","age":20,"gender":"男"}
         * 在birthday属性上加@JsonFormat(pattern = "yyyy-MM-dd")注解返回值
         * {"username":"海康","age":20,"gender":"男","birthday":"2022-04-28"}
         */
    }

public class Person {
    private String username;
    private Integer age;
    private String gender;
//    @JsonIgnore//表示在转成Json时，省略该属性
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date birthday;

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }
}

复杂`java`对象转换【重点】

1.List 数组【在数组中放一个一个对象】
2.Map 对象格式一致【就是和对象的格式一样】

`List`转换成`Json`对象

@Test
    public void testList() throws JsonProcessingException {
        //将List转成JSON对象
        //使用Jackson将对象转成Json字符串
        Person p1 = new Person();
        p1.setUsername("海康");
        p1.setAge(20);
        p1.setGender("男");
        p1.setBirthday(new Date());

        Person p2 = new Person();
        p2.setUsername("海康");
        p2.setAge(20);
        p2.setGender("男");
        p2.setBirthday(new Date());

        // List集合
        List<Person> list = new ArrayList<>();
        list.add(p1);
        list.add(p2);

        // ObjectMapper对象
        ObjectMapper mapper = new ObjectMapper();
        String listJson = mapper.writeValueAsString(list);
        System.out.println(listJson);
        //返回值：[{"username":"海康","age":20,"gender":"男","birthday":"2022-04-28"},
        // {"username":"海康","age":20,"gender":"男","birthday":"2022-04-28"}]
    }
}

`Map`转换成`json`

@Test
    public void testMapJson() throws JsonProcessingException {
        //将List转成JSON对象
        //使用Jackson将对象转成Json字符串
        Person p1 = new Person();
        p1.setUsername("海康");
        p1.setAge(20);
        p1.setGender("男");
        p1.setBirthday(new Date());

        Person p2 = new Person();
        p2.setUsername("海康");
        p2.setAge(20);
        p2.setGender("男");
        p2.setBirthday(new Date());

        // 创建Map集合
        Map<Integer,Person> maps = new HashMap();
        maps.put(1,p1);
        maps.put(2,p2);

        // ObjectMapper 对象
        ObjectMapper mapper = new ObjectMapper();
        String mapJson = mapper.writeValueAsString(maps);
        System.out.println(mapJson);
        /**
         * 返回值：
         * {"1":{"username":"海康","age":20,"gender":"男","birthday":"2022-04-28"},
         * "2":{"username":"海康","age":20,"gender":"男","birthday":"2022-04-28"}}
         */


    }

2.`JAVA`转为`JSON`对象

使用步骤：

定义JOSN字符串
创建ObjectMapper对象
调用readValue方法

@Test
    public void test() throws IOException {
        // json 转成 Java对象
        // 第一步：定义json字符串： {"username":"海康","age":20,"gender":"男","birthday":"2022-04-28"},注意`""`需要`\`转译
        String json = "{\"username\":\"海康\",\"age\":20,\"gender\":\"男\",\"birthday\":\"2022-04-28\"}";
        // 第二步：创建ObjectMapped对象
        ObjectMapper mapper = new ObjectMapper();
        // 调用`readValue方法
        Person person = mapper.readValue(json, Person.class);
        System.out.println(person);
        // 返回值：Person{username='海康', age=20, gender='男', birthday=Thu Apr 28 08:00:00 CST 2022}
    }

昱晟168

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
`AJAX`和`JSON`的解释

AJAX和JSONAJAX概念： ASynchronous JavaScript And XML 异步的JavaScript 和 xml异步和同步异步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作同步：客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作，使用得客户端的操作是连续的，提升用户的体验特点Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步.
复制链接

扫一扫