【九月打卡】第十天 Ajax&Json
课程信息
● 学习课程：Java工程师2022版
● 章节名称：Ajax&Json
● 讲师：八戒猪
课程内容
1.Asynchronous JavaScript And XML(异步的JavaScript和XML)
Ajax可以在不刷新页面的前提下，进行页面局部更新
2.Ajax使用流程
XMLHttpRequest是Ajax的核心,Ajax使用该对象发起请求，接受响应
xmlhttp.onreadystatechange()事件用于监听Ajax的执行过程
xmlhttp.readyState属性说明XMLHttpRequest当前状态 readyState=4响应文本已被接收
xmlhttp.status属性服务器响应状态码,200成功，404未找到
<body>
<input id="btnLoad" type="button" value="加载"/>
<div id="divContent"></div>
<script>
document.getElementById("btnLoad").onclick = function() {
//1.创建XmlHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
// Google、Opera、Safari、Firefox、IE7+浏览器
xmlhttp = new XMLHttpRequest();
}esle {
// IE6、IE7浏览器
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.发送Ajax请求
xmlhttp.open("GET","/content");
xmlhttp.send();
// 3.处理服务器响应
xmlhttp.onreadystatechagne=function(){
//响应已被接收且服务器处理成功时才执行
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//获取响应体的文本
var responseText = xmlhttp.responseText;
//对服务器结果进行处理
document.getElementById("divContent").innerHTML=
document.getElementById("divContent").innerHTML + "<br/>"+ responseText;
}
}
}
</script>
</body>
JSON接收
JavaScript Object Notation(JavaScript对象表示方式）
JSON是轻量级的文本数据交换格式
数据由键(key)/值(value)描述，由冒号分割
大括号代表一个完整的对象，拥有多个键/值
中括号保存数组，多个对象之间使用逗号分割
3.JavaScrip操作Json
<script>
for(var i =0;i<employeeList.length; i++){
var employee = employeeList[i];
console.log(employee)
document.write("<h1>");
document.write(employee.empno)
document.write("</h1>");
}
</script>
jackJson
在pom文件中引入jackson依赖，重新加载之后会在External Libraries中下载三个依赖文件。
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.3</version>
</dependency>
代码中关于json序列化的代码只有两句
// JSON的核心对象
ObjectMapper objectMapper = new ObjectMapper();
// 将对象转化为JSON字符串，即序列化
String json = objectMapper.writeValueAsString(list);
resp.setContentType("text/json;charset = utf-8");
resp.getWriter().println(json);
书写html前端代码，关键语句为获取servlet响应，然后将JSON字符串转换为java对象。
var t = xmlhttp.responseText;
var json = JSON.parse(t);
Ajax组件库axios
axios发送Get请求相关代码
<script>
axios.get('/news', {
params: {
"t": "baidu"
}
}).then(function (response) {
console.log(response);
//这时会自动转换为json对象
var json = response.data;
for (var i = 0; i < json.length; i++) {
var news = json[i];
var container = document.getElementById("container");
container.innerHTML = container.innerHTML + "<h2>" + news.title + "</h2>";
}
})
.catch(function (error) {
console.log(error);
});
</script>
axios发送Post请求相关代码
//以面向对象的方式
const params = new URLSearchParams();
params.append('t', 'baidu');
axios.post('/news', params )
// axios.post("/news", "t=google",{ headers: { "content-type": "application/x-www-form-urlencoded"}} )
.then(function (response) {
console.log(response);
//这里获取的数据已经是java对象了
var json = response.data;
for (let i = 0; i < json.length; i++) {
let news = json[i];
//每次点击加载按钮，都追加内容到div中
document.getElementById("container").innerHTML = document.getElementById("container").innerHTML + "<h1>" + news.title + "</h1>";
}
})
.catch(function (error) {
console.log(error);
});
Ajax同步与异步的区别
同步是在服务器为返回JSON前，JS程序一直处于阻塞等待的状态
异步是在服务器未返回JSON前，不阻塞程序，Ajax通过回调获取结果
Ajax设置同步后，send()方法发出后，无论是否阻塞，onreadystatechange设置的事件都会失效。所以去掉onreadystatechange事件，原先这个事件中的响应处理函数直接顺序写即可
xmlhttp.open("GET", "/news?t=google",false);//设置同步方式发送请求
xmlhttp.send();
console.log("请求数据已经发送");
// 3.处理服务器响应。
// xmlhttp.onreadystatechange = function () { //同步请求方式不再需要这个事件触发
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var t = xmlhttp.responseText;
var json = JSON.parse(t);
for (let i = 0; i < json.length; i++) {
let news = json[i];
//每次点击加载按钮，都追加内容到div中
document.getElementById("container").innerHTML = document.getElementById("container").innerHTML + "<h1>" + news.title + "</h1>";
}
}
//}
学习收获
学习 Ajax(异步的JavaScript和XML) ，Ajax的使用流程，创建XMLHttpRequst对象，创建请求，发送请求，处理响应
JSON轻量级数据格式,Ajax+JSON开发模式，Ajax同步与异步的区别
打卡截图
共同学习，写下你的评论
评论加载中...
作者其他优质文章
