Because ajax (static dynamic websites) brings us too many benefits, we will give priority to this technology in many applications, so I am also attracted to it, we will share with you the next simple example.
Regist. jsp (preferred for SUN Enterprise Applications) 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 (static dynamic website). js"> </script>
<Script type = text/javascript>
<! --
Function myAlert (strTitle ){
Var message = document. getElementById ("myDiv"). innerHTML;
Var win1 = new Zapatec. AlertWindow (message, {title: strTitle, modal: true, width: 580, height: 330 });
}
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 (preferred for SUN Enterprise Applications )? 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 (static dynamic website). js)
// Define xml (standardization is getting closer and closer) HttpRequest 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 xml (standardization is getting closer and closer) HttpRequest object
If (window. xml (standardization is getting closer and closer) HttpRequest {// Mozilla Browser
Http_request = new xml (standardization is getting closer and closer) HttpRequest ();
If (http_request.overrideMimeType) {// sets the MiME category
Http_request.overrideMimeType ("text/xml (standardization is getting closer and closer )");
}
}
Else if (window. ActiveXObject) {// IE browser
Try {
Http_request = new ActiveXObject ("Msxml (standardization is getting closer and closer) 2.xml( standardization is getting closer and closer) HTTP ");
} Catch (e ){
Try {
Http_request = new ActiveXObject ("Microsoft. xml (standardization is getting closer and closer) HTTP ");
} Catch (e ){}
}
}
If (! Http_request) {// exception. An error occurred while creating the object instance.
Window. alert ("cannot create xml (standardization is getting closer and closer) HttpRequest object instance .");
Return false;
}
If (responseType. toLowerCase () = "text "){
// Http_request.onreadystatechange = processTextResponse;
Http_request.onreadystatechange = callback;
}
Else if (responseType. toLowerCase () = "xml (standardization is getting closer and closer )"){
// Http_request.onreadystatechange = processxml (standardization is getting closer and closer) Response;
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 )&
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
