Because Ajax brings us too many benefits, we will give priority to this technology in many applications, so I am also attracted to it. I will share with you the next simple example.
Regist. jsp file: a simple registration page
<% @ Page contenttype = "text/html; charset = gb2312"
%>
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> registration page </title>
<SCRIPT type = "text/JavaScript" src = "JS/ajax. js"> </SCRIPT>
<SCRIPT type = 'text/JavaScript '>
<! --
Function docheck (){
VaR F = Document. Forms [0];
If (F. username. value! = ""){
Document. getelementbyid ("feedback_info"). innerhtml = "the system is processing your request. Please wait. ";
Send_request ("get", "checkusername. jsp? Username = "+ F. username. Value, null," text ", showfeedbackinfo );
}
Else {
Document. getelementbyid ("feedback_info"). innerhtml = "Enter the user name. ";
}
}
Function showfeedbackinfo (){
If (http_request.readystate = 4) {// judge the object status
If (http_request.status = 200) {// The information has been returned successfully. Start to process the information.
Document. getelementbyid ("feedback_info"). innerhtml = http_request.responsetext;
} Else {// The page is abnormal.
Alert ("the page you requested has an exception. ");
}
}
}
// -->
</SCRIPT>
</Head>
<Body>
<Form name = "form1" method = "Post" Action = "">
<Table Style = "font-size: 12px;">
<Tr>
<TD width = "80"> User name: </TD>
<TD> <input type = "text" name = "username" onblur = "docheck ()"> </TD>
</Tr>
<Tr>
<TD colspan = "2"> <span id = "feedback_info" style = "color: # ff0000"> </span> </TD>
</Tr>
<Tr>
<TD> password 1: </TD>
<TD> <input type = "password" name = "PWD"> </TD>
</Tr>
</Table>
</Form>
</Body>
</Html>
The source code of the JS file is as follows: (Ajax. JS)
// Define the XMLHTTPRequest object instance
VaR http_request = false;
// Define reusable HTTP request sending Functions
Function send_request (method, URL, content, responsetype, callback) {// initialize, specify the processing function, and send the request Function
Http_request = false;
// Start initializing the XMLHTTPRequest object
If (window. XMLHttpRequest) {// Mozilla Browser
Http_request = new XMLHttpRequest ();
If (http_request.overridemimetype) {// sets the mime category
Http_request.overridemimetype ("text/XML ");
}
}
Else if (window. activexobject) {// IE browser
Try {
Http_request = new activexobject ("msxml2.xmlhttp ");
} Catch (e ){
Try {
Http_request = new activexobject ("Microsoft. XMLHTTP ");
} Catch (e ){}
}
}
If (! Http_request) {// exception. An error occurred while creating the object instance.
Window. Alert ("the XMLHTTPRequest object instance cannot be created .");
Return false;
}
If (responsetype. tolowercase () = "text "){
// Http_request.onreadystatechange = processtextresponse;
Http_request.onreadystatechange = callback;
}
Else if (responsetype. tolowercase () = "XML "){
// Http_request.onreadystatechange = processxmlresponse;
Http_request.onreadystatechange = callback;
}
Else {
Window. Alert ("response type parameter error. ");
Return false;
}
// Determine the request sending method and URL and whether to asynchronously execute the next code
If (method. tolowercase () = "get "){
Http_request.open (method, URL, true );
}
Else if (method. tolowercase () = "Post "){
Http_request.open (method, URL, true );
Http_request.setrequestheader ("Content-Type", "application/X-WWW-form-urlencoded ");
}
Else {
Window. Alert ("the HTTP request type parameter is incorrect. ");
Return false;
}
Http_request.send (content );
}
// Function for processing the returned text format information
Function processtextresponse (){
If (http_request.readystate = 4) {// judge the object status
If (http_request.status = 200) {// The information has been returned successfully. Start to process the information.
// Alert (http_request.responsetext );
Alert ("Text Document response. ");
} Else {// The page is abnormal.
Alert ("the page you requested has an exception. ");
}
}
}
// Function for processing the returned XML format document
Function processxmlresponse (){
If (http_request.readystate = 4) {// judge the object status
If (http_request.status = 200) {// The information has been returned successfully. Start to process the information.
// Alert (http_request.responsexml );
Alert ("XML document response. ");
} Else {// The page is abnormal.
Alert ("the page you requested has an exception. ");
}
}
}
The source code of checkusername. jsp is as follows:
<% @ Page contenttype = "text/html; charset = gb2312"
%>
<% @ Page import = "com. kemei. User. util. membermanager" %>
<%
String name = request. getparameter ("username ");
Membermanager manager = new membermanager ();
If (Manager. searchbyusername (username ))
Out. println ("user name [" + username + "] has been registered. Please change the user name and register again. ");
Else Out. println ("user name [" + username + "] has not been registered. You can continue. ");
Manager. closedao ();
%>
At this point, a simple Asynchronous User Name verification program has been completed. After you enter the user name, switching the cursor will asynchronously verify the correctness of the data. However, when using the service, I encountered no problem. When I first entered an English or a number to verify the user name, there was no problem, but it was difficult to enter Chinese characters but garbled characters, so I checked username. JSP has been modified. After modification, the source code is as follows:
<% @ Page contenttype = "text/html; charset = gb2312"
%>
<% @ Page import = "com. kemei. User. util. membermanager" %>
<%
String name = request. getparameter ("username ");
String username = new string (name. getbytes ("ISO8859-1"), "gb2312 ");
Membermanager manager = new membermanager ();
If (Manager. searchbyusername (username ))
Out. println ("user name [" + username + "] has been registered. Please change the user name and register again. ");
Else Out. println ("user name [" + username + "] has not been registered. You can continue. ");
Manager. closedao ();
%>
The source code of checkusername. jsp is modified as follows:
<%@ Page contenttype = "text/html; charset = UTF-8"
%>
<%
String name = request. getparameter ("username ");
%>
The user name <% = username %> has been registered. You can change the name of another user before registering the user.
After the modification, re-enter the Chinese language for testing. No garbled characters are displayed. This simple Ajax application is over.
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
