Implementation of jsp + ajax without refreshing (the user name is verified when the mouse leaves the text box)

Source: Internet
Author: User

Jsp + ajax implementation is refreshing. When you move the mouse away from the text box, the user name is verified. The operation is as follows: Create an input page named input. jsp,
Copy codeThe Code is as follows:
<% @ Page contentType = "text/html; charset = UTF-8" %>
<Html>
<Head>
<Title> jsp + ajax implementation without refreshing _ verify the user name by leaving the text box with the mouse </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Style type = "text/css">
. Style1 {
Color: # FF3333;
Font-weight: bold;
}
. Style14 {
Font-size: 13px
}
. Text12black {
Font-size: 12px;
}
</Style>
</Head>
<Body bottomMargin = "0" leftMargin = "0" topMargin = "0" rightMargin = "0"
Marginheight = "0" marginwidth = "0">
<Table width = "748" border = "0" align = "center" cellpadding = "0"
Cellspacing = "0">
<Tr>
<Td height = "5"> </td>
</Tr>
</Table>
<Script language = "javascript">
// Create an XMLHttpRequest object
Function GetO (){
Var ajax = false;
Try {
Ajax = new ActiveXObject ("Msxml2.XMLHTTP ");
}
Catch (e ){
Try {
Ajax = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Catch (E ){
Ajax = false;
}
}
If (! Ajax & typeof XMLHttpRequest! = 'Undefined '){
Ajax = new XMLHttpRequest ();
}
Return ajax;
}
Function getMyHTML (serverPage, objID ){
Var ajax = GetO ();
// Get an html element and assign a value to the attribute of this element below
Var obj = document. all [objID];
// Set the Request Method and target and set it to asynchronous submission
Ajax. open ("post", serverPage, true );
Ajax. onreadystatechange = function (){
If (ajax. readyState = 4 & ajax. status = 200 ){
// InnerHTML is the attribute of the HTML element. If you do not understand the attribute, It is understood as the variable of the HTML element.
// Ajax. responseText is the return value of the server. The value is assigned to the attribute of the element id = passport1.
// The innerHTML attribute or variable indicates the content between a group of start and end tags.
Obj. innerHTML = ajax. responseText;
}
}
// Send the request
Ajax. send (null );
}
Function CheckName (){
GetMyHTML ("check. jsp? GroupName = "+ name_form.group_name.value," passport1 ");
}
// This function is used to assign the attribute back to the original content when the user's focus is returned from other places to the group_name input box.
Function sl (tx ){
If (tx = 'passport1 '){
Document. all [tx]. innerHTML = "<div class = 'reds' align = 'left'> 4-20 characters (including uppercase/lowercase letters, Chinese characters, numbers, and special characters) 1 Chinese character is equal to 2 characters. We recommend that you use Chinese characters. It cannot be modified after registration. </Div> ";
}
}
</Script>
<Form name = "name_form" method = post>
<Table width = "60%" height = "80" align = "center" border = "1" bordercolor = "#96D6E8"
Class = "text12black">
<Tr>
<Td width = "22%" height = "20" align = "right">
User name:
</Td>
& Lt; td width = "61%" align = "left" & gt;
<INPUT name = "group_name" type = "text" value = "" size = 30
Maxlength = "50" onBlur = "javaScript: CheckName ();"
OnFocus = "return sl ('passport1');"/>
<Br/>
<Div id = "passport1" style = "color: red"> </div>
</Td>
<Td id = "passport2" valign = "top">
<Div class = "explain_blue" align = 'left'>
<Span class = "gray"> 4-20 characters (including uppercase/lowercase letters, Chinese characters, numbers, and special characters)
1 Chinese Character equals 2 characters. We recommend that you use a Chinese nickname. It cannot be modified after registration. </Span>
</Div>
</Td>
</Tr>
</Table>
</Form>
</Body>
</Html>

On the create verification page, name it check. jsp. The Code is as follows:
Copy codeThe Code is as follows:
<% @ Page contentType = "text/html; charset = UTF-8" %>
<%
String action = "";
String groupname = "";
// Check the user name
// Used as a database connection, which can be modified according to your situation. If it is a test, you do not need to use the * mark statement.
Try {
Action = request. getParameter ("action ");
Groupname = request. getParameter ("groupName"). trim ();
If ("". equals (groupname )){
Out. println ("<div class = 'reds' align = 'left'> the user name cannot be blank! </Div> ");
} Else if (groupname. length () <4 | groupname. length ()> 20 ){
Out. println ("<div class = 'reds' align = 'left'> User Name"
+ Groupname + "invalid! (It Can Be 4 to 20 characters in length and cannot be used? # = And other special characters) </div> ");
} Else if ("zhangsan". equals (groupname )){
Out. println ("<div class = 'reds' align = 'left'>" + "username"
+ Groupname + "occupied. Please enter it again! </Div> ");
} Else {
Out. println ("your user name is available ");
}
} Catch (Exception e ){
System. out. println (request. getServletPath () + "error :"
+ E. getMessage ());
}
%>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.