js/ajax.js
//創建AJAX異步對象，即XMLHttpRequest
function createAJAX(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e1){
try{
ajax = new XMLHttpRequest();
}catch(e2){
alert("你的瀏覽器不支持ajax，請更換瀏覽器");
}
}
return ajax;
}09_register.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基於HTML，以GET或POST方式，檢查註冊用戶名是否在數據庫中已存在</title>
<!-- 引入外部js文本 -->
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<body>
用戶名[POST]：<input id="usernameID" type="text" maxlength="4"/>
<span id="resID">
<!--
<img src="tip變量" width="12px" height="12px"/>
-->
</span>
<hr/>
<script type="text/javascript">
document.getElementById("usernameID").onblur = function(){
var username = this.value;//傑克
//NO1)
var ajax = createAJAX();
//NO2)
var method = "POST";
var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
ajax.open(method,url);
//設置AJAX請求頭爲POST，他會將請求體中的漢字自動進行UTF-8的編碼
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
//NO3)
var content = "username=" + username;
ajax.send(content);
//===========================================等待
//NO4)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO5)
var tip = ajax.responseText;
//NO6)
//創建img標籤
var imgElement = document.createElement("img");
//設置img標籤的src/width/height的屬性值
imgElement.src = tip;
imgElement.style.width = "12px";
imgElement.style.height = "12px";
//定位span標籤
var spanElement = document.getElementById("resID");
//清空span標籤中的內容
spanElement.innerHTML = "";
//將img標籤加入到span標籤中
spanElement.appendChild(imgElement);
}
}
}
}
</script>
</body>
</html>public class UserServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
System.out.println("username=" + username);
String tip = "images/MsgSent.gif";
if("傑克".equals(username)){
tip = "images/MsgError.gif";
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write(tip);
pw.flush();
pw.close();
}
}