JSON和AJAX学习

JSON和AJAX学习

1、Json

1.1、什么是Json

• JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。
• 易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式.。
• json 是一种轻量级的数据交换格式。
• 轻量级指的是跟 xml 做比较。 数据交换指的是客户端和服务器之间业务数据的传递格式。

1.2、JSON 在 JavaScript 中的使用。

• json 是由键值对组成，并且由花括号（大括号）包围。
• 每个键由引号引起来，键和值之间使用冒号进行分隔， 多组键值对之间进行逗号进行分隔。

var json = {
    
    
"key1":12,
"key2":"abc",
"key3":true,
"key4":[11,"arr",false],
"key5":{
    
    
"key5_1" : 551, 
"key5_2" : "key5_2_value"
},
"key6":[{
    
    
"key6_1_1":6611,
"key6_1_2":"key6_1_2_value"
},{
    
    
"key6_2_1":6621,
"key6_2_2":"key6_2_2_value"
}]
};

• json 本身是一个对象。
• json 中的 key 我们可以理解为是对象中的一个属性。
• json 中的 key 访问就跟访问对象的属性一样： json 对象.key

1.2.1、json常用的两种方法

• JSON.stringify() 把 json 对象转换成为 json 字符串
• JSON.parse() 把 json 字符串转换成为 json 对象（JavaScript对象）

var jsonstr = JSON.stringify({
    
    "a":"Hello","b":"world"});
//结果是 '{a: 'Hello', b: 'World'}'

var obj = JSON.parse('{"a": "Hello", "b": "World"}');
//结果是 {a: 'Hello', b: 'World'}

1.3、Json在java中的使用

1.3.1、使用gson解析json

• Gson 是 Google 提供的用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库。

• 可以将一个 JSON 字符串转成一个 Java 对象，反之亦然。

• Gson提供了fromJson() 和toJson() 两个直接用于解析和生成的方法

• fromJson实现反序列化

• toJson实现了序列化

使用gson首先导入gson的jar包

<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
   <dependency>
       <groupId>com.google.code.gson</groupId>
       <artifactId>gson</artifactId>
       <version>2.8.6</version>
   </dependency>

pojo实体类

public class User {
    
    
    private int age;
    private String name;

    public User() {
    
    
    }

    public User(int age, String name) {
    
    
        this.age = age;
        this.name = name;
    }

    public int getAge() {
    
    
        return age;
    }

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

    @Override
    public String toString() {
    
    
        return "User{" +
                "age=" + age +
                ", name='" + name + '\'' +
                '}';
    }

    public String getName() {
    
    
        return name;
    }

    public void setName(String name) {
    
    
        this.name = name;
    }
}

@Test
public void test1(){
    
    
    User user = new Person(16,"小明");
    // 创建 Gson 对象实例
    Gson gson = new Gson();
    // toJson 方法可以把 java 对象转换成为 json 字符串
    String userJsonString = gson.toJson(user);
    System.out.println(userJsonString);// {"age":16,"name":"小明"}
    
    // fromJson 把 json 字符串转换回 Java 对象
    // 第一个参数是 json 字符串
    // 第二个参数是转换回去的 Java 对象类型
    User user = gson.fromJson(userJsonString, user.class);
    System.out.println(user);//User{age=16, name='小明'}
}

List和json的转换

 @Test
    public void test2() {
    
    
        List<User> userList = new ArrayList<User>();
        userList.add(new User(16, "张三"));
        userList.add(new User(18, "李四"));
        Gson gson = new Gson();
        //把 List 转换为 json 字符串
        String userListJsonString = gson.toJson(userList);
        System.out.println(userListJsonString);// //[{"age":16,"name":"张三"},{"age":18,"name":"李四"}]
        System.out.println("==================");
        List<User> list = gson.fromJson(userListJsonString, new TypeToken<List<User>>(){
    
    }.getType());
        System.out.println(list);//[User{age=16, name='张三'}, User{age=18, name='李四'}]
    }

Map和json的转换

@Test
    public void test3(){
    
    
        Map<Integer,User> userMap = new HashMap<Integer, User>();
        userMap.put(1, new User(19, "赵六"));
        userMap.put(2, new User(18, "孙七"));
        Gson gson = new Gson();
        // 把 map 集合转换成为 json 字符串
        String userMapJsonString = gson.toJson(userMap);
        System.out.println(userMapJsonString);//{"1":{"age":19,"name":"赵六"},"2":{"age":18,"name":"孙七"}}
        System.out.println("--------------------------------------------");
        Map<Integer,User> userMap1 = gson.fromJson(userMapJsonString, new
                TypeToken<HashMap<Integer,User>>(){
    
    }.getType());
        System.out.println(userMap1);//{1=User{age=19, name='赵六'}, 2=User{age=18, name='孙七'}}
        User user = userMap1.get(1);
        System.out.println(user);//User{age=19, name='赵六'}
    }

1.3.2、使用Jackson解析json

导入Jackson的依赖

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.11.2</version>
</dependency>

@Test
public void test04() throws JsonProcessingException {
    
    
        //创建一个jackson的对象映射器，用来解析数据
        ObjectMapper mapper = new ObjectMapper();
    
        //创建一个对象
        User user = new User(19,"王麻子");

        //将我们的对象解析成为json格式

        String str = mapper.writeValueAsString(user);

		System.out.println(str);//{"age":19,"name":"王麻子"}
    }
}

1.3.3、使用FastJson解析json

导入FastJson的依赖

<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.70</version>
</dependency>

• JSON

  • JSON代表 JSONObject和JSONArray的转化

• JSONArray

  • JSONArray 代表 json 对象数组

• JSONObject

  • JSONObject 代表 json 对象

1. JSON类之parseObject()方法，实现json字符串转换为json对象或javabean对象
2. JSON类之toJSONString()方法，实现json对象转化为json字符串和javabean对象转化为json 字符串

可以自己测试一下 跟上面Jackson gson差不多

2、AJAX

2.1、什么是AJAX

• AJAX 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，就是异步的 JS 和 XML。
• 是指一种创建交互式网页应用的网页开发 技术。 ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。
• Ajax 请求的局部更新，浏览器地址栏不会发生变化 局部更新不会舍弃原来页面的内容 也就是无刷新获取数据
• AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

优点：

• 可以无需刷新页面而与服务器端进行通信。
• 允许你根据用户事件来更新部分页面内容。

模范Ajax效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Ajax</title>
</head>
<body>
<script type="text/javascript">
    function LoadPage(){
     
     

        var targetUrl =  document.getElementById('url').value;

        console.log(targetUrl);

        // 从输入框中获取地址 动态加载
        document.getElementById("iframePosition").src = targetUrl;
    }

</script>

<div>
    <p>请输入要加载的地址：<span id="currentTime"></span></p>
    <p>
        <input id="url" type="text" value="https://www.baidu.com/"/>
        <!--当点击提交时 调用LoadPage方法 获取要加载的地址-->
        <input type="button" value="提交" onclick="LoadPage()">
    </p>
</div>
<div>
    <h3>加载页面位置：</h3>
    <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>
</body>
</html>

效果

2.2、jQuery 中的 AJAX

2.2.1、$.ajax 方法

• url 表示请求的地址

• type 表示请求的类型 GET 或 POST 请求

• data 表示发送给服务器的数据 格式有两种：

  • name=value&name=value
  • {key:value}

• success 请求成功，响应的回调函数

• dataType 响应的数据类型

  常用的数据类型有text 表示纯文本 xml 表示 xml 数据 json 表示 json 对象

2.2.2、get和post请求

• $.get/post(url, [data], [callback], [type])

• url:请求的 URL 地址。

• data:请求携带的参数。

• callback:载入成功时回调函数。

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

使用ajax实现用户登录提示功能

@RequestMapping("/ajax")
public String ajaxTest(String name,String pwd){
    
    

    String msg = "";

    //在数据库中查找数据与前端用户输入的数据比较
    if (name!=null){
    
    
        if ("admin".equals(name)){
    
    //这里将数据写死了 实际上是从数据库中查找
            msg = "OK";
        }else {
    
    
            msg = "用户名输入错误";
        }
    }
    if (pwd!=null){
    
    
        if ("123456".equals(pwd)){
    
    

           msg = "OK";
        }else {
    
    

            msg = "密码输入有误";
        }
    }
    return msg; 
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <%--导入jquery库--%>
    <script src="*****"></script>
    <script>
        function name(){
            $.post({
                url:"${pageContext.request.contextPath}/ajax",

                data:{'name':$("#name").val()},

                success:function (data) {

                    if (data.toString()=='OK'){

                        $("#userInfo").css("color","green");

                    }else {

                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            });
        }
        function password(){
            $.post({
                url:"${pageContext.request.contextPath}/ajax",
                data:{'pwd':$("#pwd").val()},

                success:function (data) {

                    if (data.toString()=='OK'){
                        $("#pwdInfo").css("color","green");
                    }else {
                        $("#pwdInfo").css("color","red");
                    }
                    $("#pwdInfo").html(data);
                }
            });
        }
    </script>
</head>
<body>
<p>
    用户名:<input type="text" id="name" οnblur="name()"/>
    <span id="userInfo"></span>
</p>
<p>
   密码:<input type="text" id="pwd" οnblur="password()"/>
    <span id="pwdInfo"></span>
</p>
</body>
</html>

可以自己网上查阅资料学习AJAX和JSON

建议学习AJAX和JSON学习视频 B站：尚硅谷AJAX 或者 狂神说java

谢谢大家的阅读！ 若上面有写错的 欢迎纠正哦