先引入jar包:javaee-api-7.0.jar
1java的servlet代码
@WebServlet("/testuname")
public class TestServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//指定编码方式
response.setContentType("test/html;charset=utf-8");
//1接收参数
String username = request.getParameter("username");
System.out.println(username);
//输出到页面的方法
PrintWriter writer = response.getWriter();
if ("admin".equals(username)){
//表示前端输入的用户名和数据库中的用户名重复,不可用
writer.println("账户已被注册");
}else {
writer.println("账户可用");
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
get请求发送AJAX,get
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<script type="text/javascript">
function test() {
//发送异步请求
//1创建XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest) {
//非IE
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//是IE浏览器
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
//2打开连接
var uname = document.getElementById("uname").value;
//get请求发送AJAX
xmlHttp.open("get",
"${pageContext.request.contextPath}/testuname?username="+uname,true);
/*这里的true表示我通过异步的方式发送请求*/
//3指定回调函数
xmlHttp.onreadystatechange = function () {
//3.1判断状态
if (xmlHttp.readyState == 4) {
//3.2接收服务器返回的数据
var responseTest = xmlHttp.responseText;
document.getElementById("rs").innerText = responseTest;
}
}
//4发送数据
/*get发送数据的send方法*/
xmlHttp.send();
}
</script>
<body>
username:<input type="text" id="uname" onblur="test()"><span id="rs"></span>
<%--onblur:失去焦点事件,当文本框失去焦点后,会调用test()方法--%>
<%--span里面放的就是给用户的提示信息--%>
</body>
</html>
post方式发送AJAX
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<script type="text/javascript">
function test() {
//发送异步请求
//1创建XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest) {
//非IE
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//是IE浏览器
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
//2打开连接
var uname = document.getElementById("uname").value;
/*post请求发送AJAX*/
xmlHttp.open("post", "${pageContext.request.contextPath}/testuname", true);
/*注意get需要在请求中发送参数,post是在send方法里面发送数据*/
//3指定回调函数
xmlHttp.onreadystatechange = function () {
//3.1判断状态
if (xmlHttp.readyState == 4) {
//3.2接收服务器返回的数据
var responseTest = xmlHttp.responseText;
document.getElementById("rs").innerText = responseTest;
}
}
//4发送数据
/* post发送数据的请求信息和send方法*/
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send("username=" + uname);
}
</script>
<body>
username:<input type="text" id="uname" onblur="test()"><span id="rs"></span>
<%--onblur:失去焦点事件,当文本框失去焦点后,会调用test()方法--%>
<%--span里面放的就是给用户的提示信息--%>
</body>
</html>
jquery实现AJAX
需要先导入jquery的js文件:jquery-1.8.0.min.js
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#uname").blur(function () {
//1获得value值
var uname = $(this).val();
//2发送请求
/*发送请求的第一种方法*/
/*$.ajax({
url:"${pageContext.request.contextPath}/testuname",
data:"username="+uname,
type:"post",
dataType:"text",
success:function (rs) {
$("#rs").html(rs);
}
});
*/
/*发送请求的第2.1种方式 get请求,比第一种方法简单*/
/* $.get("${pageContext.request.contextPath}/testuname","username="+uname,function (rs) {
$("#rs").html(rs);
})*/
/*发送请求的第2.2种方式 post请求,比第一种方法简单*/
$.post("${pageContext.request.contextPath}/testuname","username="+uname,function (rs) {
$("#rs").html(rs);
})
})
})
</script>
<body>
<h1>jquery_ajax.jsp</h1>
username:<input type="text" id="uname"><span id="rs"></span>
<%--要使用jquery就要添加js文件:jquery-1.8.0.min.js--%>
</body>
</html>