Struts2+ajax Implementing asynchronous validation

Due to the teacher assignment needs, when adding the administrator, to implement the validation of the added administrator's username is already in the database, and then the client to the user a hint. The first thing I think of is the use of Ajax to implement asynchronous authentication technology, because of the use of the SSH framework, so in this to struts2 and Ajax integration, because I have not summed up some of the Ajax knowledge, so do not mention that the Ajax details will be written in the future blog. Now, let's just do this. Add an administrator to verify that the administrator's username exists to say this Struts2+ajax implements asynchronous authentication techniques.

First, let's look at our form form:

[HTML]View Plaincopyprint?

2. <TD>
4. User name
6. </td>
8. <TD>
10. <input type="text" name= "admin.username" value= ""
12. Onblur="Checkusername (This, ' adminaction!exists ')" />
14. </td>
16. <TD>
18. <span id= "namemessage" style="color:red;" ></span>
20. </td>
22. </tr>
24. <tr bgcolor="#d6fdd0">
26. <TD>
28. Password
30. </td>
32. <TD>
34. <input type="password" name= "admin.password" value= "" />
36. </td>
38. <TD>
40. <span></span>
42. </td>
44. </tr>

[JavaScript]View Plaincopyprint?

2. <script type="Text/javascript" >
4. var xmlhttprequest = null; //Declare an empty object to receive the XMLHttpRequest object
6. function checkusername (field, URL) {
8. var uername = Field.value;
10. if (Uername = = "" | | Uername.length < 3) {
12. document.getElementById ("Namemessage"). InnerHTML = "User name should be no less than 3 bits";
14. Return
16. } Else {
18. if (window. ActiveXObject) //IE browser
20. {
22. XMLHttpRequest = new ActiveXObject ("Microsoft.XMLHTTP");
24. } Else if (window. XMLHttpRequest) //Other browser implementations other than IE
26. {
28. XMLHttpRequest = new XMLHttpRequest ();
30. }
32. if (null! = XMLHttpRequest) {
34. When using the Get method to access the server side with parameters, directly after the "Ajaxservlet" parameter, the following send method is a parameter null can be, with the Post method this must be added to the parameters in the send parameter, as follows
36. Xmlhttprequest.open ("Get", url+"? admin.username=" +uername, true);
38. A callback function that associates Ajax well
40. Xmlhttprequest.onreadystatechange = Ajaxcallback;
42. Really send data to the server side
44. Use post to submit, you must add the following line, the Get method does not have to add this sentence
46. Xmlhttprequest.setrequestheader ("Content-type",
48. "application/x-www-form-urlencoded");
50. Xmlhttprequest.send (null);
52. }
54. }
56. }
58. function Ajaxcallback () { //ajax a request will change four times, so we will be working on the fourth time (i.e. the end of a request) OK,
60. if (xmlhttprequest.readystate = = 4) { //request succeeded
62. if (Xmlhttprequest.status = = 200) {
64. var responsetext = Xmlhttprequest.responsetext;
66. document.getElementById ("Namemessage"). InnerHTML = ResponseText;
68. }
70. }
72. }
74. </script>

Through the above comments I think you should be able to understand some of the content, we first go to verify that the content is empty, if it is empty to the user to prompt. If not empty then go to judge the current browser, and then according to the browser to set the XMLHttpRequest object, XMLHttpRequest object is what? The XMLHttpRequest object is used in the background to exchange data with the server object, his main role:

· Update a Web page without reloading the page

· Request data from the server after the page has been loaded

· Receiving data from the server after the page has been loaded

· Sending data to the server in the background

XMLHttpRequest is the core object of Ajax, and it has several important methods or properties:
Open (): establishes a new request to the server.

Send (): Sends a request to the server.

Abort (): Exits the current request.

ReadyState: Provides the ready state of the current HTML.

ResponseText: The request response text returned by the server.

Where the XMLHttpRequest object's open () method has the following five parameters:

Request-type: type of Send request. A typical value is GET or POST, but you can also send a HEAD request.

URL: The URL to connect to.

Asynch: True if you want to use an asynchronous connection, false otherwise. This parameter is optional and is true by default.

Username: If authentication is required, you can specify the user name here. The optional parameter does not have a default value.

Password: If authentication is required, you can specify the password here. The optional parameter does not have a default value.

The first three parameters are usually used. In fact, even if you need an asynchronous connection, you should specify "true" for the third argument. This is the default value, but it is easier to understand whether the request is asynchronous or synchronous.

After we get the XMLHttpRequest object, we use this object to execute our request in the background, and we must pay attention to our callback function when we execute our request: Xmlhttprequest.onreadystatechange = Ajaxcallback, the name of the callback function here can be random, not fixed dead. We can see the above program request is sent to the adminaction in the Exists method, OK, let's go to the action method inside to see:

[Java]View Plaincopyprint?

2. Public String exists () throws exception{
4. SYSTEM.OUT.PRINTLN (admin==null);
6. Boolean boo=dao.exists (Admin.getusername ());
8. //Gets the original PrintWriter object to output the response result without jumping to an attempt to
10. HttpServletResponse response = Servletactioncontext.getresponse ();
12. //Set character sets
14. Response.setcharacterencoding ("UTF-8");
16. PrintWriter out = Response.getwriter ();
18. if (boo) {
20. //Input The content of the response directly
22. OUT.PRINTLN ("* User name already exists *");
24. /** formatted output time **/
26. Out.flush ();
28. Out.close ();
30. }
32. OUT.PRINTLN ("* User name available *");
34. return null;
36. }

The students who are familiar with Ajax should see this code very clearly. Here is the main use of printwriter to our backstage information output to our front desk, here I will not explain in detail. Well, here we are, this is our asynchronous validation using the Struts2+ajax implementation. Here is the specific implementation effect:

Struts2+ajax Implementing asynchronous validation