Javaweb基础知识复习------AJAX
AJAX相关知识复习
简而言之，就是可以用AJAX+HTML代替JSP页面，也可以进行异步交互，更新部分界面
Ajax案例
后端代码就是一个servlet文件，前端页面的代码也不是很常用，可以在下面这个网址这里找到相关代码：https://www.w3school.com.cn/js/js_ajax_intro.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//发送请求
xhttp.open("GET", "http://localhost:8080/ttCookieLogin_war_exploded/ajaxServlet");
xhttp.send();
//获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
</script>
</body>
</html>
相关的创建核心对象、发送请求、获取响应的代码操作在上述网址中均能找到！
AJAX案例------验证用户是否存在
后端代码：
//selectUserServlet.java
package org.example.web.Ajax;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class selectUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username=req.getParameter("username");
boolean flag=true;
resp.getWriter().write(""+flag);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req,resp);
}
}
<!--register.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
</head>
<body>
<center>
<tr>
已有账号？<a href="index.jsp">登录</a>
</tr>
<form action="registerServlet" method="post">
<tr>
<td>用户名：</td>
<td><input type="text" id="username" name="username" placeholder="请输入用户名"></td>
<br>
<div id="errorUsername">${register_msg}</div>
</tr>
<p>
<tr>
<td>密码：</td>
<td><input type="text" name="password" placeholder="请输入密码"></td>
</tr>
<p>
<tr>
<td>验证码：</td>
<td>
<input name="checkCode" id="checkCode" type="text">
</td>
<td><img src="checkServlet" id="checkCodeImg"></td>
<td><a href="#" id="changeImg">看不清？</a></td>
</tr>
<p>
<tr>
<button type="submit" value="提交">提交</button>
</tr>
</form>
<script>
document.getElementById("changImg").onclick=function(){
document.getElementById("checkCodeImg").src="/ttCookieLogin/checkServlet?"+new Date().getMilliseconds();
}
</script>
</center>
<script>
//点击事件
document.getElementById("username").onblur=function(){
var username=this.value;
//创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//发送请求
xhttp.open("GET", "http://localhost:8080/ttCookieLogin_war_exploded/ajaxServlet?username="+username);
xhttp.send();
//获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//alert(this.responseText);
//判断
if(this.responseText=="true"){
document.getElementById("errorUsername").style.display='';
}else{
document.getElementById("errorUsername").style.display='none';
}
}
};
}
</script>
</body>
</html>
核心代码在此：
