Java Project (1)--Using AJAX asynchronous interactive technology to verify that user code is duplicated

Issues related to registering users in the DRP project. This article describes the implementation principle of using AJAX asynchronous interaction to verify that a user name already exists in the registration process. Many projects did not use AJAX technology, and the result is that all the judgments will wait until the click submit button to execute, the result is nothing more than a website card/software dead , said not to die will not die, so Ajax is widely used, users thumbs up thumbs up, have to say that Ajax captured the Web user AH ~ ~

Understand the five states of the ajaxreadystate before implementation.

Because I am more and more inclined to the English original, think from its origin exploration will be more direct and easier to understand, so used in the following English explanation, followed by their own understanding.

0: (uninitialized) Thesend () method has a not yet been invoked.

(uninitialized) has not yet called the Send () method. Just create the XMLHttpRequest object, otherwise the object does not exist the browser will error ~

1: (Loading) the Send () method has been invoked, request in progress.

(load) The Send () method is called and the request is being sent. This step calls open () to set three parameters Method,url and true, and then call Send () to send the request to the server.

2: (Loaded) the Send () method has completed, entire response received.

(load complete) the Send () method executes. This time the raw data that receives the server-side response does not indicate a successful request, including the success and failure of the request.

3: (Interactive) Theresponse is being parsed.

The response content is being parsed. The original data obtained from the previous state is parsed, and the data is converted into a format that can be accessed through the Responsebody,responsetext and Responsexml properties for the client to invoke.

4: (completed) Theresponse has been parsed, was ready for harvesting.

(complete) parsing is completed, can be called by the client, you can get the data through the response properties of the XMLHttpRequest object.

HTML: When you enter a user name and press the table key to toggle the input box, the user name input box loses focus to trigger the onblur event, and the Validate () method is called.

<TR><TD width= "22%" height= "><div align=" right "><font color=" #FF0000 ">*</font> User code: </DIV></TD><TD width= "78%" ><input name= "userid" type= "text" class= "Text1" id= "userid" size = "Ten" maxlength= "onkeypress=" useridonkeypress () "value=" <%=userid%> "onblur=" Validate (This) ">   <span id= "Spanuserid" ></span></td></tr>

user_add.jsp The page code, upload the UserID to the user_validate.jsp page, query for existence, and use callback to receive the message back:

var xmlHttp = null;function createxmlhttprequest () {//indicates that the current browser is not IE, such as ns,firefoxif (window. XMLHttpRequest) {xmlHttp = new XMLHttpRequest ();} else if (window. ActiveXObject) {xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");}} function validate (field) {if (Trim (field.value). length!=0) {//Create Ajax Core Object Xmlhttprequestcreatexmlhttprequest (); var url = "User_validate.jsp?userid=" + trim (field.value) + "&time=" + New Date (). GetTime ();//Set the request method to get, the requested URL, Asynchronously commits the Xmlhttp.open ("GET", url,true);//assigns the method address to the onreadystatechange attribute Xmlhttp.onreadystatechange=callback; Xmlhttp.send (null);} Else{document.getelementbyid ("Spanuserid"). innerhtml= "";}} function callback () {//4 indicates a response if (xmlhttp.readystate==4) {//200 indicates a successful request if (xmlhttp.state==200) {document.getElementById ("Spanuserid"). Innerhtml= "<font color= ' Red ' >" + xmlhttp.responsetext + "</font>"}else{ document.getElementById ("Spanuserid"). innerhtml= "";}} Else{alert ("Request failed, error code =" + Xmlhttp.status);}}

user_validate.jsp page, depending on whether the user_id query already exists:

<%string userid=request.getparameter ("userid"); if (Usermanager.getinstance (). Finduserbyid (USERID) = null) { OUT.PRINTLN ("User code already exists");} %>

Usermanager.java the method in which the specific query exists, the database connection method has been slightly:

Public User Finduserbyid (string userId) {string sql= ' select User_id,user_name,password,contact_tel,create_date from T_ User where user_id=? "; Connection Conn=null; PreparedStatement Pstmt=null; ResultSet Rs=null; User user=null;try{conn=dbutil.getconnection ();p stmt=conn.preparestatement (SQL);p stmt.setstring (1,userId); rs= Pstmt.executequery (), if (Rs.next ()) {user=new user (); User.setuserid (userId); User.setusername (rs.getstring ("User_ Name ")), User.setpassword (rs.getstring (" Contact_tel ")), User.setemail (rs.getstring (" email ")); User.setcreatedate ( Rs.gettimestamp ("Create_date"));}} catch (SQLException e) {e.printstacktrace ();} Finally{dbutil.close (RS);D butil.close (pstmt);D butil.close (conn);} return user;}

    summary : asynchronously interacts with the database using Ajax , which solves the user waiting in a synchronous state - - waiting -- the problem , there's a test. , There's no mistaking the operation here. . dramatically improves user experience, performance in dynamic, fast response and high interactivity.

Java Project (1)--Using AJAX asynchronous interactive technology to verify that user code is duplicated