Ajax ― 비동기 적 으로 사용자 이름 에 예제 가 있 는 지 확인 합 니 다.

모든 사이트 에 가입 할 때 사용자 가 이미 존재 하 는 지 확인 합 니 다.아주 오래 전의 처리 방식 은 모든 데 이 터 를 서버 에 제출 하여 검증 하 는 것 이 었 는데 이런 방식 의 사용자 체험 이 매우 좋 지 않 은 것 이 분명 하 다.나중에 Ajax 가 생 겨 서 비동기 적 인 상호작용 이 생 겼 습 니 다. 사용자 가 사용자 이름 을 잃 고 다른 정 보 를 계속 작성 할 때 Ajax 는 서버 에 메 시 지 를 보 내 서 이 사용자 이름 이 이미 등록 되 었 는 지 확인 합 니 다. 그러면 사용자 이름 이 이미 존재 한다 면 사용자 가 모든 데 이 터 를 제출 하지 않 아 도 알림 을 줄 수 있 습 니 다.이런 방식 을 채택 하여 사용자 체험 을 크게 개선 하 였 다.
regist.jsp

 
  
pageEncoding="UTF-8"%> 
  
 
  
 
  
 
  
 
  
 
  
 
  <br>var xmlHttp; 
  <br>//  Ajax    XMLHttpRequest 
  <br>function createXMLHttp(){ 
  <br>if(window.XMLHttpRequest){ 
  <br>xmlHttp = new XMLHttpRequest(); 
  <br>}else{ 
  <br>xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
  <br>} 
  <br>} 
  <br>function checkUsername(username){ 
  <br>createXMLHttp(); 
  <br> 
  <br>//       GET，     URL，        
  <br>xmlHttp.open("GET","CheckServlet?username="+username,true); 
  <br> 
  <br>//        onreadystatechange   
  <br>//        
  <br>xmlHttp.onreadystatechange = checkUsernameCallback(); 
  <br>//        Ajax   
  <br>xmlHttp.send(null); 
  <br>} 
  <br>function checkUsernameCallback(){ 
  <br>//Ajax        
  <br>if(xmlHttp.readyState == 4){ 
  <br>//HTTP        
  <br>if(xmlHttp.status == 200){ 
  <br>var text = xmlHttp.responseText; 
  <br>if(text == "true"){ 
  <br>document.getElementById("msg").innerHTML = "       ，    ！"; 
  <br>}else{ 
  <br>document.getElementById("msg").innerHTML = "        "; 
  <br>} 
  <br>} 
  <br>} 
  <br>} 
  <br> 
  
 
  
 
  
 
  
   :
 
  
    :
 
  
 
  
 
  
 
  
 
  
 
  
 
 

CheckServlet.java

 
  
public class CheckServlet extends HttpServlet { 
  
private static final long serialVersionUID = 1L; 
  
public static final String DBDRIVER = "com.microsoft.sqlserver.jdbc.SQLServerDriver"; 
  
public static final String DBURL = "jdbc:sqlserver://localhost:1433;DatabaseName=bbs"; 
  
public static final String DBUSER = "sa"; 
  
public static final String DBPASS = "pass"; 
  
 
  
public CheckServlet() { 
  
super(); 
  
} 
  
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  
this.doPost(request, response); 
  
} 
  
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  
request.setCharacterEncoding("UTF-8"); 
  
response.setContentType("text/html"); 
  
Connection conn = null; 
  
PreparedStatement pst = null; 
  
ResultSet rs = null; 
  
PrintWriter out = response.getWriter(); 
  
String username = request.getParameter("usernaem"); 
  
try{ 
  
Class.forName(DBDRIVER); 
  
conn = DriverManager.getConnection(DBURL,DBUSER,DBPASS); 
  
String sql = "select count(username) from user where username=?"; 
  
pst = conn.prepareStatement(sql); 
  
pst.setString(1,username); 
  
rs = pst.executeQuery(); 
  
if(rs.next()){ 
  
if(rs.getInt(1)>0){//         
  
out.print("true"); 
  
}else{ 
  
out.print("false"); 
  
} 
  
 
  
} 
  
}catch(Exception e){ 
  
e.printStackTrace(); 
  
}finally{ 
  
try{ 
  
conn.close(); 
  
}catch(Exception e){ 
  
e.printStackTrace(); 
  
} 
  
} 
  
} 
  
}