Ajax
Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
Ajax 通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 传统的网页(不使用 Ajax) 如果需要更新内容,必须重载整个网页页面。
应用场景
- 在线视频、直播平台等…评论实时更新、点赞、小礼物、…
- 会员注册时的信息验证,手机号、账号唯一
- 百度关键搜索补全功能
https://www.w3school.com.cn/xmldom/dom_http.asp
# 原生方式实现 Ajax
实现步骤
定义一个 XMLHttpRequest 核心对象
通过核心对象.open 方法给当前对象提供访问方式、URL 等
发送当前的请求至指定的 URL
接收返回值并处理
# 案例 - 页面局部刷新
需求:前台页面通过一个按钮向后台发送一个 Ajax 请求,后台做完处理后向前台页面响应一段文本信息显示在页面上。
<html>
<head>
<title>Title</title>
<script type="text/javascript">
function testJsAjax(){
//1. 创建核心对象
var xmlhttp = new XMLHttpRequest();
//2. 通过核心对象方法给当前的对象提供访问方式和 URL 路径
xmlhttp.open("GET","jsAjax?name=liuyan",true);
//3. 发送当前的请求至指定的 URL
xmlhttp.send();
//4. 接收返回值并处理
xmlhttp.onreadystatechange=function(){
//xmlhttp.readyState==4 代表 XMLHttpRequest 对象读取服务器的响应结束
//xmlhttp.status==200 响应成功
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var msg = xmlhttp.responseText;
document.getElementById("msg").innerHTML=msg;
}
}
}
</script>
</head>
<body>
<div id="msg"></div>
<input type="button" name="btn" value="JS 原生方式实现异步" onclick="testJsAjax()">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/jsAjax")
public class JsAjaxServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
// 获取名称
String name = request.getParameter("name");
System.out.println(name);
// 响应
response.getWriter().write("响应成功");
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# jQuery
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单
中文手册:https://jquery.cuishifeng.cn/
官方宣言:用更少的代码完成更多工作
随着 JavaScript 版本的不断更新,以前需要使用 jQuery 的地方,现在使用原生 JavaScript 或者 CSS 也能够快速的实现。所以 jQuery 在逐渐的退出历史舞台
# 案例 - 校验用户名
<html>
<head>
<title>Title</title>
<script src="./js/jquery-3.3.1.js"></script>
<script>
$(function(){
$("#uname").blur(function(){
var uname = $("#uname").val();
// 判断用户名不为空
var req = /^\s*$/;
if(req.test(uname)){
$("#msg").html("用户名不能为空").css("color","red");
return;
}
// 发送 ajax 请求
$.ajax({
url:"${pageContext.request.contextPath}/ckeckUsername",
data:{"uname":uname},
type:"post",
dataType:"text",
success:function(obj){
// 判断
if(obj){
$("#msg").html("该用户名已被占用").css("color","red");
}else{
$("#msg").html("该用户名可用").css("color","green");
}
}
})
})
})
</script>
</head>
<body>
<p>
用户名:<input type="text" id="uname" name="uname">
<span id="msg"></span>
</p>
<p>
<input type="button" value="注册">
</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/ckeckUsername")
public class CheckUsernameServlet extends HttpServlet {
@Override
public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String uname = request.getParameter("uname");
Boolean flag;
// 判断
if("liuyan".equals(uname)){
flag = true;
}else{
flag = false;
}
// 响应
response.getWriter().print(flag);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28