Java
进阶篇

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


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

# 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


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

← 动态网页-JSP 前端项目工程化→