Ajax implements asynchronous requests. without redirecting to a page, it can check whether the user name and other information are effective!

<Span style = "font-family: Arial, Helvetica, sans-serif; Background-color: RGB (255,255,255 ); "> </span> <span style =" font-family: Arial, Helvetica, sans-serif; Background-color: RGB (255,255,255 ); "> we often need to consider the issue that login names cannot be repeated on the user registration page. However, there are many ways to solve this problem. You can use the from form submission and redirection methods to achieve this, we can even use the IFRAME layout framework, but I highly recommend the Ajax method. The following describes how to use ajax to Implement Asynchronous verification: </span>

Method 1: Form submission + Ajax engine creation for asynchronous Verification

Step 1: Create an Ajax engine (JavaScript code) on the HTML or JSP interface)

<Span style = "font-size: 18px;"> // create the Ajax engine function createxmlhttprequest () {var XMLHTTP; try {XMLHTTP = new XMLHttpRequest ();} catch (E) {try {// Internet Explorer XMLHTTP = new activexobject ("msxml2.xmlhttp");} catch (e) {try {XMLHTTP = new activexobject ("Microsoft. XMLHTTP ") ;}catch (e) {}} return XMLHTTP ;}</span>

Step 2: Create a method to call the Ajax engine (JavaScript code)

<Span style = "font-size: 18px;"> function checklogonname () {var logonname = document. getelementbyid ("logonname "). value; // Step 1: Create the Ajax engine var XMLHTTP = createxmlhttprequest (); // Step 2: event processing function, which is essentially a listener that listens to the connection status between the server and the client XMLHTTP. onreadystatechange = function () {If (XMLHTTP. readystate = 4) {If (XMLHTTP. status = 200) {var DATA = XMLHTTP. responsetext; // alert (data); </span>

<Span style = "font-size: 18px;"> <span style = "white-space: pre"> </span> // <span style = "color: # ff0000; "> data is the information returned by the backend. Here, the backend is the number of 2 and 2, which can be customized. </span> If (Data = 1) {alert ("the login name currently entered [" + logonname + "] has been occupied by another user. Please enter it again! "); Document. getelementbyid ("logonname "). value = ""; document. getelementbyid ("logonname "). focus () ;}}}// Step 3: establish a connection with the backend server XMLHTTP. open ("Post", "<span style =" color: # 3366ff; "> .. /.. /checklogonname </span> ", true); // <span style =" color: # ff0000; "> the blue part shows the servlet access path </span> XMLHTTP. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded"); // Step 4: send the request parameter XMLHTTP. send ("logonname =" + logonname); // <span style = "color: # ff0000; "> submit the input information of the login name used for database verification </SPAN >}</span>

Step 3: add the onclick or other mouse event functions of the HTML code. Here I use the strust tag. If you use a direct HTML Tag, you can customize it!

<span style="font-size:18px;"><s:textfield name="logonName" id="logonName" maxlength="25" size="20" onblur="checkLogonName()"></s:textfield></span>

Now we have created the Ajax engine and can submit the input information for verification to the backend servlet.

Step 4: Create a servelt to access the database, and then write the logic code to return the corresponding information (this is the common database query code, it is no longer cumbersome, here, I set the return Information Room 1 or 2. Of course you can customize it)

Method 2: Implement Asynchronous Verification Using ajax submission + jquery. js

Step 1: Introduce jquery. js because Ajax submission must reference jquery. js

<script type="text/javascript" src="js/jquery.js"></script>

Step 2: Create an Ajax submission method

Function passsubmit () {var username = document. getelementsbyname ("username") [0]. value; var studentnumber = document. getelementsbyname ("studentnumber") [0]. value; var gender = document. getelementsbyname ("gender") [0]. value; var studentclass = document. getelementsbyname ("studentclass") [0]. value; var studentdormitory = document. getelementsbyname ("studentdormitory") [0]. value; var phonenumber = document. getelementsbyname (" Phonenumber ") [0]. value; var Department = document. getelementsbyname ("Department") [0]. value; var description = document. getelementsbyname ("Description") [0]. value; If (username = "") {alert ("enter your name !! "); Document. getelementbyid (" username "). Focus (); Return false;} else if (studentnumber =" ") {alert (" Enter your student ID !! "); Document. getelementbyid (" studentnumber "). Focus (); Return false;} else if (! Isschoolnum (studentnumber) {alert ("your student ID is invalid or you are not a freshman !! "); Document. getelementbyid (" studentnumber "). Focus (); Return false;} else if (studentclass =" not selected ") {alert (" select a class !! "); Document. getelementbyid (" studentclass "). Focus (); Return false;} else if (studentdormitory =" ") {alert (" Enter the dormitory !! "); Document. getelementbyid (" studentdormitory "). Focus (); Return false;} else if (! Isstudentdormitory (studentdormitory) {alert ("the dormitory you entered is invalid !! Don't you live in Haihua A or B? "); Document. getelementbyid (" studentdormitory "). Focus (); Return false;} else if (phonenumber =" ") {alert (" Enter your mobile phone number !! "); Return false;} else if (! Ismoblie (phonenumber. substring (0, 11) {alert ("the mobile phone number you entered is invalid !! "); Document. getelementbyid (" phonenumber "). Focus (); Return false;} else if (Department =" not selected ") {alert (" select a department !! "); Document. getelementbyid ("Department "). focus (); Return false;} else if (description. length> 200) {alert ("You have entered more than 100 words !! "); Document. getelementbyid ("Description "). focus (); Return false;} // <span style = "color: # ff0000;"> This part is the main method code, the URL in the third row below is the Servlet Path to be submitted </span> <span style = "color: # 3333ff;" >$. ajax ({type: 'post', URL: '<% = request. getcontextpath () %>/registerservlet ', data: 'username = '+ username +' & studentnumber = '+ studentnumber +' & Gender = '+ gender +' & studentclass = '+ studentclass +' & studentdormitory = '+ studentdormitory +' & phonen Umber = '+ phonenumber +' & Department = '+ department +' & Description = '+ description, success: function (MSG) {If (MSG = "fail ")) {alert ("system error, registration failed! Please try again later !! ");} Else if (MSG =" success ") {alert (" registration successful, you can register for another department !! ");} Else if (MSG =" old ") {alert (" You have already registered for this department and cannot register for it again !! ") ;}}}); </Span>}

Step 3: add the onclick or other mouse event functions of HTML code

<Span style = "font-size: 18px; "> <input type =" Submit "id =" btn_submit "class =" BTN "value =" Submit "onclick =" passsubmit () "> </span>

Now we have created the Ajax engine and can submit the input information for verification to the backend servlet.

Step 4: Create a servelt to access the database, and then write the logic code to return the corresponding information (this is the common database query code, it is no longer cumbersome, I set the return information room fail/uccess/old here. Of course you can customize it)

I recommend reading another blog article about my blog: Turning

Ajax implements asynchronous requests. without redirecting to a page, it can check whether the user name and other information are effective!