Ajax基础
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 Ajax可以在不刷新页面的前提下，进行页面局部更新
Ajax使用流程
- 创建XmlHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest) {
//IE7 、FureFox、Chrome、Opear、Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6、IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}- 发送Ajax请求
// 创建请求(参数1<发送方式> , 参数2<完整URL或URI>)
xmlhttp.open("GET","/content");
// 发送到服务器
xmlhttp.send();- 处理服务器响应
xmlhttp.onreadystatechange // 事件用于监听Ajax的执行状态
xmlhtpp.readyState // 说明XMLHttpRequest当前状态
xmlhttp.status // 服务器响应状态码，200:成功,404:未找到...
xmlhttp.onreadystatechange = function () {
// 响应已被接收且服务器处理成功时才执行
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// 获取响应体为本
var t = xmlhttp.responseText;
// 对服务器结果进行处理
console.log(t);
}
}
JSON 入门
代码语言：javascript复制JavaScript Object Notation(JavaScript 对象表示法) JSON 是轻量级的文本数据交换格式，JSON 独立于语言，居右自我描述性，更易理解
{
"sites":[
{"name":"百度","url":"www.baidu.com"},
{"name":"京东","url":"www.jd.com"},
{"name":"淘宝","url":"www.taobao.com"}
]
}JSON语法规则
- 数据由键(Key)/值(value)描述，由冒号分隔
- 大括号代表一个完整的对象，拥有多个键/值对
- 中括号保存数组，多个对象之间使用逗号(,)分隔
JavaScript操作JSON
JavaScript天然支持解析JSON语法
Ajax应用
利用Jackson实现JSON序列化输出
Jackson
Jackson是国内外著名的Java开源JSON序列化组件
Maven仓库：com.fasterxml.jackson.core : jackson-databind : 2.13.3 - Maven Central Repository Search
代码语言：javascript复制<dependencies>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.3</version>
</dependency>
</dependencies>// ObjectMapper Jackson核心对象
ObjectMapper objectMapper = new ObjectMapper();
// 将对象转化为JSON 序列化
String json = objectMapper.writeValueAsString(list);
response.setContentType("text/json;charset=utf-8");
response.getWriter().println(json);添加依赖后：进入Project Structure > Artifacts > 选中jar包
选中Put into /WEB_INF/lib：添加到Maven项目中
Ajax处理JSON数据
代码语言：javascript复制<script>
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "/news");
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var news = xmlhttp.responseText;
var json = JSON.parse(news);
for (let i = 0; i < json.length; i ) {
let news = json[i];
let container = document.getElementById("container");
container.innerHTML = container.innerHTML "<h3>" news.title "</h3>" "<p>" news.content "</p>";
}
}
}
</script>Axios快速入门
代码语言：javascript复制axios中文网|axios API 中文文档 | axios (axios-js.com)
<script>
// 参数1：对应的URI，参数2：服务器传递参数
// then: 处理成功 catch：处理失败
axios.get("/news", {params: {"t": "tiktok"}}).then(function (response) {
console.log(response);
let json = response.data;
for (let i = 0; i < json.length; i ) {
let news = json[i];
let container = document.getElementById("container");
container.innerHTML = container.innerHTML "<h3>" news.title "</h3>" "<p>" news.content "</p>";
}
}).catch(function (error) {
console.log(error);
});
</script><script>
// 参数1：URI，参数2：请求参数字符串，请求头参数
// axios.post("/news1", "t=tiktok&l=abc", {headers: {"content-tpye": "application/x-www-form-urlencoding"}})或axios.post("/news", params)
const params = new URLSearchParams();
params.append("t", "tiktok");
params.append("t", "abc");
axios.post("/news", params)
.then(function (response) {
let json = response.data;
for (let i = 0; i < json.length; i ) {
let news = json[i];
let container = document.getElementById("container");
container.innerHTML = container.innerHTML "<h3>" news.title "</h3>" "<p>" news.content "</p>";
}
})
.catch(function (error) {
console.log(error);
});
</script>同步与异步的区别
同步是在服务器未返回JSON前，JS程序一直处于阻塞等待的状态 异步是在服务器未返回JSON钱，不阻塞程序，Ajax通过回调获取结果
<script>
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// Ajax默认以异步运行，添加参数false执行同步
xmlhttp.open("GET", "/news?t=tiktok");
xmlhttp.send();
console.log("请求数据已发送")
// 参数为false则不会运行onreadystatechange
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var news = xmlhttp.responseText;
console.log(news);
var json = JSON.parse(news);
for (let i = 0; i < json.length; i ) {
let news = json[i];
let container = document.getElementById("container");
container.innerHTML = container.innerHTML "<h3>" news.title "</h3>" "<p>" news.content "</p>";
}
}
}
</script>实现二级联动菜单
代码语言：javascript复制@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 父级菜单
String level = request.getParameter("level");
// 子级菜单
String parent = request.getParameter("parent");
List<Channel> list = new ArrayList();
if (level.equals("1")) {
list.add(new Channel("ai", "人工智能"));
list.add(new Channel("web", "前端开发"));
} else if (level.equals("2")) {
if (parent.equals("ai")) {
list.add(new Channel("dl", "深度学习"));
list.add(new Channel("cv", "计算机视觉"));
list.add(new Channel("nlp", "自然语言处理"));
} else if(parent.equals("web")) {
list.add(new Channel("html", "HTML超文本标记语言"));
list.add(new Channel("css", "CSS3样式表"));
list.add(new Channel("javascript", "JavaScript脚本"));
}
}
// 实例化ObjectMapper
ObjectMapper mapper = new ObjectMapper();
// 调用 writeValueAsString 将 list集合转为JSON
String json = mapper.writeValueAsString(list);
response.setContentType("application/json;charset=utf-8");
response.getWriter().println(json);
}
}<script>
// 加载一级菜单
const lv1 = document.getElementById("lv1");
axios.get("/channel", {params: {"level": 1}})
.then(function (response) {
let json = response.data;
console.log(json);
for (let i = 0; i < json.length; i ) {
let channel = json[i];
//每次访问接口，都追加内容到select中
// Option 参数1：显示的文字，参数2：为value值
lv1.options.add(new Option(channel.name, channel.code));
}
})
.catch(function (error) {
console.log(error);
});
// 二级菜单
const lv2 = document.getElementById("lv2");
// 被选项发生变化的时候执行
lv1.onchange = function () {
// 参数2：要查询的二级，一级当前code
axios.get("/channel", {
params: {
"level": 2,
"parent": lv1.value
}
})
.then(function (response) {
let json = response.data;
console.log(json);
// 将lv2的长度设置为0，就可以防止叠加数据
lv2.length = 0;
for (let i = 0; i < json.length; i ) {
let channel = json[i];
lv2.options.add(new Option(channel.name, channel.code));
}
})
.catch(function (error) {
console.log(error);
});
}
</script>
