08_register.jsp
基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在
用户名[GET]：
光标移出后，立即检查结果
//创建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;
}
//定位文本框，同时提供焦点失去事件
document.getElementById("usernameID").onblur = function(){
//获取文本框中输入的值
var username = this.value;
//如果用户没有填内容
if(username.length == 0){
//提示
document.getElementById("resID").innerHTML = "用户名必填";
}else{
//对汉字进行UTF-8(U8)的编码
username = encodeURI(username);
//NO1)
var ajax = createAJAX();
//NO2)
var method = "GET";
var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username;
ajax.open(method,url);
//NO3)
ajax.send(null);
//--------------------------------------------------------等待
//NO4)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO5)
var tip = ajax.responseText;
//NO6)
document.getElementById("resID").innerHTML = tip;
}
}
}
}
}
09_register.jsp
基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在
用户名[POST]：
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);
}
}
}
}
package loaderman.user;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在
*/
public class UserServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
String username = request.getParameter("username");
byte[] buf = username.getBytes("ISO8859-1");
username = new String(buf,"UTF-8");
System.out.println("username=" + username);
String tip = "可以注册";
if("杰克".equals(username)){
tip = "该用户已存在";
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write(tip);
pw.flush();
pw.close();
}
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();
}
}Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动