JOSN格式和AJAX的学习

这篇只是简单的了解JOSN和AJAX，以及它们的简单应用，因为主学的后端，目前前端学的可能还很浅。所以在写这篇文章时，可能会用到一些后端知识，也可跳过不看。😊

一.概述

JSON 和 AJAX 是两个广泛应用于 web 开发的概念。JSON 作为一种数据格式，提供了一种方便的方式来表示和交换数据。而 AJAX 则是一种通过异步通信实现网页动态更新的技术，在实际开发中常常使用 JSON 作为数据传输格式。它们的结合能够带来更好的用户体验和性能。

二.JOSN学习

1.什么是JOSN

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，用于在不同平台和编程语言之间进行数据传输和交换。它基于 JavaScript 对象字面量语法，但已经成为一种独立于编程语言的通用数据格式。

2.基本格式

JOSN是一个对象，所以它的格式和Js中的对象类似，也有点像Python中的字典。

{
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
}

1. 使用双引号""来表示键和字符串值。键是唯一的，字符串值可以是任何有效的 Unicode 字符串。
2. 值可以是字符串、数字、布尔值（true 或 false）、对象、数组或 null。
3. 键值对之间使用冒号:分隔，多个键值对之间使用逗号,分隔。
4. 数组使用方括号[]包裹，元素之间使用逗号,分隔。
5. 对象使用花括号{}包裹，键值对之间使用冒号:分隔，多个键值对之间使用逗号,分隔。

所以一个具体示例说明一下：

<script type="text/javascript">
    var person = {
        "name": "John Doe",
        "age": 30,
        "city": "New York",
        "email": "john.doe@example.com",
        "hobbies": ["reading", "traveling", "hiking"],
        "address": {
            "street": "123 Main Street",
            "city": "New York",
            "country": "USA"
        }
    };

   alert(person);
</script>

弹窗显示为：Object类型，更加说明了它是一个对象。

3.具体读写

因为我是web开发方向的，使用最多的是JavaScript和Java了，所以这里就介绍这两种的读写应用了。

3.1 javaScript的使用

• 当涉及 JSON 和 JavaScript 的读写操作时，你可以使用 JavaScript 的内置函数 JSON.parse() 和 JSON.stringify() 来解析和序列化 JSON 数据。
• parse（）：将字符串转换为JOSN对象
• stringify() : 将JOSN对象，转换为字符串序列

示例如下：

// 读取 JSON 字符串并解析为 JavaScript 对象
var jsonString = '{"name": "John", "age": 30, "city": "New York"}';
var jsonObject = JSON.parse(jsonString);

// 读取 JSON 对象的属性
var name = jsonObject.name;
var age = jsonObject.age;
var city = jsonObject.city;

console.log(name); // 输出: John
console.log(age); // 输出: 30
console.log(city); // 输出: New York

// 创建 JavaScript 对象
var person = {
  name: "Jane",
  age: 25,
  city: "London"
};
// 将 JavaScript 对象序列化为 JSON 字符串
var jsonString2 = JSON.stringify(person);
console.log(jsonString2); // 输出: {"name":"Jane","age":25,"city":"London"}

输出效果：

3.2 JAVA中的使用

1. 基本概念
   把 JavaBean 变为 JSON 的过程称为序列化；
   把 JSON 解析为 JavaBean 的过程称为 反序列化。
2. Java中用于解析JOSN的第三方库：
   谷歌的Gson，还有阿里的Fastjson
3. 我们这里以GSON为例：
   在Maven中导入依赖：

 <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.5</version>
</dependency>

4. 它这里面主要也是两种方法：
   序列化：String json = new Gson().toJSON(要转换的对象);
   反序列化: 对象 = new Gson().fromJson(JSON字符串,对象类型.class);

• 代码示例

public class JsonTest {

    @Test
    public void Json01(){
        //new一个user对象
        User user=new User(1,"张三","123445",22);

        //通过toJson()方法，转化为字符串序列
        String json1=new Gson().toJson(user);
        System.out.println(json1);

        //通过反序列化，将字符串转换为对象
        String json2 = "{\"id\":2,\"username\":\"李四\",\"password\":123,\"age\":23}";
        //因为我的user类的无参构造方法输出是生命周期创建对象
        //进一步说明了，字符串转换为对象时，先转换为空对象，
        //然后有参构造或者set赋值
        User user1 = new Gson().fromJson(json2, User.class);
        System.out.println(user1);
    }
}

结果如下：

三.AJAX技术

1.什么是AJAX

AJAX（Asynchronous JavaScript and XML）是一种用于创建快速、动态网页的前端开发技术。AJAX 允许在不刷新整个网页的情况下向服务器发送或获取数据，并通过 JavaScript 动态地更新页面的部分内容。

2.预备工作

• 这个要有个大前提：web的项目工程搭建好了，Tomcat服务器配置好了。
• 导入jar包，jQuery的js文件，或者在Maven中导入依赖

<dependency>
      <groupId>org.webjars</groupId>
      <artifactId>jquery</artifactId>
      <version>3.1.1</version>
</dependency>

• @ResponseBody 是 Spring 框架中常用的注解之一，用于指示控制器方法的返回值应作为 HTTP 响应的消息体返回，而不是视图名称。当你希望返回的是响应数据而不是视图，可以在控制器方法上使用 @ResponseBody 注解。
• @RequestMapping: 用于映射请求路径和处理方法，指定请求的 URL 映射到相应的处理方法上。可以用于类级别和方法级别，定义了请求的路径、请求方法和其他请求参数的条件。
• @RequestBody: 用于将请求的消息体绑定到方法的参数上，尤其适用于接收 JSON 或 XML 格式的请求体。使用该注解可以方便地将请求体转换为对应的 Java 对象。

3.AJAX的参数

AJAX技术主要用于局部刷新，通过数据的请求，对局部界面进行更新，给用户更好的体验。

• 在使用 AJAX 进行异步请求时，常用的参数有以下几个：
  1.url：指定要发送请求的目标 URL。可以是相对路径或绝对路径。
  2.type：指定请求的类型，如 GET、POST、PUT、DELETE 等。
  3.data：发送给服务器的数据。可以是字符串、对象或数组。
  4.dataType：指定服务器返回的数据类型。常见的数据类型有 “json”、“html”、“text” 等。
  5.success：请求成功时的回调函数。
  6.error：请求失败时的回调函数。
  7.beforeSend：发送请求前的回调函数。
  8.complete：请求完成后的回调函数。

• 重要的参数包括：

url：指定请求的目标 URL，是必需的。
type：指定请求的类型，常用的是 GET 和 POST。
success：请求成功时的回调函数，用于处理服务器返回的数据。
data：发送给服务器的数据。可以是字符串、对象或数组。
error：请求失败时的回调函数，用于处理错误情况。

4.用户的AJAX异步验证

登录界面我们都写过，很简单，一个用户名还有一个密码，两个文本框，还有一个登录按钮。

4.1要求

这里只是做一个消息，主要是运用，用户名的验证。
使用AJAX技术实现用户的登录验证，用户名为admin，这里的事件设置问失去焦点onblur时触发，正确，控制台打印true，错误为flase。

4.2后端代码

后端代码如下：

@Controller
@RequestMapping("/ajax")
public class AJAXTest {

    @RequestMapping("/a1")
    public void ajax(String name, HttpServletResponse response)throws IOException {
        if ("admin".equals(name)) {
           response.getWriter().print("true");
        } else {
            response.getWriter().print("false");
        }
    }

    @RequestMapping("/a2")
    public String ajax2(String name, HttpServletResponse response)throws IOException {
        if ("admin".equals(name)) {
            response.getWriter().print("true");
        } else {
            response.getWriter().print("false");
        }
        return "111";
    }
}

4.3前端代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script>
</head>
<body>
<%--onblur失去焦点产生事件--%>
用户名：<input type="text" id="txtName" onblur="a1()">
密码：<input type="text" id="password" onblur="a2()">


<script type="text/javascript">
    function a1(){
        $.post({
            url:"${pageContext.request.contextPath}/ajax/a1",
            //获取输入文本值
            data:{"name":$("#txtName").val()},
            success:function (data,status){
                console.log(data)
                 console.log(status)
            }
            });
    }
</script>
</body>
</html>