目录
一、AJAX
1.概述
AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML
2.主要作用
-
与服务器进行数据交换:通过AJAX可以给服务器发送请求，并获取服务器响应的数据
-
异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索、用 户名是否可用校验，等等...
不需要用JSP了~
同步与异步
最直接的
-
同步，在没有收到/得到结果之前不能干任何事
-
异步，在没有收到/得到结果之前还能干其他事
3.快速入门
-
编写AjaxServlet并使用response输出字符串
-
创建 XMLHttpRequest 对象:用于和服务器交换数据
servlet
@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);
}
}html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tryrun 1</title>
</head>
<body>
<div id="view">
<p>点击下面的按钮，将 Ajax 请求回来的数据更新在该文本内</p>
</div>
<button type="button" id="btn">发起 Ajax 请求</button>
<script>
document.getElementById("btn").onclick = ajaxRequest;
function ajaxRequest () {
var xhr = new XMLHttpRequest();
//true是否为异步，false为同步
xhr.open("GET", "http://localhost:8080/practice02_war/ajaxServlet", true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("view").innerHTML = xhr.responseText;
}
}
}
</script>
</body>之后启动服务器，html直接使用idea快速打开即可
4.AJAX的优缺点
（1）优点
-
最大的优点是页面无刷新更新，用户的体验非常好；
-
使用异步方式与服务器通信，具有更迅速的响应能力；
-
可以将一些服务器工作转移到客户端，利用客户端资源来处理，减轻服务器和带宽的压力，节约空间和带宽租用成本；
-
技术标准化，并被浏览器广泛支持，不需要下载插件或者小程序；
-
Ajax 可使因特网应用程序更小、更快、更友好。
（2）缺点
-
Ajax 不支持浏览器 back 返回按钮；
-
有安全问题，Ajax 暴露了与服务器交互的细节；
-
对搜索引擎不友好；
-
破坏了程序的异常机制；
-
不容易调试。
5.同源策略
同源策略是一种安全协议，是客户端脚本（尤其是 JavaScript）中重要的安全度量标准，指一段脚本只能读取同一来源的窗口和文档的属性。
URL 地址中的 协议、域名、端口 三者 都 相同。
url组成：scheme: //host:post/path?query#fragment
-
scheme：通信协议，一般为 http 、https；
-
host：域名；
-
post：端口号，此项为可选项，http 协议默认的端口号为 80，https 协议默认的端口号为 443；
-
path：路径，由 "/ "隔开的字符串；
-
query：查询参数，此项为可选项；
-
fragment：信息片段，用于指定网络资源中的某片断，此项为可选项；
使用 Ajax 请求后端数据时，只能跟同源的后端接口进行数据交互，即：后端接口的 URL 与发起 Ajax 请求的页面 URL 之间，需要满足同源策略。
不满足 "同源策略" 的请求浏览器通常都会报错
使用同源策略的目的：
-
为了数据的安全性。若没有同源策略的限制，那么黑客就可以在他的页面上任意请求你的后端数据，造成数据库内容被盗取、隐私数据泄漏。
实现跨域请求的方式：
虽然 Ajax 请求需要满足同源策略，然而在一些场景中，你真的需要 Ajax 访问其它 "源" 的数据（称为跨域访问），这时需要后端服务器进行相应的设置。
如果服务器端支持 CORS，可以通过设置Access-Control-Allow-Origin来实现跨域。如果浏览器检测到相应的设置，就会允许 Ajax 进行跨域访问。
Java中实现跨域的五种方式_java跨域-CSDN博客
二、Axios
1.概述
Axios 对原生的AJAX进行封装，简化书写
Axios中文文档 | Axios中文网 (axios-http.cn)
2.快速入门
-
引入axios
-
使用axios发送请求，并获取响应
<script src="axios.min.js"></script>
<script>
axios({
method:"get",
url:"http://localhost:8080/practice02_war/axiosServlet?username=zhangsan"
}).then(function (response) {
alert(response.data)
})
axios({
method: "post",
url:"http://localhost:8080/practice02_war/axiosServlet",
data:"username=zhangsan"
}).then(function (response) {
console.log(response.data)
})
</script>servlet
@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
final String username = request.getParameter("username");
response.getWriter().write("username:"+username);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("post");
this.doGet(request, response);
}
}3.请求方式别名
为了方便起见，已经为所有支持的请求方法提供了别名。
Axios API | Axios中文文档 | Axios中文网 (axios-http.cn)
axios.get("http://localhost:8080/practice02_war/axiosServlet?username=zhangsan").then(function (response) {
alert(response.data)
})
axios.post("http://localhost:8080/practice02_war/axiosServlet","username=zhangsan").then(function (response) {
console.log(response.data)
})三、JSON
1.概述
JavaScript Object Notation。JavaScript 对象表示法
2.主要作用
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输
3.基础语法
定义：多个属性值用，隔开
var 变量名 = {"键名":值,"key":value}
value值类型可为：
-
数字
-
字符串
-
逻辑值
-
数组
-
对象
-
null（几乎不用）
直接输出就是JSON字符串
4.JSON数据转换
（1）JSON字符串转为JS对象
var jsObject=JsoN.parse(jsonstr);（2）JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObject)（3）JSON字符串转为Java对象
使用一个api
fastjson：
是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换。
-
导入坐标
<!-- https://mvnrepository.com/artifact/com.alibaba.fastjson2/fastjson2 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>2.0.47</version>
</dependency>转换：
User user = JSON.parseObject("json字符串", User.class);（4）Java对象转为JSON字符串
String jsonStr = JSON.toJSONString(new User());注意：
在Axios中（1）和（2）的转换会自动完成，不需要手写~
四、使用Axios+Json简化以前代码
这里以展示所有商品为例
这里只要能获取到数据即可，页面展示就先不写了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="selectAll" >点我查看所有商品</button>
<hr>
<table id="table" border="1px solid black">
</table>
</body>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
$("#selectAll").click(function () {
console.log("点击触发了")
axios({
method:"get",
url:"http://localhost:8080/practice02_war/selectAll"
}).then(function (response) {
let products = response.data;
for (let i = 0; i < products.length; i++) {
let product = products[i];
console.log(product)
}
})
})
</script>
</html>selectAll
@WebServlet("/selectAll")
public class SelectAll extends HttpServlet {
private final ProductService productService = new ProductService();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
final List<Product> products = productService.selectAll();
//将集合转为JSON数据（序列化）
final String s = JSON.toJSONString(products);
response.setContentType("text/json;charset=utf-8");
//跨域
response.addHeader("Access-Allow-Control-Origin","*");
response.getWriter().write(s);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}预览：
关于页面展示可以自己写，但没必要，后面有更好的方式展示数据
