AJAX & Axios & JSON

AJAX

• 概念：AJAX（Asynchronous JavaScript And XML）：一步的JavaScript和XML
• AJAX作用：
  ① 与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据。
  ② 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

AJAX开发步骤

1. 创建XMLHttpRequest对象：用于与服务器交换数据

const xhttp;
if (window.XMLHttpRequest) {
	xhttp = new XMLHttpRequest();
} else {
	// code for IE6, IE5
	xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

2. 向服务器发送请求

xhttp.open("GET", "url");
xhttp.send();

3. 获取服务器响应数据

xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
		document.getElementById("demo").innerHTML = this.responseText;
	}
};

Axios

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

Axios开发步骤

① 引入 axios 的js文件

<!--在线引入-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--引入本地文件-->
<script src="js/axios.js"></script>

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

axios({
  method: 'get',
  url: '',
}).then(function (resp) {
    console.log(resp)
  });

JSON

• 概念：JavaScript Object Notation。JavaScript对象表示法

JSON由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络上进行数据传输。

JSON数据和JSON对象转换

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

• 使用：

①导入坐标

<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.pareObject(JsonStr, User.class);