Ajax 和 Json 基本使用

拼搏现实的明天。 2021-09-20 16:10 313阅读 0赞

**目录**

一、Ajax

1、概述

2、实现方法

二、Json

1、概述

2、Json 语法

3、Json 数据和 Java 数据相互转换

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

# 一、Ajax #

## 1、概述 ##

Ajax（ASynchronous  JavaScript  And  XML），即：异步的 JavaScript 和 XML。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新

*  同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作
 *  异步：客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他操作

## 2、实现方法 ##

【1】原生的JS实现

1.  创建对象
2.  建立连接
3.  发送请求
4.  接收响应结果

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>OneStar</title>
        <script>
            function send() {
                //发送异步请求
                //创建对象
                var xmlhttp;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                //建立连接
                xmlhttp.open("GET","ajaxServlet?username=oneStar",true)
                //发送请求
                xmlhttp.send();
                //接收并处理来自服务器的响应结果
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        var responsetext = xmlhttp.responseText;
                        alert(responsetext);
                    }
                }
            }
        </script>
    </head>
    <body>
    <input type="button" value="发送异步请求" onclick="send();">
    </body>
    </html>
    
    
    
    @WebServlet("/ajaxServlet")
    public class ajaxServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //获取请求参数
            String username = request.getParameter("username");
            //打印
            System.out.println(username);
            //响应
            response.getWriter().write("Hello:" + username);
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request,response);
        }
    }

【2】JQuery实现（有三种方法）

1.  $.ajax()：$.ajax(\{键值对\});
2.  $.get()：$.get(url,\[data\],\[callback\],\[type\])  
    url：请求路径  
    data：请求参数  
    callback：回调函数  
    type：响应结果的类型
3.  $.post()：$.post(url,\[data\],\[callback\],\[type\])  
    url：请求路径  
    data：请求参数  
    callback：回调函数  
    type：响应结果的类型

注：服务器响应的数据，在客户端使用时，要想当做json数据格式使用，就要将最后一个参数 type指定为“json”

也可以在服务器端设置MIME类型为json类型：response.setContentType("application/json;charset=utf-8");

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>OneStar</title>
        <script src="JS/jquery-3.3.1.min.js"></script>
        <script>
            function send() {
                //$.ajax()方法
                $.ajax({
                    url:"ajaxServlet",  //请求路径
                    type:"POST",    //请求方式
                    data:{"username":"oneStar","age":18} ,   //请求参数
                    success:function (data) {
                        alert(data)
                    } ,      //响应成功后的回调函数
                    error:function () {
                        alert("有错误！")
                    } ,     //响应出错后的回调函数
                    dataType:"text"     //设置接收到响应数据的格式
                });
    
                //$.get()方法
                $.get("ajaxServlet",{username:"oneStar"},function (data) {
                    alert(data);
                },"text");
    
                //$.post()方法
                $.post("ajaxServlet",{username:"oneStar"},function (data) {
                    alert(data);
                },"text");
    
            }
        </script>
    </head>
    <body>
    <input type="button" value="发送异步请求" onclick="send();">
    </body>
    </html>

# 二、Json #

## 1、概述 ##

Json（JavaScript  Object  Notation），即JavaScript 对象表示法，Json 现在多用于存储和交换信息的语法，进行网络间数据传输，它比 xml 更小，更快，更容易解析！

## 2、Json 语法 ##

【1】定义格式

Json数据是由键值对构成的，键用引号，数据用逗号分隔，用大括号保存对象，中括号保存数组

*  数字（整数或浮点数）
 *  字符串（在双引号中）
 *  逻辑值（true 或 false）
 *  数组（在中括号中）：\{"person":\[\{\},\{\}\]\}
 *  对象（在大括号中）：\{"address":\{"province":"江西"\}\}
 *  null

【2】获取数据

*  方法一：json对象.键名
 *  方法二：json对象\["键名"\]
 *  方法三：数组对象\[索引\]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>oneStar</title>
        <script>
            //1.基本格式
            var person = {"name":"小明","age":18,"sex":"男"};
            alert(person.name);
            alert(person["name"]);
    
            //2.嵌套格式(数组中存储对象)
            var persons = [
                {"name":"小明","age":18,"sex":"男"},
                {"name":"小白","age":17,"sex":"女"},
                {"name":"小黑","age":16,"sex":"男"}
                ];
            alert(persons[1].name);
    
            //3.嵌套格式（对象中存储对象数组）
            var personss = {
                "person":[
                    {"name":"小明","age":18,"sex":"男"},
                    {"name":"小白","age":17,"sex":"女"},
                    {"name":"小黑","age":16,"sex":"男"}
                ]
            };
            alert(personss.person[1].name);
        </script>
    </head>
    <body>
    </body>
    </html>

## 3、Json 数据和 Java 数据相互转换 ##

在以后的开发中要将Json数据在客户端和服务器之间进行传输，服务器要能够使用Json数据就必须将数据转换为编写服务器使用的代码，通常我们使用解析器进行转换，常见的解析器有：Jsonlib、Gson、fastjson、Jackson，Jackson是Sping框架内置的一个解析器

【1】Json ----> Java

步骤：

1.  导入 Jackson 相关 jar 包
2.  创建 Jackson 核心对象 ObjectMapper
3.  调用 ObjectMapper 的相关方法进行转换

转换方法：

*  readValue(json字符串数据，Class)

public static void main(String[] args) throws IOException {
        //初始化字符串
        String json = "{\"name\":\"oneStar\",\"age\":18,\"sex\":\"男\"}";
        //创建 ObjectMapper对象
        ObjectMapper mapper = new ObjectMapper();
        //转换为java对象(person对象)
        person per = mapper.readValue(json,person.class);
        System.out.println(per);
    }

【2】Java ----> Json

步骤：

1.  导入 Jackson 相关 jar 包
2.  创建 Jackson 核心对象 ObjectMapper
3.  调用 ObjectMapper 的相关方法进行转换

转换方法：

*  writeValue(参数，obj)
    
     *  参数为File：将obj 对象转换为Json字符串，并保存到指定的文件中
     *  参数为 Writer：将obj对象转换为Json字符串，并将 json 数据填充到字符输出流中
     *  参数为 OutputStream：将 obj 对选哪个转换为Json字符串，并将json 数据填充到字节输出流中
 *  writeValueAsString(obj)：将对象转换为json字符串

注解：在属性前面加注解

*  @JsonIgnore：排除属性
 *  @JsonFormat：属性值的格式化

public class JsonTest {
        public static void main(String[] args) throws IOException {
            Test1();
            Test2();
        }
        private static void Test1() throws IOException {
            person p = new person();
            p.setAge(18);
            p.setName("oneStar");
            p.setSex("男");
    
            //创建 ObjectMapper对象
            ObjectMapper mapper = new ObjectMapper();
            //进行转换
            String per = mapper.writeValueAsString(p);
            System.out.println(per);
    
            //转换后放入指定文件
            mapper.writeValue(new File("D:\\a.txt"),p);
    
            //转换后将数据关联到write中
            mapper.writeValue(new FileWriter("D:\\a.txt"),p);
        }
    
        private static void Test2() throws IOException {
            person p1 = new person();
            p1.setAge(18);
            p1.setName("oneStar");
            p1.setSex("男");
    
            person p2 = new person();
            p2.setAge(18);
            p2.setName("oneStar");
            p2.setSex("男");
    
            person p3 = new person();
            p3.setAge(18);
            p3.setName("oneStar");
            p3.setSex("男");
    
            List<person> list = new ArrayList<>();
            list.add(p1);
            list.add(p2);
            list.add(p3);
            //创建 ObjectMapper对象
            ObjectMapper mapper = new ObjectMapper();
            //进行转换
            String per = mapper.writeValueAsString(list);
            System.out.println(per);
        }
    }

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70]: /images/20210920/67ca3ec8e11d4c9e867f326748ac369b.png