JavaWeb之AJAX
前言
这一节讲JavaWeb之AJAX
1.概述
以前我们在servlet中得到数据，必须通过域给jsp，然后jsp在响应给浏览器
纯html不能获取servlet返回数据
所以我们用jsp
但是现在我们可以同AJAX给返回数据了
我们可以在sevlet中直接通过AJAX返回给浏览器
html中的JavaScript就可以获取数据了
通过静态的html页面和AJAX联合起来，这个比较主流
这样html和AJAX主要由前端来完成就可以了
后面的我们后端来完成
因为jsp要由服务器启动，所以还是要后端来写，无法分工
这个搜索的时候，我们没有刷新，它也会局部刷新，在数据库中打出的这些数据
或者我们输入用户名，鼠标一离开就会显示有没有这个用户
这种局部刷新就是异步
这里的异步就是服务器处理的三秒钟内，我们不用再浏览器等待，我们还可以干其他事情
同步左上角是会刷新的，异步就不会刷新显示出来
这个对于用户来说，没什么感知
2. 快速入门
第一就是后端代码，其余的都是前端代码
这个就是后端代码
Ajax是JavaScript的代码，要写在html里面去
https://www.w3school.com.cn/b.asp
这个网站有相关的教程
异步是默认的，所以可以不用写
这个就是全路径
点的是下一页
但我们这个不能运行出我们想要的结果，可能是第一步创建搞错了
<script>
//1.创建核心对象，不用记，直接复制
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}else{
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.发送请求
xhttp.open("GET", "http://localhost:8080/brand-demo/ajaxServlet");//第二个参数就是你要请求的资源路径，异步的话，资源要写成全路径:http://localhost:8080/brand-demo/ajaxServlet
//因为将来前端就是html+ajax开发了，前端的工程和后端的工程都不在一个服务器上部署，所以访问的话就要写绝对路径了，不要写相对路径了
xhttp.send();
//3.获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// this.responseText;//获取数据，就是我们返回的hello ajax~数据
alert(this.responseText);//在一个弹框里面打印
}
};
</script>
我们这个修改后就可以了
那个servlet的xhr就是异步请求的意思
或者直接点这个上面的XHR,也可以筛选出来我们需要的异步请求
所以所谓AJAX其实也就是JavaScript里面可以获取响应数据的代码
3. 案例-验证用户是否存在
3.1 后端
//1.接收用户名
String username = request.getParameter("username");
//2.调用service查询User对象，，，，，现在还没写service，我们只是模拟一下
boolean flag = true;//相当于用户名存在
//3.响应标记
response.getWriter().write(""+flag);
3.2 前端
注册页面
这个注册页面可以去我的Gitee里面去找
这里我就直接复制了
而且这个不重要
这个就是我们以前的那个页面
我们就可以对这个username绑定一个onblur事件
修改style那里
<script>
//1.给用户名输入框绑定 失去焦点事件
document.getElementById("username").onblur=function(){
//2.发送ajax
//获取用户名的值 这个是给自己的输入框绑定的onblur事件，直接可以this
var username=this.value;
//2.1.创建核心对象，不用记，直接复制
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}else{
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.2.发送请求
xhttp.open("GET", "http://localhost:8080/brand-demo/selectUserServlet?username="+username);//把名字通过get传给servlet
xhttp.send();
//2.3.获取响应-------》获取的是对应servlet的响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
if(this.responseText == "true"){//responseText获取的是字符串
//用户名存在，显示提示信息
document.getElementById("username_err").style.display='';//显示的话，display就是空字符串就可以了
}else{
//用户名不存在，清除提示信息-----》把style的属性设置一下
document.getElementById("username_err").style.display='none';//这个就是设置style为不展示
}
}
};
}
</script>
因为我们后台展示的是true，所以不管我们写什么，都是用户名已存在
光标离开就会发送一次请求，而且请求还是xhr的异步请求
而且这个请求响应的数据还是true
4. Axios异步框架
4.1 基本使用
axios文件也是直接复制就可以了
在创建一个html文件
02-axios-demo.html：
AxiosServlet：
02-axios-demo.html：
<!--引入axios的源码文件-->
<script src="js/axios-0.18.0.js"></script>
<script>
//1.get
axios({
method:"get",
// url就是我们请求的路径，就是servlet的路径 .then就是来获取响应的
url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
}).then(function(resp){
alert(resp.data);//这个就能获取到响应的数据---》hello axios
})
</script>
这样我们就可以了
02-axios-demo.html：
axios({
method:"post",
// url就是我们请求的路径，就是servlet的路径 .then就是来获取响应的
url:"http://localhost:8080/ajax-demo/axiosServlet",
data:"username=zhangsan"
}).then(function(resp){
alert(resp.data);
// //这个就能获取到响应的数据---》hello axios
})
这样就是post的了
这个就要比原生的ajax代码要简化很多
4.2 请求方式别名
axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (res) {
alert(res.data);
})
axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (res) {
alert(res.data);
})
5. JSON
所以我们响应数据都用JSON了
5.1 基本语法
<script>
//定义json
var json={
"name":"zhangsan",
"age":23,
"addr":["北京","上海","西安"]
};
//获取值
alert(json.name);
</script>
5.2 JSON数据和Java对象转换
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.62</version>
</dependency>
下面这个是user对象
测试方法
//1.将Java对象转换为JSON字符串
User user = new User();
user.setId(1);
user.setUsername("zhangsan");
user.setPassword("123");
String jsonString= JSON.toJSONString(user);
System.out.println(jsonString);
User u = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}", User.class);
System.out.println(u);
6. 案例
6.1 查询所有
现在我们导入一个工程
brand.html：
<script>
//1.当页面加载完成之后，发送ajax请求
//创建一个窗口，并添加事件，这个事件是在整个页面加载完成之后，自动加载的
window.onload = function () {
//2.发送ajax请求
axios({
method: 'get',
url:""
}).then(function (resp) {
})
}
</script>
SelectAllServlet：
//1.调用service查询
List<Brand> brands = brandService.selectAll();
//2.将集合转换为JSON数据 序列化
String jsonString = JSON.toJSONString(brands);
//3.响应数据
response.setContentType("text/json;charset=utf-8");//处理中文
response.getWriter().write(jsonString);
测试一下
brand.html:
测试一下
因为原来的表格一旦完成就马上执行这个了，所以看不到原来的表格
<script src="js/axios-0.18.0.js">
</script>
<script>
//1.当页面加载完成之后，发送ajax请求
//创建一个窗口，并添加事件，这个事件是在整个页面加载完成之后，自动加载的
window.onload = function () {
//2.发送ajax请求
axios({
method: 'get',
url:"http://localhost:8080/brand1-demo/selectAllServlet"
}).then(function (resp) {
//获取数据，遍历数组
let brands = resp.data;//这个就是数组,,,,,也是JSON数据 直接点加Data名称就可以获得数据
let tableData=" <tr>\n" +
" <th>序号</th>\n" +
" <th>品牌名称</th>\n" +
" <th>企业名称</th>\n" +
" <th>排序</th>\n" +
" <th>品牌介绍</th>\n" +
" <th>状态</th>\n" +
" <th>操作</th>\n" +
" </tr>";
for (let i = 0; i < brands.length; i++) {
let brand = brands[i];//放入表格里面去
tableData+=" <tr align=\"center\">\n" +
" <td>"+(i+1)+"</td>\n" +
" <td>"+brand.brandName+"</td>\n" +
" <td>"+brand.companyName+"</td>\n" +
" <td>"+brand.ordered+"</td>\n" +
" <td>"+brand.description+"</td>\n" +
" <td>"+brand.status+"</td>\n" +
"\n" +
" <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
" </tr>";
}
document.getElementById("brandTable").innerHTML=tableData;//设置表格数据
})
}
</script>
6.2 新增品牌
addBrand.html：
AddServlet：
测试一下
这样就说明了getParameter方法无法获取JSON的数据格式
这个不能接受JSON数据格式，，因为这个是把字符串按照&和等号切割的，JSON是没有的，{brandName: “华为”}，它长这个样子
//1.接收数据
// String brandName = request.getParameter("brandName");//这个不能接受JSON数据格式，，因为这个是把字符串按照&和等号切割的，JSON是没有的，{brandName: "华为"}，它长这个样子
// System.out.println(brandName);
//获取请求体数据
BufferedReader br = request.getReader();
String params = br.readLine();//因为json只有一行
//将JSON字符串转为Java对象
Brand brand= JSON.parseObject(params, Brand.class);
System.out.println(brand);
//2.调用service添加
brandService.add(brand);
//3.响应成功标识
response.getWriter().write("success");
addBrand.html：
最后就是Data那里，数据必须是真实的
现在开始处理一下表单的数据—》转为JSON
<script src="js/axios-0.18.0.js">
</script>
<script>
// <!-- 我们不需要正常提交表单了，---》直接一个普通的按钮就可以了，不用submit按钮了，因为我们要的是异步的，
// 传递的是异步的请求格式，，所以不需要指定action，因为指定了action，就会url变-->
// 1.给按钮绑定单击事件
document.getElementById("btn").onclick = function () {
//点击提交按钮，数据都填了----->document.getElementById("brandName").value--->就是获取brandName你填写的值
// var formData={
// brandName:document.getElementById("brandName").value,
// companyName:document.getElementById("companyName").value,
// ordered:document.getElementById("ordered").value,
// description:document.getElementById("description").value,
// status:document.getElementById("status").value,
// }
//或者这样
var formData={
brandName:"",
companyName:"",
ordered:"",
description:"",
status:""
}
let brandName=document.getElementById("brandName").value;//获取数据
formData.brandName=brandName;//设置数据
let companyName=document.getElementById("companyName").value;//获取数据
formData.companyName=companyName;//设置数据
let ordered=document.getElementById("ordered").value;//获取数据
formData.ordered=ordered;//设置数据
let description=document.getElementById("description").value;//获取数据
formData.description=description;//设置数据
// let status=document.getElementById("brandName").value;//获取数据
// formData.brandName=brandName;//设置数据
//但是status没有id，状态是禁用还是启用？,它有两个标签的--》一次性获取两个标签，哪个被选中了就是谁
let status=document.getElementsByName("status");
for(let i=0;i<status.length;i++){
if(status[i].checked){//表示这个被选中了{
formData.status=status[i].value;
}
}
console.log(formData);//把这个打印到控制台上
//2。发送ajax请求
axios({
method: 'post',
url:"http://localhost:8080/brand1-demo/addServlet",
data:formData
}).then(function (resp) {
//判断响应数据是否为success,如果是说明添加成功，并跳回展示页面
if(resp.data =="success"){
location.href="http://localhost:8080/brand1-demo/brand.html";
}
})
}
</script>
总结
下一节讲Vue
Gitee