Jsp+ajax implementation without refreshing, the mouse left the text box is to verify the user name, the operation is as follows: Create a new input page, named Input.jsp,
<%@ page contenttype= "text/html; Charset=utf-8 "%>
<title>jsp+ajax Implement no Refresh _ mouse away text box to verify user name </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>
<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" >
Creating XMLHttpRequest Objects
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 ();
Gets an HTML element that assigns the attribute to the element below
var obj = Document.all[objid];
Sets the request method and destination, and is set to commit asynchronously
Ajax.open ("Post", Serverpage, True);
Ajax.onreadystatechange = function () {
if (ajax.readystate = = 4 && ajax.status = 200) {
innerHTML is an attribute of an HTML element, and if you do not understand the attribute, it is understood as a variable of the HTML element
Ajax.responsetext is the return value of the server, assigning the value to the attributes of the ID=PASSPORT1 element
innerHTML This attribute or say this variable represents the content between a set of start and end tags
obj.innerhtml = Ajax.responsetext;
}
}
Send Request
Ajax.send (NULL);
}
function CheckName () {
Getmyhtml ("Check.jsp?groupname=" +name_form.group_name.value, "Passport1");
}
The function is to return the original content to the property when the user's focus is returned from another place 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 and lowercase letters, Chinese, numerals, special characters, etc.) 1 Chinese characters are equal to 2 characters, it is recommended to use Chinese. Cannot be modified after registration. </div> ";
}
}
</script>
<form name= "Name_form" method=post>
<table width= "60%" height= "align=" "Center" border= "1" bordercolor= "#96D6E8"
class= "Text12black" >
<tr>
<TD width= "22%" height= "align=" "Right" >
User name:
</td>
<TD width= "61%" align= "left" >
<input name= "group_name" type= "text" value= "" size=30
Maxlength= "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 and lowercase letters, Chinese, numerals, special characters, etc.)
1 Chinese characters equals 2 characters, Chinese nickname is recommended. Cannot be modified after registration. </span>
</div>
</td>
</tr>
</table>
</form>
</body>
<%@ page contenttype= "text/html; Charset=utf-8 "%>
<%
String action = "";
String groupname = "";
Check User name
Used as a database join, can be modified according to your situation, if the test can not be marked with the statement
try {
Action = Request.getparameter ("action");
GroupName = Request.getparameter ("groupname"). Trim ();
if ("". Equals (groupname)) {
Out.println ("<div class= ' Reds ' align= ' Left ' > username cannot be empty!) </div> ");
else if (Groupname.length () < 4 | | groupname.length () > 20) {
Out.println ("<div class= ' Reds ' align= ' Left ' > username"
+ groupname + "not legal!" (4 to 20 bits in length, and no use of special characters such as #=) </div> ");
else if ("Zhangsan". Equals (groupname)) {
Out.println ("<div class= ' Reds ' align= ' left ' >" + "username"
+ groupname + "has been occupied, please re-enter!" </div> ");
} else {
OUT.PRINTLN ("Your username is available");
}
catch (Exception e) {
System.out.println (Request.getservletpath () + "error:"
+ e.getmessage ());
}
%>
