Ajaxの非同期ページ・アップデート（jQueryのを使用して）

まず、ページコード

<！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 >

 

二、jQueryのコード

//导入のjQuery
ます。<script type = "text / javascriptの" SRC = "../ JS / jqueryの-1.8.3.min.js "> </ SCRIPT> 
ます。<script type =" text / javascriptの"> 
    $（ドキュメント） .ready（関数（）{ 
        $（ "#username"）からkeyup（関数（）{
             VARの値= $（この）.val（）;
             VARの strData = "ユーザ名=" + 値; 

             $アヤックス（{ 
                URL： "MyServlet1" 、
                種類： "取得" 、
                 // データ：{ "ユーザ名"：値}、// JSON格式
                データ：strData、
                データ・タイプ ："テキスト" 、
                成功：関数（データ、strStatus、XHR）{
                     場合（データ== "已使用" ）
                        $（ "#username"）、CSS（ "ボーダー色"、 "赤"。 ）。
                    他の
                        $（ "#username"）、CSS（ "ボーダー色"、 "緑"。）; 
                }、
                エラー：関数（XHR、strStatus、STRERROR）{ 
                    アラート（STRERROR）。
                } 
            }）。
        }）; 
    }）; 
</ 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ページの設定です