一、认识Ajax
前端技术,Ajax(异步的 JavaScript 和 XML)。在不刷新页面的前提下,进行页面的局部更新。Ajax的核心对象是 XMLHttpRequest
。
二、使用案例
案例运行图:
这是一个 加载按钮
如果点击,会在不跳转页面的情况下加载出数据。如下:
案例代码:
服务器类
@WebServlet("/content")
public class ContentServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().println("<b style='color:red'>i'm server~~</b>");
}
}
客户端
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//按钮
<input id="btnLoad" type="button" value="加载">
//服务器返回数据,显示的区域
<div id="divContent"></div>
<script>
// 绑定单击事件
document.getElementById("btnLoad").onclick = function (){
1、创建XMLHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else {
//老版浏览器
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
}
console.log("XMLHttpRequest:",xmlhttp)
2、发送Ajax请求
//创建请求
xmlhttp.open("GET","/Content")
//发送到服务器
xmlhttp.send();// 上面两个方法 是相辅相成的
3、处理服务器响应
//onreadystatechange()用于监听Ajax的执行过程
xmlhttp.onreadystatechange = function (){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
//获取响应体的文本
var t = xmlhttp.responseText
console.log(t)
//对服务器结果进行处理
document.getElementById("divContent").innerHTML = document.getElementById("divContent").innerHTML+"<br/>"+ t;
}
}
}
</script>
</body>
</html>
案例总结: Ajax 使用流程分为三步:
1、创建XMLHttpRequest对象
2、发送Ajax请求
3、处理服务器响应
三、Ajax与JSON的前后台交互案例
原理图:
案例代码:
服务器代码
@WebServlet("/content")
public class NewsServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<News> list = new ArrayList();
list.add(new News("标题", "发布的时间", "来源", "正文"));
list.add(new News("标题1", "发布的时间", "来源", "正文"));
list.add(new News("标题2", "发布的时间", "来源", "正文"));
list.add(new News("标题3", "发布的时间", "来源", "正文"));
==============================================================================
上面模仿的是 从数据库提取出来的记录
想把当前的list 转换成JSON字符串然后返回
ObjectMapper 由jackson提供的核心类
==============================================================================
ObjectMapper objectMapper = new ObjectMapper();
// 将传入对象,转换JSON字符串
String json = objectMapper.writeValueAsString(list);
resp.setContentType("text/json;charset=utf-8");
//响应JSON字符串
resp.getWriter().println(json);
}
} 此处用到了Jackson组件,需要Pom文件加入该依赖
客户端代码01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="rongQi"></div>
<script>
var xmlhttp;
// 创建XmlHttpRequst对象
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 str = xmlhttp.responseText;
console.log(str);
// 获取字符串后,转换成JSON对象
var json = JSON.parse(str);
console.log(json);
//对数据进行渲染.........
for (var i =0; i < json.length; i++){
var n = json[i];
var x = document.getElementById("rongQi");
x.innerHTML = x.innerHTML + n.title;
}
}
}
</script>
</body>
</html>
四、Ajax与JSON的前后台交互 Pro+
axios
它是前端的,要使用该组件需要 添加axios文件。就像添加Jquery一样。
为什么要使用它?
客户端发个请求,还需要创建XmlHttpRequst对象,还要处理服务器响应,很麻烦。
案例代码:
服务器端不用变,因为axios是前端的东西
客户端的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
引入axios的文件
<script src="/js/axios.js"></script>
</head>
<body>
<div id="rongQi"></div>
<script>
1、发送请求到 /news {} 是可代的参数 JSON形式书写
//axios.post('/news', "x=xxxx",{headers:{"content-type":"application/x-www-form-urlencoded"}})
axios.get('/news', {})
2、接收响应并处理
//当服务器成功返回响应后会执行 ()里的方法。response代表从服务器返回的对象
.then(function (response) {
//通过response对象,可以拿到服务器返回的数据
console.log(response);
//获取的数据进行渲染........
var json = response.data;
for (var i =0; i < json.length; i++){
var n = json[i];
var x = document.getElementById("rongQi");
x.innerHTML = x.innerHTML + n.title;
}
})
//当服务器响应出现异常时,走这下面的代码块
.catch(function (error) {
console.log(error);
})
</script>
</body>
</html>