Ajax
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
首先我们给出jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript">
function createXMlHttpRequest(){
return new XMLHttpRequest();
}
window.onload = function () {
var userEle = document.getElementById("uesernameEle");
userEle.onblur = function () {
var xmlHttp = createXMlHttpRequest();
xmlHttp.open("POST","<c:url value="/B"/> ",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("username="+userEle.value);
xmlHttp.onreadystatechange = function () {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var text = xmlHttp.responseText;
var span = document.getElementById("errSpan");
if(text == "1"){
span.innerHTML = "用户名已经被注册";
}else{
span.innerHTML = "用户名可用";
}
}
}
};
}
</script>
</head>
<body>
<form action="" method="post">
用户名: <input type="text" name="username" id="uesernameEle" /> <span id="errSpan"></span>
<input type="submit" value="提交"/>
</form>
</body>
</html>
接下来给出servlet代码块
@WebServlet(name = "B", urlPatterns = "/B")
public class Servlet2 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String name = request.getParameter("username");
if(name.equalsIgnoreCase("a")){
response.getWriter().print("1");
}else {
response.getWriter().print("0");
}
}
}本次校验非常简单，仅仅是对用户名是否为A进行校验，当输入框中输入内容后失去焦点，则调用js函数，对servlet发送请求，进行处理，如果是名字为”A”，则servlet发送响应内容为“1”，否则为“0”。然后在js中，对响应内容进行判断，如果是“1”，则表示用户名已被注册。如果内容为其他（本次只有“1”和“0”），则表示用户名可用，并在”span”标签中显示相应的提示，效果如下：
1945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
