目录
JavaScript 使用AJAX技术通过POST提交到Servlet，其它代码不变只需改变以下代码
案例说明：重名验证
JavaScript：
使用AJAX技术通过GET提交到Servlet
Servlet代码：
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String username = request.getParameter("username");
boolean used = false;
if (username.equals("ajax")) {
used = true;
}
out.print(used);
out.flush();
out.close();
}JSP代码：
< script type = "text/javascript" >
$(function() {
$("#iu").blur(function() {
alert("a");
//1.创建XMLHttpRequest对象
if (window.XMLHttpRequest) { //判断浏览器类型，true为IE新版浏览器(7+)或其他浏览器
XMLHttpRequest = new XMLHttpRequest();
} else {
XMLHttpRequest = new XMLHttpRequest("Microsoft.XMLHTTP");
}
//2.设置回调函数
XMLHttpRequest.onreadystatechange = callBack;
//3.初始化XMLHttpRequest组件
var username = $("#iu").val();
var url = "logicServlet?username=" + username;
XMLHttpRequest.open("GET", url, true);
//4.发送请求
XMLHttpRequest.send(null);
})
})
//回调callBack函数处理响应结果
function callBack() {
if (XMLHttpRequest.readyState == 4 && XMLHttpRequest.status == 200) {
var data = XMLHttpRequest.responseText;
if (data == true) {
$("#display").text("用户名已存在")
} else {
$("#display").text("用户名可用")
}
}
}
</script>
<body>
<span>查重：</span><input type="text" value="ajaxTest" name="username" id="iu"/><span id=display></span>
</body>JavaScript 使用AJAX技术通过POST提交到Servlet，其它代码不变只需改变以下代码
//3.初始化XMLHttpRequest组件
var url = "logicServlet";
XMLHttpRequest.open("POST", url, true);
XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.发送请求
var username = $("#iu").val();
var data = "username=" + username;
XMLHttpRequest.send(data);JQuery实现AJax技术：
JSP Script页面代码：
< script type = "text/javascript" >
$(function() {
$("#iu").blur(function() {
var username = $(this).val();
$.ajax({
url: "logicServlet",
type: "get",
data: {
"username": username
},
dataType: "text",
success: callBack,
error: function() {
alert("无响应");
}
})
})
})
//回调callBack函数处理响应结果
function callBack(data) {
if (data == true) {
$("#display").text("用户名不可用");
} else {
$("#display").text("用户名可用");
}
}
< /script>