Struts 2+Ajax実装ユーザー名が一意かどうかを検出

12444 ワード

2日間やって、やっとStruts 2フレームワークで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ページングを実現する予定です.