Struts 2+Ajax実装ユーザー名が一意かどうかを検出
12444 ワード
2日間やって、やっとStruts 2フレームワークでAjaxを使ってユーザー名の存在を検出する方法が分かった.确かに、あの大牛たちより、このスピードは遅いですが、结局は达成感がいっぱい出てきましたね.
余談はさておき,本題に戻る.直接コード:
Action:
ここで最初の行のpackageは自分で定義したActionパッケージです.ネット上ではJavaScriptとJSP通信やサーブレット通信の例が多いが,Actionとパラメータを渡す例は少ない.しかし私はJSPに純粋に見せるものを作らせたいと思っています.そしてサーブレットを加えると、元のMVCの明確なアーキテクチャを破壊するので、この点では、自分の堅持が正しいと信じています.
ユーザー名がデータベースに存在するかどうかをどのように検出するかについては、これはeasyの問題であり、ここでは言わないで、私がどのようにアーキテクチャされているのか、他の重要ではない細部、あるいは検索すれば検索できる解釈を重点的に話して、簡潔で要約された原則に基づいて、無視します.
JavaScript:
このコードは、Ajaxユーザー名の検出を実現するために使用される部分です.5-9行目は、ユーザー名が空であることを検出するコードで、よく理解されています.ポイントは後ろの部分です.まず、XMLHttpRequestオブジェクトを作成します.これはAjaxを実装するコア部分であり、それを使用してのみ使用できます.
バックグラウンドにリクエストを送信し、リクエストを送信するには2つのステップに分かれます.接続を開き、リクエストを送信します.
接続を開くにはopenメソッドを使用します.
Openメソッドのプロトタイプopen(「method」,「URL」,[,asyncFlag[,「userName」[,「password]]]]]);
method:POST/GET.この2つの方法の違いは詳しく紹介されず、あちこちで紹介されています.注意しなければならないのは:二重引用符が必要で、私は引用符をつけていないので、半日探してやっと原因を見つけて、汗.
asyncFlag:trueは非同期を表し、一般的にはこれを選択する必要があります.falseは同期を表します.
後続のusernameとpasswordは、いくつかのリモートサービスに専用です.
リクエストを送信するにはsendメソッドを使用します.
send(content);//contentはリクエストパラメータです.一般的には省略できます.
setRequestHeader():送信前にリクエストヘッダを設定します.
onreadystatechangeパラメータは、対応するコールバック関数を設定するために使用されます.
後ろのpressはそのコールバック関数です.
statusに関する様々な解釈はここで省略する.
ここのspanは、ユーザー名入力ボックスの後ろに文を表示するために使用されます.
HTMLコード:
アクション:
実はここのresult部分は、どうでもいいです.前のActionが最後にnullを返すことに注意しているので、なぜnullなのでしょうか.前のJavaScriptセクションでは、responseTextを文字列と比較して異なる効果を生み出すという文があります.
successかinputであれば、ジャンプ後のページ(Welcome.jsp/Register.jsp)をそのまま返します.ここはまた長いこと振り回して、汗.
また、responseTextは文字列だと多くの資料で言われていますが、実際には、文字列の処理方法に完全に従って彼を処理することはできません.最初はequals関数を使っていましたが、反応していませんでしたが、後に==に変更してこそ効果が得られます.
とにかく、九牛二虎の力を費やしてやっとできたので、やはり自分が料理が上手だと思っていますが、自分がきっとできると信じていれば、あなたはきっとできます.困難にぶつかっても焦らないでください.なんとかなりますから.鶏のスープは少しありますが、諸君が覚えておいてください.
次は、Ajaxページングを実現する予定です.
余談はさておき,本題に戻る.直接コード:
Action:
1 package com.bbs.action;
2
3 import javax.servlet.http.HttpServletRequest;
4 import javax.servlet.http.HttpServletResponse;
5 import org.apache.struts2.ServletActionContext;
6
7 import com.bbs.model.*;
8 import com.opensymphony.xwork2.*;
9
10 @SuppressWarnings("serial")
11 public class CheckUser extends ActionSupport {
12 //private String username;
13 public String execute() throws Exception {
14 HttpServletRequest req = ServletActionContext.getRequest();
15 HttpServletResponse res = ServletActionContext.getResponse();
16 String username = req.getParameter("username");
17 res.setContentType("text/html;charset=UTF-8");
18 String responseStr = "";
19 UserDAO udao = new UserMySQLDAO();
20 if (udao.ValiUserByName(username)) {
21 res.getWriter().print("exists");
22 } else {
23 responseStr = " ";
24 res.getWriter().print(responseStr);
25 }
26 return null;
27 } 28 }
ここで最初の行のpackageは自分で定義したActionパッケージです.ネット上ではJavaScriptとJSP通信やサーブレット通信の例が多いが,Actionとパラメータを渡す例は少ない.しかし私はJSPに純粋に見せるものを作らせたいと思っています.そしてサーブレットを加えると、元のMVCの明確なアーキテクチャを破壊するので、この点では、自分の堅持が正しいと信じています.
ユーザー名がデータベースに存在するかどうかをどのように検出するかについては、これはeasyの問題であり、ここでは言わないで、私がどのようにアーキテクチャされているのか、他の重要ではない細部、あるいは検索すれば検索できる解釈を重点的に話して、簡潔で要約された原則に基づいて、無視します.
JavaScript:
1 var req;
2 var span;
3 function Check(field) {
4 span = document.getElementById("result");
5 if(field.value == '') {
6 span.style.color = "red";
7 span.innerHTML=" ";
8 return false;
9 }
10 if(window.XMLHttpRequest) { // IE
11 req = new XMLHttpRequest();
12 }else if(window.ActiveXObject) { // IE
13 req = new ActiveXObject("Microsoft.XMLHTTP");
14 }
15
16 req.onreadystatechange = press;
17 req.open("POST", "http://localhost:8080/BBS/CheckUser?username="+field.value, true);
18 req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
19 req.send("");
20 }
21
22 function press() {
23 if(req.readyState < 4) {
24 span.style.color = "blue";
25 span.innerHTML=" ";
26 }
27 if(req.readyState == 4) {
28 if(req.status == 200) {
29 if(req.responseText == "exists") {
30 span.style.color = "red";
31 span.innerHTML=" ";
32 }else {
33 span.style.color = "green";
34 span.innerHTML=" ";
35 }
36 }
37 }
38 }
このコードは、Ajaxユーザー名の検出を実現するために使用される部分です.5-9行目は、ユーザー名が空であることを検出するコードで、よく理解されています.ポイントは後ろの部分です.まず、XMLHttpRequestオブジェクトを作成します.これはAjaxを実装するコア部分であり、それを使用してのみ使用できます.
バックグラウンドにリクエストを送信し、リクエストを送信するには2つのステップに分かれます.接続を開き、リクエストを送信します.
接続を開くにはopenメソッドを使用します.
Openメソッドのプロトタイプopen(「method」,「URL」,[,asyncFlag[,「userName」[,「password]]]]]);
method:POST/GET.この2つの方法の違いは詳しく紹介されず、あちこちで紹介されています.注意しなければならないのは:二重引用符が必要で、私は引用符をつけていないので、半日探してやっと原因を見つけて、汗.
asyncFlag:trueは非同期を表し、一般的にはこれを選択する必要があります.falseは同期を表します.
後続のusernameとpasswordは、いくつかのリモートサービスに専用です.
リクエストを送信するにはsendメソッドを使用します.
send(content);//contentはリクエストパラメータです.一般的には省略できます.
setRequestHeader():送信前にリクエストヘッダを設定します.
onreadystatechangeパラメータは、対応するコールバック関数を設定するために使用されます.
後ろのpressはそのコールバック関数です.
statusに関する様々な解釈はここで省略する.
ここのspanは、ユーザー名入力ボックスの後ろに文を表示するために使用されます.
HTMLコード:
1 <input id="regusername" type="text" name="username" size="50" maxlength="12" value="" autocomplete="off" onblur="Check(this)"/>
2 <span id = "result"></span>
アクション:
1 <package name="server" namespace="/" extends="struts-default">
2 <action name="CheckUser" class="com.bbs.action.CheckUser">
3 <result name="success">Welcome.jsp</result>
4 <result name="input">Register.jsp</result>
5 </action>
6 </package>
実はここのresult部分は、どうでもいいです.前のActionが最後にnullを返すことに注意しているので、なぜnullなのでしょうか.前のJavaScriptセクションでは、responseTextを文字列と比較して異なる効果を生み出すという文があります.
successかinputであれば、ジャンプ後のページ(Welcome.jsp/Register.jsp)をそのまま返します.ここはまた長いこと振り回して、汗.
また、responseTextは文字列だと多くの資料で言われていますが、実際には、文字列の処理方法に完全に従って彼を処理することはできません.最初はequals関数を使っていましたが、反応していませんでしたが、後に==に変更してこそ効果が得られます.
とにかく、九牛二虎の力を費やしてやっとできたので、やはり自分が料理が上手だと思っていますが、自分がきっとできると信じていれば、あなたはきっとできます.困難にぶつかっても焦らないでください.なんとかなりますから.鶏のスープは少しありますが、諸君が覚えておいてください.
次は、Ajaxページングを実現する予定です.