Ajaxテクノロジーによる認証コードのローカルリフレッシュと検証
14519 ワード
まずどうでもいいことを話しましょう.2つの知識点です.
(1)Jsを用いる検証コードをローカルにリフレッシュする方法は,ページにimgタグを付け,src属性をservletまたは.jspは検証コードピクチャを要求し、htmlコードは以下の通りである.
<img src="ImageServlet" onclick="refresh(this)"/>一般的に1回のページをリフレッシュすると、検証コードピクチャも1回変更されますが、検証コードピクチャが変更されたときにページ全体、すなわちローカルリフレッシュの効果をリフレッシュしないことを望んでいる場合があります.コードは以下の通りです.
jsコード:
<
script type="text/javascript">
function refresh(obj){
obj.src="ImageServlet?id="+Math.random();
}
</script>ここで、要求パスにはパラメータ(パラメータ名は任意に定義可能)が必要であり、パラメータ値は固定値ではなく乱数であることに注意してください.
コード内のobjオブジェクトとはimgラベルオブジェクトを指す.
(2)画像を取得するImageServiceletコードは以下の通りである.
package servlet;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;
/**
* Servlet implementation class ImageServlet
*/
public class ImageServlet extends HttpServlet {
//
private static final String CHARS = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ";
static Random random = new Random();
//
private String getRandomString() {
StringBuffer buffer = new StringBuffer();
for (int i = 0; i < 4; i++) { //
buffer.append(CHARS.charAt(random.nextInt(CHARS.length())));}
return buffer.toString();
}
//
public static Color getRandomColor() { //
return new Color(random.nextInt(128) + 127, random.nextInt(128) + 127,random.nextInt(128) + 127);
}
public static Color getReverseColor(Color c) { //
return new Color(255 - c.getRed(), 255 - c.getGreen(),
255 - c.getBlue());
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("image/jpeg"); //
//
String randomString = getRandomString();
// getSession（） true， null
request.getSession(true).setAttribute("randomString", randomString);
// 、
int width = 80;
int height = 30;
Color bcolor = getRandomColor(); //
Color fcolor = getReverseColor(bcolor); //
//
BufferedImage bimage = new BufferedImage(width, height,
BufferedImage.TYPE_INT_BGR);
// , bimage ， bimage
Graphics2D g = bimage.createGraphics();
// , ，20
g.setFont(new Font("Vijaya", Font.BOLD, 20));
//
g.setColor(bcolor);
g.fillRect(0, 0, width, height);
//
g.setColor(fcolor);
for (int i = 0; i < randomString.length(); i++) {
//
g.drawString(randomString.charAt(i) + "", 10 + i * 12, 22);
}
//
for (int i = 0, n = random.nextInt(100); i < n; i++) {
g.fillRect(random.nextInt(width), random.nextInt(height), 1, 1);
}
//
ServletOutputStream outstream = response.getOutputStream();
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(outstream);
encoder.encode(bimage);
outstream.flush();
outstream.close();
}
}
コアのAjaxテクノロジーについて説明します.
従来のWebページのサービスはhttpプロトコルに基づいているため、「リクエスト-レスポンス」のパターンは永遠に変更されません.クリックするたびにページ全体をリフレッシュしなければなりません.これは、サーバーがすべてのページのデータを転送することを意味します.クリックしても、ページの1行10文字の内容を変更する必要があります.AJAXコードはブラウザとサーバーの間で実行され、プログラミングによってajaxコードはサーバーから変更する必要があるデータだけを抽出することができ、ページの変更する必要がある部分だけを変更することができます:divレイヤ、テーブルのセル.ユーザーはページがすべてリフレッシュされたのを見ません.ajaxテクノロジーを使用すると、ユーザがリクエストを送信すると(クリックイベント)ajaxコードに渡され、ユーザリクエストが完了する.AJAXコードは、その後、要求をサーバに送信し、サーバからの応答が返されると、AJAXコードは、ユーザの操作フローに関係なく、返された業務更新ページの一部である.
一般的な例として、重複ユーザ名があるかどうかを即時検証するAJAXアプリケーションを例に、AJAX作成の基本手順を説明します.
1.ユーザがユーザ名を入力すると、フォーカスが入力ボックスから離れ、すなわち、jsによって記述されたajaxコードが呼び出され、ユーザ入力がサーバ検証に送信され、サーバから返された結果メッセージが入力ボックスの下のdivレイヤに表示される.
このプロセスは3つの部分で構成されます.
login.html:ユーザーがユーザー名を記入するページ:
CheckUserNameServlet.JAva:サーバ上でユーザー名を検証するために使用されるサーブレットは、結果として文字列を返します.
Jsが作成したAJAXコード:リクエストを送り、ページを更新してください
AJAX第一歩:XMLHTTPRequestオブジェクトの作成;
XMLHTTPRequestは、サーバに要求を送信するためにjsによって呼び出され、サーバから返されたデータを非同期で受信した後、ローカルページを更新するAJAXアプリケーションのコアAPIです.AJAX機能を使用する場合は、まずjsにXMLHTTPRequestオブジェクトを作成します.
<script type="text/javascript">
// XMLHttpRequest
var request;
// XMLHttpRequest
function getRequestObject() {
if (window.ActiveXObject) {
request=new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
request=new XMLHttpRequest();
} else {
window.alert(" XMLHTTPRequest， AJAX ！");
}
}
</script>このスクリプトでgetRequestObject関数が呼び出されると、XMLTTPRequestオブジェクトが作成されます.その中のif判断に注意して、この世界はまだ平らではありませんため、IEとFireFoxは違いがあります;1番目のifは、IEブラウザであれば、MSの要求対象を呼び出し、2番目は、ブラウザがFireFox、Netscapeの場合に有効であると判断する.もちろん、最後には本当にだめだったので、ユーザーに游ぶことができないと伝えました.
AJAX第二歩:コールバック方法の作成;
次に、XMLHTTPRequestオブジェクトがサーバにリクエストを送信した後、サーバが返した結果をどのように処理すべきか、すなわちAJaxのコールバック方法を考慮します.この処理ロジックを実現する前に、ページのhtmlコードを見てみましょう.
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>AJAX @NetJava.cn</title>
</head>
<body>
<br> :<input type="text" name="userName"/>
<!-- div ajax -->
<div id=divErrorName" style="color:red;"></div>
<br> :<input type="password" name="userPWD"/>
<br><input type="button" name="regUser" value=" "/>
</body>
</html>コールバックメソッドを実装するロジックは簡単です.CheckUserNameServletです.JAvaというサーブレットが返すメッセージはdivErrorNameという名前のdivに表示されます.次のコードがあります.
// : div
function processResult() {
if ((request.readyState == 4) &&
(request.status == 200)) {
//1.
alert(" : "+request.responseText);
//
document.getElementById("divErrorName").innerHTML=request.responseText;
}
}上記のコードでは、if判断文がキーであり、要求オブジェクトのreadyState属性値が要求オブジェクトの現在の状態を表し、4の場合、自分の処理が完了することを表す.statusはhttp応答コードで、200はサーバ応答OKを表し、404なら?
要求オブジェクトが処理済みであれば,サーバから返される応答コードもOKであり,要求オブジェクトのresponseText属性値はサーバがクライアントに返すテキスト内容を表す.
AJAXステップ3:非同期要求の送信
AJAXが送信したリクエストもHTTPプロトコルで送信されていることを明確に知っておく必要があります.これはajaxがgetまたはpostリクエストを送信することもできることを意味します.次のコードを参照してください.
function sendRequest() {
// XMLHTTPRequest
getRequestObject();
// ，
request.onreadystatechange=processResult;
//
// request.open("GET", "index.jsp", true);
// Post
request.open("POST", "servlet/CheckUserNameServlet", true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var userName=document.getElementById("userName").value;
// userName
request.send("userName="+userName);
}CheckUserNameサーブレットコードは次のとおりです.
public class CheckUserNameServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
String userName = request.getParameter("userName");
System.out.println(" "+username);
PrintWriter out = response.getWriter();
if(userName.equals("newer")){
out.write(" ");
}else{
out.write(" ");
}
out.flush();
}
}完全なhtmlページの完全なコードは以下の通りです.
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>AJAX @NetJava.cn</title>
</head>
<body>
<script type="text/javascript">
// XMLHttpRequest
var request;
// XMLHttpRequest
function getRequestObject() {
if (window.ActiveXObject) {
request=new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
request=new XMLHttpRequest();
} else {
window.alert(" XMLHTTPRequest， AJAX ！");
}
}
// : div
function processResult() {
if ((request.readyState == 4) &&
(request.status == 200)) {
//1.
alert(" : "+request.responseText);
//
document.getElementById("divErrorName").innerHTML=request.responseText;
}
}
// ,
function sendRequest() {
// XMLHTTPRequest
getRequestObject();
// ，
request.onreadystatechange=processResult;
//
// request.open("GET", "index.jsp", true);
// Post
request.open("POST", "servlet/CheckUserNameServlet", true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var userName=document.getElementById("userName").value;
// userName
request.send("userName="+userName);
}
</script>
<br> :<input type="text" name="userName" onBlur="sendRequest();"/>
<!-- div ajax -->
<div id="divErrorName" style="color:red;"></div>
<br> :<input type="password" name="userPWD"/>
<br><input type="button" name="regUser" value=" "/>
</body>
</html>4,上のAjax三部作を通して、今検証コードの更新と検証に戻ります
1,ページ実装:
<%@ page language="java" contentType="text/html; utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
<script>
function createXMLHttpRequest() {
// ie, ns,firefox
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function validate(field) {
var div=document.getElementById("divbid");
if (field.value.length != 0) {
// XMLHttpRequest
createXMLHttpRequest();
var url="codevalidate.jsp?authcode=" + field.value;
//alert(url);
xmlHttp.open("GET", url, true);
// ， ，
xmlHttp.onreadystatechange=function() { //
if(xmlHttp.readyState == 4) { //Ajax
if (xmlHttp.status == 200) { //http
document.getElementById("divbid").innerHTML =xmlHttp.responseText;
}else {
alert(" ， =" + xmlHttp.status);
}
}
};
// Ajax
xmlHttp.send(null);
}else {
div.innerHTML="<div class=\"wrong\"> </div>"
}
}
function refresh(obj){
obj.src="ImageServlet?id="+Math.random();
}
</script>
</head>
<body>
<form action="codevalidate.jsp" method="post" name="loginform">
： <input type="text" name="userName"/><br/>
：<input type="text" name="authcode" id="authcode" maxlength="4" size="10" onblur="validate(this)" ><div id="divbid"></div>
<img src="ImageServlet" onclick="refresh(this)"><br/>
<input type="submit" value=" ">
</form>
</body>
</html>2,ImageServiceletは画像を取得し、コードは本書の開始箇所を参照する.
3,サーバーはAjax要求に対してどのように処理したのですか?すなわちcodevalidate.jsp:
<%@ page language="java" import="java.util.*,java.util.*,java.text.*" pageEncoding="UTF-8"%>
<%
String authcode=request.getParameter("authcode");
String randomString=(String)session.getAttribute("randomString");
if(authcode.equalsIgnoreCase(randomString)){
out.println("<div class='right'> </div>");}
else{
out.println("<div class='wrong'> </div>");}
%>