AJAX
此篇是AJAX基本使用的简单介绍, 详细使用可查看文章: https://lanan.blog.csdn.net/article/details/125632512
AJAX基本介绍
概念：
AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML
AJAX作用：
与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据
- 使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面了
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…
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()
获取服务器响应数据
// 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使用可查看文章: https://lanan.blog.csdn.net/article/details/125994087
Axios是对原生的AJAX进行封装的一个异步框架，简化书写
官网：https://www.axios-http.cn
使用步骤如下:
引入 axios 的 js 文件
<script src="js/axios-0.18.0.js"></script>
使用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);
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 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'}
}
}