【JAVA】AJAX&JSON

墨蓝 2024-04-08 08:20 47阅读 0赞

**目录**

【AJAX】—— Asynchronous JavaScript And XML

【使用】

【Axios异步框架】

【使用】

【Axios请求方式别名】

【JSON】—— JavaScript Object Notation

【基础语法】

【JSON数据和Java对象相互转换】

【Fastjson】

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

## 【AJAX】—— Asynchronous JavaScript And XML ##

**【概述】**

异步的 JavaScript 和 XML

**【作用】**

1、与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据

*  使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面了

2、异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等

**【官网】**

[w3school 在线教程][w3school]

### 【使用】 ###

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

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

//创建核心对象
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

3、向服务器发送请求

//发送请求
        xhttp.open("GET", "http://localhost:8080/AJAX/ajaxServlet", true);
        xhttp.send();

4、获取服务器响应数据

//获取响应
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("demo").innerHTML =
                    alert(this.responseText);
            }
        };

### 【Axios异步框架】 ###

**【概述】**

Axios 对原生的AJAX进行封装，简化书写

**【官网】**

[Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js (axios-http.cn)][Axios _ _ Axios _ _ Axios _ promise _ node.js _axios-http.cn]

#### 【使用】 ####

1、引入axios的js文件

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

//get方式
    <script>
        axios({
            method: "get",
            url: "http://localhost:8080/AJAX/axiosServlet?username=zhangsan",
        }).then(function (resp) {
            alert(resp.data)
        })
    </script>

//post方式
    <script>
    axios({
        method:"post",
        url:"http://localhost:8080/AJAX/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp){
        alert(resp.data)
    })
    </script>

### 【Axios请求方式别名】 ###

为了方便起见， Axios 已经为所有支持的请求方法提供了别名

![bd5d374a2b994e0aabe225576b31a0b8.png][]

<table style="width:337px;"> 
 <tbody> 
  <tr> 
   <td style="width:158px;"> <p><strong>方法名</strong></p> </td> 
   <td style="width:177px;"><strong>作用</strong></td> 
  </tr> 
  <tr> 
   <td style="width:158px;">get(url)</td> 
   <td style="width:177px;">发起Get请求</td> 
  </tr> 
  <tr> 
   <td style="width:158px;">post(url,请求参数)</td> 
   <td style="width:177px;">发起Post请求</td> 
  </tr> 
 </tbody> 
</table>

例：

//get
        axios.get("http://localhost:8080/AJAX/axiosServlet?username=zhangsan").then(function (resp) {
            alert(resp.data);
        });

//post
        axios.post("http://localhost:8080/AJAX/axiosServlet","username=zhangsan").then(function (resp){
           alert(resp.data);
        });

## 【JSON】—— JavaScript Object Notation ##

**【概述】**

*  JavaScript 对象表示法
 *  由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

### 【基础语法】 ###

**【数据类型】**

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

**【定义】**

> var *变量名* = ‘’\{"key1": value1,"key2": value2,...\};

例：

//定义字符串
        var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}';

【JSON字符串转为JS对象】

//将JSON字符串转换为js对象
        let jsObject = JSON.parse(jsonStr);

【JS对象转为JSON字符串】

//将js对象转换为json字符串
        let jsonStr = JSON.stringify(jsObject);

### 【JSON数据和Java对象相互转换】 ###

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

#### 【Fastjson】 ####

**【概述】**

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

**【使用】**

1、导入坐标

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

2、Java对象转JSON

> String jsonStr = JSON.toJSONString(obj);

3、JSON字符串转Java对象

> User user = JSON.parseObject(jsonStr, User.class);

例：

public static void main(String[] args) {
            //将Java对象转为JSON
            User user=new User();
            user.setId(1);
            user.setUsername("zhangsan");
            user.setPassword("123");
            String jsonString= JSON.toJSONString(user);
            System.out.println(jsonString);
            //将JSON转为Java对象
            User u=JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}",User.class);
            System.out.println(u);
        }

[w3school]: https://www.w3school.com.cn/
[Axios _ _ Axios _ _ Axios _ promise _ node.js _axios-http.cn]: https://www.axios-http.cn/
[bd5d374a2b994e0aabe225576b31a0b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/e40adb39fc8f4cd2839e3e59aa0468d6.png

【JAVA】AJAX&JSON

发表评论取消回复

还没有评论，来说两句吧...

相关阅读