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事件，直接可以thisvar 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传给servletxhttp.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.getaxios({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>//定义jsonvar 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