아약스 비동기 페이지 업데이트 (기본 자바 스크립트를 사용하여)

첫째, 페이지 코드

<! DOCTYPE HTML > 
< HTML > 
< 머리 > 
< 제목 > MyHtml.html </ 제목 > 

< 메타 이름 = "키워드" 내용 = "KEYWORD1, KEYWORD2, KEYWORD3은" > 
< 메타 이름 = "설명" 내용 = "이 내 페이지 " > 
< 메타 이름 ="Content-Type을 " 콘텐츠 ="text / html과; 문자셋 = UTF-8 " > 

< 본문 > 
    < 표 >
        
            TD > 로그인 : </ TD > 
            < TD > < 입력 ID = "사용자 이름" 유형 = "텍스트" 이름 = "로그인" > </ TD > 
        </ TR > 
        < TR > 
            < TD > 암호 : </ TD > 
            < TD > < 입력 타입 = "비밀번호" 이름 = "비밀번호" ID = "비밀번호" > </ TD > 
        </ TR >
        < TR > 
            < TD열 결합 = "2" > < 입력 타입 = "제출" > </ TD > 
        </ TR > 
    </ 테이블 > 
</ 바디 > 
</ HTML >

 

두, 자바 스크립트 코드

<스크립트 유형 = "텍스트 / 자바 스크립트">
     var에 XMLHTTP; 
    $ (문서) .ready ( 함수 () { 
        $ ( "#username")의 keyup (. 함수 () {
             var에 값 = $ ( 이 ) .val (); 

            XMLHTTP = createXMLHttp ();
             var에 ? URL = "MyServlet1 이름 = "+ 값] 
            xmlHttp.open는 ( " "GET, URL 에 해당 ) 
            xmlHttp.onreadystatechange = 콜백; 
            xmlHttp.send ( 널 ) 
        }) 
    }); 

    기능createXMLHttp () {
         var에 XMLHTTP;
        경우 (window.XMLHttpRequest) { 
            XMLHTTP = 새로운 XMLHttpRequest 객체 (); 
        } 다른 { 
            XMLHTTP = 새로운 ActiveXObject ( "에서는 Microsoft.XMLHTTP" ); 
        } 
        반환 XMLHTTP를; 
    } 

    VAR의 콜백 = 함수 () { 

        경우 (xmlHttp.status의 == 200 && xmlHttp.readyState == 4 ) {
             VAR의 결과 = xmlHttp.responseText;
            경우 (결과 == "已使用" )
                $ ( . "#username") CSS ( "국경 컬러", "빨간색" );
            다른 
                $ ( "#username") CSS ( "국경 컬러", "녹색". ); 
        } 다른 { 
            경고 ( "出错" ); 
        } 
    }
 </ script>

 

세, 서블릿 코드

패키지 com.yh.myServlet; 

수입 때 java.io.IOException;
가져 오기 를 java.io.PrintWriter; 

수입 javax.servlet.ServletException;
수입 인 javax.servlet.http.HttpServlet;
수입 나오는 javax.servlet.http.HttpServletRequest;
수입 의 javax.servlet.http.HttpServletResponse; 

공공  클래스 MyServlet1가 확장 HttpServlet을 {
 
    개인  정적  최종  오래 = 1L를의 serialVersionUID를 ; 

    @Override 
    보호  공극 의 doGet (HttpServletRequest의 요청에 응답하고 HttpServletResponse) 슬로우ServletException을 IOException을 {
         // TODO 자동 생성 방법 스텁 
        response.setContentType ( "텍스트 / HTML; 문자셋 = UTF-8" ); 
        아웃의 PrintWriter = ) (response.getWriter 단계; 
        문자열의 userName = request.getParameter ( "이름" ); 
        에서 System.out.println (사용자 이름); 
        경우 (userName.equals ( "YH" )) { 
            out.print ( "已의使用" ); 
        } 다른 { 
            out.print ( "可의使用" ); 
        } 
    } 
}

 

넷째, 구성 서블릿

  < 서블릿 > 
      < 서블릿 이름 > MyServlet1 </ 서블릿 이름 > 
      < 서블릿 클래스 > com.yh.myServlet.MyServlet1 </ 서블릿 클래스 > 
  </ 서블릿 > 
  
  < 서블릿 매핑 > 
      < 서블릿 이름 > MyServlet1 </ 서블릿 이름 > 
      < URL 패턴 > / 페이지 / MyServlet1 </ URL 패턴 > 
  </ 서블릿 매핑 >

참고 :이 경로 페이지 HTML 페이지의 설정입니다