ケースが必要：ユーザーがログインしたときに、コードモジュールのユーザログインページを作成する確認コードを入力して非同期AJAXを使用して、サーバは、検証要求確認コードを送信し、送信ボタンをクリックする必要はありません。コードが正しければ確認コード入力エラーは、ユーザーに促す場合、あなたは、送信ボタンをクリックすることができます。あなたは、コードが表示された場合、また新しいコードをリフレッシュすることができ、検証コードをクリックしてください。
ケースの実現：
コードの原則：ページ要求サーブレットコード検証、これはクライアントへの画像の形式のデータ、および文字列の形式でセッションに格納されたデータをサーブレット・します。ユーザー標準入力画像が確認コードに対応する検証サーブレットを検証するために使用される対応するコードを送信すると、確認コードサーブレットは、ユーザ入力データを受信し、認証するためにセッションから対応する文字コードを削除します。
●検証サーブレットの定義は、クライアントコードに送信します。次のように詳細なコードは次のとおりです。
パッケージcom.xdl.servlet。
輸入com.sun.image.codec.jpeg.JPEGCodec;
輸入com.sun.image.codec.jpeg.JPEGImageEncoder。
輸入javax.servlet.ServletException;
輸入javax.servlet.annotation.WebServlet;
輸入javax.servlet.http.HttpServlet。
インポートのjavax.servlet.http.HttpServletRequest;
インポートのjavax.servlet.http.HttpServletResponse;
輸入javax.servlet.http.HttpSession。
インポート持つjava.awt。*;
輸入java.awt.image.BufferedImage。
インポートにjava.io.IOException;
インポートにjava.io.OutputStream;
java.util.Randomのインポート。
@WebServlet（ "/チェックコード"）
パブリッククラスチェックコードはHttpServletを拡張{
公共ボイドサービス（HttpServletRequestのリクエスト、
HttpServletResponseの応答）ServletExceptionが、IOExceptionが{スロー
response.setContentType（ "画像/ JPEG"）。
BufferedImageのイメージ=新しいBufferedImageの
（60、20、BufferedImageのTYPE_INT_RGB。）。
グラフィックG = image.getGraphics（）。
ランダムはr =新しいランダム（）;
g.setColor（新色（r.nextInt（255）、r.nextInt（255）、r.nextInt（255）））;
g.fillRect（0、0、60、20）。
g.setColor（新色（0,0,0））;
列番号= String.valueOf（r.nextInt（99999））。
HttpSessionのセッション=でrequest.getSession（）;
session.setAttribute（ "番号"、数）。
g.drawString（数、5、15）。
g.setColor（新色（r.nextInt（255）、r.nextInt（255）、r.nextInt（255）））;
g.drawLine（r.nextInt（60）、r.nextInt（20）、r.nextInt（60）、r.nextInt（20））。
OutputStreamのOS = response.getOutputStream（）。
JPEGImageEncoderエンコーダ= JPEGCodec.createJPEGEncoder（OS）。
encoder.encode（画像）。
}
}
●サーブレットの精度を検証するために使用されるコードの定義。次のように詳細なコードは次のとおりです。
パッケージcom.xdl.servlet。
インポートにjava.io.IOException;
輸入てjava.io.PrintWriter;
輸入java.util.HashMapを;
輸入java.util.Map;
輸入javax.servlet.ServletException;
輸入javax.servlet.annotation.WebServlet;
輸入javax.servlet.http.HttpServlet。
インポートのjavax.servlet.http.HttpServletRequest;
インポートのjavax.servlet.http.HttpServletResponse;
輸入net.sf.json.JSONObject;
@WebServlet（ "/ validateCheckCode"）
パブリッククラスValidateCheckCodeはHttpServletを拡張{
保護された、ボイドサービス（HttpServletRequestのリクエスト、
HttpServletResponseの応答）ServletExceptionが、IOExceptionが{スロー
response.setContentType（ "テキスト/ HTML;のcharset = UTF-8"）;
文字列コード= request.getParameter（「コード」）。
文字列の答え=（文字列）でrequest.getSession（）のgetAttribute（ "番号"）;
地図<文字列、オブジェクト>情報=新しいHashMapの<>（）;
もし（code.equals（答））{
info.put（ "状態"、1）;
info.put（ "MSG"、 "正しい認証コード"）。
}他{
info.put（ "状態"、0）;
info.put（ "MSG"、 "不正認証コード"）。
}
文字列jsonStr = JSONObject.fromObject（情報）.toString（）;
PrintWriter PW = response.getWriter（）。
pw.write（jsonStr）。
pw.close（）;
}
}
●ユーザー名の入力ボックスを含む書き込みクライアントページは、パスワードボックス、および認証コードの入力ボックスと送信ボタンを入力してください。次のように詳細なコードは次のとおりです。
<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>タイトル</ TITLE>
ます。<script type = "text / javascriptの" SRC = "JS / jqueryの - 3.3.1.js"> </ SCRIPT>
ます。<script type = "text / javascriptの">
機能validCode（）{
$アヤックス（{
URL： 'validateCheckCode'
タイプ：「ポスト」
データ：{コード：$（ "＃コード"）のval（）}、
データ型：「JSON」
成功：関数（メッセージ）{
IF（message.state == 1）{
$（ "＃のloginBtn"）removeAttr（ "無効"）。
}他{
$（ "＃のloginBtn"）のattr（ '無効'、 '無効'）。
}
$（ "＃のSP1"）HTML（message.msg）。
}
}）;
}
関数changeCode（）{
$（ "＃のimgcode"）のattr（ "SRC"、 "checkCode.do?r =" + Math.random（））;
$（ "＃のloginBtn"）のattr（ '無効'、 '無効'）。
}
</ SCRIPT>
</ head>の
<身体>
アカウント：の<input type = "text" プレースホルダ= "アカウントを入力してください" 名前= "ACCOUNT_NO"> <BR>
パスワード：<入力タイプ=「パスワード」プレースホルダ=名=「ACCOUNT_PASSWORDを」「あなたのパスワードを入力してください」>
<BR>
验证码：の<input type = "text" の名= "check_code" ID = "コード" プレースホルダ= "请输入验证码" のonblur = "validCode（）"> <IMG SRC = "checkCode.do" ID = "imgcode" onclickの= "changeCode（）"> <BR>
<スパンID = "SP1"> </ span>の<BR>
<input type = ID = "loginBtn" の値を "送信" = "登录" 無効= "無効">
</ BODY>
</ HTML>
// localhostを：8080 /チェックコード/ login.htmlと現在のコードの全てが完了書かれている、我々は、Tomcatサーバ、ブラウザの種類にhttpを開きます。図2に示すように、ブラウザのページが表示されます。
この時点でのログインボタンをクリックすることはできません、私たちのコードが確認されていないため、我々は今、正しいコードを入力し、認証コードの入力ボックスをマウスを移動します。
图2 login.html
3正しいPINを入力してください
私たちは、正しいコードを入力すると、サーバはまたによって検証されてきた、そして今、私たちは、ログインボタンをクリックすることができます。
今、私たちは効果がページに表示されるかを確認するために、間違ったコードを入力してください。
あなたはログインボタンがクリックできない、サーバーのチェックが合格しない、我々は間違ったコードを入力したことがわかります。
時々、私たちは上記のコードは、あなたがCAPTCHAをクリックすると、クリックイベントを追加するためにCAPTCHA画像のリンク先ページではので、良いことができないではない明確な、認識可能な文字であるページ、ページは、Ajaxを再利用しますコードを更新するために、サーバーへの新しい要求を送信します。
図4の入力エラーコード、コードヒント
AJAXは、サーバにコードを再取得使用して図5
正しくないと着陸ボタンがクリックできません