JavaWeb - Ajax - Axios - JSON基本使用介绍

红太狼 2023-09-23 15:32 145阅读 0赞

#### 文章目录 ####

*  AJAX
 *   *  AJAX基本介绍
     *  AJAX快速入门
 *  Axios快速入门
 *  JSON
 *   *  JSON基本介绍
     *  JSON基础语法
     *  JSON数据和Java对象转换

## AJAX ##

> 此篇是AJAX基本使用的简单介绍, 详细使用可查看[文章][Link 1]: https://lanan.blog.csdn.net/article/details/125632512

### AJAX基本介绍 ###

**概念**：

> AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML

**AJAX作用**：

> 与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据
> 
>  *  使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面了
> 
> 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…

![在这里插入图片描述][18861e3a77314f449850651f1b652699.png_pic_center]

### AJAX快速入门 ###

**后端**:

> 编写AjaxServlet，并使用response输出字符串

@WebServlet("/ajaxServlet")
    public class AjaxServlet extends HttpServlet {
        
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
            response.getWriter().write("hello ajax");
        }
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
            this.doGet(request, response);
        }
    }

**前端**:

> 创建 XMLHttpRequest 对象：用于和服务器交换数据

// 1.创建XMLHttpRequest网络请求对象
    const xhr = new XMLHttpRequest()

> 向服务器发送请求

> 获取服务器响应数据

// 1.创建XMLHttpRequest网络请求对象
    const xhr = new XMLHttpRequest()
    
    // 2.向服务器发送网络请求
    // 参数一: 请求的方式; 参数二: 要请求的url地址
    xhr.open("get", "http://127.0.0.1:8080/ajaxServlet")
    // 发生网络请求
    xhr.send()
    
    // 3.监听对象状态的变化
    xhr.addEventListener("readystatechange", function() {
        
      // 状态不为4的话直接return
      if (xhr.readyState !== 4) return
      // 获取服务器响应数据
      alert(xhr.response)
    })

## Axios快速入门 ##

**这里简单介绍Axios的使用, 详细的Axios使用可查看[文章][Link 2]: https://lanan.blog.csdn.net/article/details/125994087**

> Axios是对原生的AJAX进行封装的一个异步框架，简化书写
> 
> 官网：https://www.axios-http.cn

**使用步骤如下**:

> 引入 axios 的 js 文件

> 使用axios 发送请求，并获取响应结果

axios.get("http://localhost:8080/ajax-demo/ajaxServlet").then(res => alert(res.data))

axios.post("http://localhost:8080/ajax-demo/ajaxServlet", {
        
            username: 'admin',
            password: "admin"
    }).then(res => {
        
        alert(res.data)
    })

## JSON ##

### JSON基本介绍 ###

**JSON概念**：

> JSON全称JavaScript Object Notation意思是JavaScript对象表示法
> 
> 由于其语法简单，层次结构鲜明，现多用于作为`数据载体`，在网络中进行数据传输

**js对象**

{
        
      name: "chenyq",
      age: 18,
      height: 1.88
    }

**JSON对象**

{
        
      "name": "chenyq",
      "age": 18,
      "height": 1.88
    }

### JSON基础语法 ###

**定义语法**:

const 变量名 = '{"key1": value1, "key2": value2, ...};'

**value 的数据类型为**：

> 数字（整数或浮点数）
> 
> 字符串（在双引号中）
> 
> 逻辑值（true 或 false）
> 
> 数组（在方括号中）
> 
> 对象（在花括号中）
> 
> null

> 示例代码

const jsonStr = '{"name": "chenyq", "age": 18, "addr":["北京","上海","西安"]};'

**JSON字符串转为JS对象**：

const jsonStr = '{"name": "chenyq", "age": 18};'
    // 转为字符串
    const jsObj = JSON.parse(jsonStr)

**JS对象转为JSON字符串**：

const jsonStr = '{
        "name": "chenyq", "age": 18};'
    const jsObj = JSON.parse(jsonStr)
    // 转回JSON字符串
    const jsonStr2 = JSON.stringify(jsObj)

**注意: Axios中，JSON字符串和JS对象自动进行转换**

### JSON数据和Java对象转换 ###

> **请求数据**：需要将JSON字符串转为Java对象
> 
> **响应数据**：需要将Java对象转为JSON字符串

**`Fastjson`是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换**。

**Fastjson的使用**:

> 导入坐标

<dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.62</version>
    </dependency>

> Java对象转JSON: `String jsonStr = JSON.toJSONString(obj);`

> JSON字符串转Java对象: `User user = JSON.parseObject(jsonStr, User.class);`

public class FastjsonDemo {
        
        public static void main(String[] args) {
        
            // 将Java对象转为JSON字符串
            User user = new User(101, "admin", "admin123");
            String jsonStr = JSON.toJSONString(user);
            System.out.println(jsonStr); // {"id":101,"password":"admin123","username":"admin"}
    
            // 将JSON字符串转为Java对象
            User userObj = JSON.parseObject(jsonStr, User.class);
            System.out.println(userObj); // User{id=101, username='admin', password='admin123'}
        }
    }

[Link 1]: https://lanan.blog.csdn.net/article/details/125632512
[18861e3a77314f449850651f1b652699.png_pic_center]: https://img-blog.csdnimg.cn/18861e3a77314f449850651f1b652699.png#pic_center
[Link 2]: https://lanan.blog.csdn.net/article/details/125994087