简单的Ajax案例
运行效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d78c97a4b3604a8c5d817358d8c7d272.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a12a13c921c7417d2168f0b58355cb50.png)
前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>AAA</title>
<script>
function sendAjax(){
// 1. 核心对象 xhr 发送异步请求 处理请求响应
if(window.ActiveXObject){
// IE IE
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else {
// webkit chrome safiri opera ff IE7+
var xhr = new XMLHttpRequest();
}
// 2. 初始化 请求方式 请求地址 请求参数
xhr.open("get","${pageContext.request.contextPath}/ajax?username="+document.getElementById("uname").value);
// 3. 发送
xhr.send();
// 4. 接收响应
// xhr.readyState 0=未初始化 1=初始化 2=已发送 3=开始接收到响应 4=响应的所有内容接收完毕
xhr.onreadystatechange=function(){
if(xhr.readyState ==4 ){
// 要响应
var ret = xhr.responseText;
// DOM 将响应内容 刷新到页面的某个局部上
document.getElementById("msg").innerHTML=ret;
}
}
}
</script>
</head>
<body>
<input type="text" id="uname"><span id="msg"></span><br>
<input type="button" value="send_ajax" onclick="sendAjax();">
</body>
</html>
后端servlet
@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter("username");
System.out.println("username:"+username);
// 响应
/**
* 不再需要一个完整的页面,需要一个字符串
*/
resp.setCharacterEncoding("utf-8");
if("zhangsan".equals(username)){
resp.getWriter().write("用户名重复");
}else{
resp.getWriter().write("用户名可用");
}
resp.getWriter().close();
}
}