Please refer to this page for a link to this article.
(i) Create a new Java project in eclipse
Project Name: Ajax
Then create a new two JSP under Webroot, one for validate.jsp, its function is to enter, commit, and the other is date.jsp it is to validate the input value.
(b) Validate.jsp code
<%@ page contenttype= "text/html; CHARSET=GBK"%>
<title> data validation </title>
<script type= "text/ JavaScript "
<!---
/*
the onclick () function in this button
function: (1) to determine the null value in the input box
(2) When not empty, call the function that can execute the asynchronous operation
*/
Function Usercheck ()
{
//The following element does not take the corresponding value with a property such as ID
var f=document.form1; //Remove the Form1 element
var username=f.username.value; //Remove From1 the value below username
alert (' type of this element: ' +f.username.type+ ' + '/r/ n the name of this element: "+f.username.name");
if (username== "")
{
Window.alert ("User cannot be empty!"); Both of these can be
Alert ("User cannot be empty!");
F.username.focus (); Get focus
return false;
}else
{
If you fill in an operation that is not a null value
Send_request ("date.jsp?username=" +username);
}
}
var Http_request=false;
The processing function of Ajax
function send_request (URL)
{
Gets the URL to invoke, passing in the function
Http_request=false;
if (window. XMLHttpRequest)
{
Mozilla browser or non-IE browser
Http_request=new XMLHttpRequest ();
if (Http_request.overridemimetype)
{
Http_request.overridemimetype ("text/html");
}
}else if (window. ActiveXObject)
{
IE browser
try {
Http_request=new ActiveXObject ("msxml2.xmlhttp"); Unlike the version of JavaScript technology installed in Internet Explorer, MSXML actually has two different versions,
}catch (e)
{
Try
{
Http_request=new ActiveXObject ("Microsoft.XMLHTTP");
}catch (e) {}
}
}
When XMLHttpRequest cannot be created
if (!http_request)
{
Window.alert ("Cannot create XMLHttpRequest object instance");
return false;
}
ProcessRequest Although it is a function, but in this can not add parentheses can not give parameters, but also can not put the function of this function after the sentence
Http_request.onreadystatechange=processrequest;
Determine how and when the request is sent, and whether the next snippet of code is executed synchronously
The first parameter is the mode of the transfer get post head the second parameter is: the URL to interact with; The third argument: is the asynchronous transfer
Http_request.open ("Get", url,true);
Http_request.send (NULL);
}
function to process return information
function ProcessRequest ()
{
Represents all the values taken from the server
if (http_request.readystate==4)
{
if (Http_request.status = = 200) {//information has been successfully returned to start processing information
The message will be returned when the string is processed, and there is responsexml (the message will be returned when the document is used, available DOM processing)
alert (Http_request.responsetext);
}else{
Alert ("The page you requested has an exception. ");
}
}
}
-
</script>
<body>
<center>
<form name= "Form1" action= "" method= "POST" >
User name: <input type= "text" name= "username" value= "" > <br>
<input type= "button" name= "Check" value= "Uniqueness Check" onclick= "Usercheck ()" >
<input type= "submitted" name= "submit" value= "Submission" >
</form>
</center>
</body>
Note: Parentheses are matched, otherwise the <input type= "button" > this line will always report missing objects.
Reference: XMLHttpRequest and browser http://www.cnbruce.com/blog/showlog.asp?log_id=987&cat_id=34
(c) date.jsp code
<%@ page contenttype= "text/html; CHARSET=GBK "%>
<%
String username = request.getparameter ("username");
if ("Liusong". Equals (Username.trim ()))
{
Out.println ("User name has been deleted, please change a user name");
} else
{
Out.println ("The user has not been used, you can continue");
}
%>
(iii) operation
A:: When what does not enter
B: When you enter a non-existing user
C: When the input user is present
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
