什么是ajax异步请求
同步请求的流程
而ajax响应的不在是地址或网页，而是一个数据。 在那里发送请求数据就响应到哪里。
ajax使用的场景
ajax不会刷新整个页面，只会更新页面的部分内容。ajax服务器返回的是数据。而不是页面了。
了解: js+html+css+servlet
ajax异步请求的流程
什么是同步和异步
效率高。网络发达---访问量增加。
如何完成ajax异步请求。
- 可以自己写js代码完成----复杂度太高。
- 借助第三方封装的插件。----jquery插件。---axios插件
引入jquery插件
<%--引入jquery插件文件 src:jquery文件所在的路径--%>
<script type="text/javascript" src="/js/jquery.min.js"></script>
触发事件函数
<%--onclick:点击事件。--%>
<button onclick="aaa()">点击</button>
<script>
//自定义函数
function aaa(){
//通过ajax发送异步请求。
//$.get(url,data,fn)
//url:请求服务器的地址 data:请求服务器携带的数据 fn:服务器响应后触发的函数
$.get("/HelloServlet",{"name":"刘德华","age":18},function(result){//服务器响应后触发该函数，并把服务器响应的数据传递给result变量。
alert(result);//弹出服务器响应的数据
})
}
</script>
HelloServlet
@WebServlet("/HelloServlet")
public class HelloServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String name = req.getParameter("name");
String age = req.getParameter("age");
System.out.println("name===="+name+";age====="+age);
PrintWriter out = resp.getWriter();//获取输出对象
out.print("hello world"); //响应ajax数据
out.flush();//刷新out对象
out.close();//关闭out对象。
}
}
案例
注册时，判断当前注册的账号是否可用。
<%--
Created by IntelliJ IDEA.
User: ldh
Date: 2024/9/25
Time: 10:31
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script>
function checkName(){
//获取输入框对象
var inputName = document.getElementById("uname");
//获取输入框的值
var name=inputName.value;
$.get("/AjaxServlet",{"name":name},function(result){
//根据id查询span标签
var elementById = document.getElementById("msg");
//显示在该标签内
elementById.innerHTML=result;
})
}
</script>
</head>
<body>
<form action="" method="post">
<%--onblur:失焦事件--%>
账号:<input type="text" name="uname" id="uname" onblur="checkName()"/><span id="msg"></span><br>
密码:<input type="password" name="upwd"/><br>
<input type="submit" value="立即注册"/>
</form>
</body>
</html>
Servlet
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8"); //请求的编码
resp.setCharacterEncoding("utf-8");//响应编码
String name = req.getParameter("name");
PrintWriter out = resp.getWriter();
//判断该账号是否在数据库存在
if("admin".equals(name)){
out.println("<font color='red'>该账号已存在，请换个账号。</font>");
}else{
out.println("<font color='green'>该账号可用</font>");
}
out.flush();
out.close();
}
}
响应的数据类型
我们刚才服务响应的内容都是文本内容。我们服务器可以响应如下的数据类型。
- 文本类型----默认ajax处理的就是文本类型。
- json数据类型----重点【响应json类型】
- xml数据类型。-- 人工智能才会返回这种数据。
<?xml version="1.0" encoding="UTF-8"?>
<name>张三</name>
<age>19</age>
json数据
JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON
是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。
//json对象
{"key":value,"key":value...}
//json对象集合
[
{"key":value,"key":value...},
{"key":value,"key":value...},
....
]
规则如下:
1）映射用冒号（“：”）表示。名称:值
2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2
3） 映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}
4） 并列数据的集合（数组）用方括号(“[]”)表示。
[
{名称1:值,名称2:值2},
{名称1:值,名称2:值2}
]
5 元素值可具有的类型：string, number, object, array, true, false, null
6. 调用json对象中数据: 对象名.key
<script>
//{开始 }结尾 key必须使用""括起来。 value如果是字符串”“，如果是整形，则不用”“。
var p={"name":"张三","age":19} //json对象
// alert(p.name)
//json对象集合
var ps=[
{"name":"张三","age":19},
{"name":"李四","age":20},
{"name":"王五","age":21}
]
//显示json对象集合的name
for(var i=0;i<ps.length;i++){
alert(ps[i].name+"------------>"+ps[i].age)
}
</script>
如何让服务器响应这种数据
前端
后端
使用封装的jar完成json的
第三方公司就封装一个jar。该jar中提供了很多类完成java转换成json对象。
public static void main(String[] args) {
User user=new User("闫",19);
String s = JSON.toJSONString(user);//把一个java对象转换为json对象
System.out.println(s); //版本太高
List<User> list=new ArrayList<>();
list.add(new User("李",18));
list.add(new User("戴",18));
list.add(new User("左",18)); //[{"name":"李","age":18},{},{}]
String s1 = JSON.toJSONString(list);
System.out.println(s1);
}
综合案例
Ajax请求所有用户数据，把服务器响应的数据以表格的形式展示
<%--
Created by IntelliJ IDEA.
User: ldh
Date: 2024/9/25
Time: 15:25
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="/js/jquery.min.js"></script>
</head>
<%--onload:表示页面加载完毕后执行的js函数. onclick点击事件 onblur失焦事件 onl oad页面加载事件--%>
<body onl oad="loadUser()">
<table border="1" cellspacing="0" cellpadding="0" width="500" align="center" >
<tr>
<th>编号</th>
<th>账号</th>
<th>密码</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tbody id="userTable">
</tbody>
</table>
</body>
<script>
function loadUser() {
// 使用jQuery的get方法发送GET请求到"/UserServlet"，回调函数处理返回的结果
$.get("/UserServlet", function (result) {
// 获取页面上id为"userTable"的表格元素
var userTable = document.getElementById("userTable");
// 用于动态生成表格内容的字符串变量
var str = "";
// 遍历结果集，生成表格的每一行内容
for (let i = 0; i < result.length; i++) {
// 开始拼接一个表格行
str += "<tr>";
// 拼接用户ID单元格
str += "<td>" + result[i].id + "</td>";
// 拼接用户名单元格
str += "<td>" + result[i].username + "</td>";
// 拼接用户密码单元格
str += "<td>" + result[i].password + "</td>";
// 拼接用户真实姓名单元格
str += "<td>" + result[i].realname + "</td>";
// 拼接包含删除按钮的单元格
str += "<td><button onclick=''>删除</button></td>";
// 完成一个表格行的拼接
str += "</tr>";
}
// 将拼接好的字符串设置为表格的innerHTML，动态更新表格内容
userTable.innerHTML=str;
}, "json"); // 指定返回数据类型为json
}
</script>
</html>
UserServlet
private void selectAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<User> users = userDao.selectAll();//获取数据库中所有的用户
//把java集合对象转换为json集合对象
String json = JSON.toJSONString(users);
//获取输出对象
PrintWriter out = resp.getWriter();
out.println(json);
//刷新输出对象
out.flush();
//关闭输出对象
out.close();
}