Asynchronous JavaScript And XML：异步的JavaScript和XML
AJAX 可以实现在不刷新页面的前提下，进行页面的局部刷新。在 web 开发领域非常流行，但是 AJAX 不是 w3c 的标准。
Servlet：
@WebServlet("/ajaxServlet")
public class AJAXServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().println("<h1>欢迎访问本站</h1>");
}
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
<!-- 要实现的效果是点击“加载”按钮，服务器传来的文本会显示在div中-->
<input type="button" id="btn" value="加载">
<div id="div1"></div>
<script>
document.getElementById("btn").onclick = function (){
// 1. 创建核心对象：XmlHttpRequest 下面的都是标准代码
let xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
//IE6以前的浏览器这样写
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2. 发送Ajax请求
//open方法可以设置请求方式、请求地址、异步还是同步
xmlHttp.open("GET","/ajax/ajaxServlet",true);
xmlHttp.send();
// 3. 处理服务器响应
xmlHttp.onreadystatechange = function (){
//判断请求和响应是否成功
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
let text = xmlHttp.responseText;
let div1 = document.getElementById("div1");
div1.innerHTML = text;
}
}
}
</script>
</body>
</html>
同步是按照顺序一个一个来，不会乱掉，更不会出现上面代码没有执行完就执行下面的代码。缺点是解析的速度没有异步的快。
异步是接取一个任务，直接给后台，再接下一个任务，一直一直这样，谁的先读取完先执行谁的。缺点：没有顺序，谁先读取完先执行谁的，会出现上面的代码还没出来下面的就已经出来了，会报错。
核心对象：XMLHttpRequest
用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
打开链接：open(method,url,async)
method：请求的类型 GET 或 POST。
url：请求资源的路径。
async：true(异步) 或 false(同步)。
发送请求：send(String params)
params：请求的参数(POST 专用)。
处理响应：onreadystatechange
readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪。
status：200-响应已全部 OK。
获得响应数据形式
responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。
核心语法：$.get(url,[data],[callback],[type]);
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form autocomplete="off">
姓名：<input type="text" id="username">
<span id="uSpan"></span>
<br>
密码：<input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.为用户名绑定失去焦点事件
$("#username").blur(function () {
let username = $("#username").val();
//2.jQuery的GET方式实现AJAX
$.get(
//请求的资源路径
"userServlet",
//请求参数
"username=" + username,
//回调函数
function (data) {
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//响应数据形式
"text"
);
});
</script>
</html>
servlet：
package com.example.ajax;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
if(username.equals("zhangsan")){
response.getWriter().println("<font color=‘red‘>用户名已经被注册</font>");
}else{
response.getWriter().println("<font color=‘green‘>用户名可以使用</font>");
}
}
}
核心语法：$.post(url,[data],[callback],[type]);
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form autocomplete="off">
姓名：<input type="text" id="username">
<span id="uSpan"></span>
<br>
密码：<input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.为用户名绑定失去焦点事件
$("#username").blur(function () {
let username = $("#username").val();
//2.jQuery的POST方式实现AJAX
$.post(
//请求的资源路径
"userServlet",
//请求参数
"username=" + username,
//回调函数
function (data) {
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//响应数据形式
"text"
);
});
</script>
</html>
核心语法：$.ajax({name:value,name:value,…});
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form autocomplete="off">
姓名：<input type="text" id="username">
<span id="uSpan"></span>
<br>
密码：<input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.为用户名绑定失去焦点事件
$("#username").blur(function () {
let username = $("#username").val();
//2.jQuery的通用方式实现AJAX
$.ajax({
//请求资源路径
url:"userServletxxx",
//是否异步
async:true,
//请求参数
data:"username="+username,
//请求方式
type:"POST",
//数据形式
dataType:"text",
//请求成功后调用的回调函数
success:function (data) {
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//请求失败后调用的回调函数
error:function () {
alert("操作失败...");
}
});
});
</script>
</html>
原文：https://www.cnblogs.com/yellowchives/p/15202961.html