Ajaxの非同期ページ・アップデート（ネイティブJavaScriptを使用して）

まず、ページコード

<！DOCTYPE HTML > 
< HTML > 
< ヘッド> 
< タイトル> MyHtml.html </ タイトル> 

< メタ名= "キーワード" コンテンツ= "KEYWORD1、KEYWORD2、KEYWORD3" > 
< メタ名= "説明" コンテンツ= "これが私のページです" > 
< メタ名="コンテンツタイプ」コンテンツ= "text / htmlの;のcharset = UTF-8" > 

< 身体> 
    < 表>
        
            TD >ログイン：</ TD > 
            < TD > < 入力ID = "ユーザ名" タイプ= "テキスト" 名前= "ログイン" > </ TD > 
        </ TR > 
        < TR > 
            < TD >パスワード：</ TD > 
            < TD > < 入力タイプ= "パスワード" 名前= "パスワード" ID = "パスワード" > </ TD > 
        </ TR >
        < TR > 
            < TDCOLSPAN = "2" > < 入力タイプ= "送信" > </ TD > 
        </ TR > 
    </ テーブル> 
</ ボディ> 
</ HTML >

二つは、JavaScriptコード

ます。<script type = "text / javascriptの">
     のvar XMLHTTP。
    $（ドキュメント）.ready（関数（）{ 
        $（ "#username"）からkeyup（。関数（）{
             VARの値= $（この）.val（）; 

            XMLHTTP = createXMLHttp（）;
             VARの？URL =「ユーザ名MyServlet1 =」+ 値; 
            xmlHttp.openが（ "" GET、URL、真）; 
            xmlHttp.onreadystatechange = コールバック; 
            xmlHttp.send（NULL ）; 
        }）; 
    }）; 

    関数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;のcharset = 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-pattern > /ページ/ MyServlet1 </ のurl-pattern > 
  </ のservlet-mapping >

注意：これはパスページのhtmlページの設定です

Ajaxの非同期ページ・アップデート（ネイティブJavaScriptを使用して）

おすすめ