Three-Step Ajax

A simple Ajax example is provided in three steps.

The example involves a local database, so it cannot run properly locally, but the idea is correct.

Step 1: (General)CodeWrite an Ajax. js file. The send_request () method has five parameters,
1. Method of submission;
2. the URL can also be used to pass parameters;
3, only parameters;
4. Return type, text or XML;
5. Method Name of the callback function.
VaR http_request = false;

// Send
Function send_request (method, URL, content, responsetype, callback ){
Http_request = false;
If (window. XMLHttpRequest ){
Http_request = new XMLHttpRequest ();
If (http_request.overridemimetype ){
Http_request.overridemimetype ("text/XML ");
}
} Else if (window. activexobject ){
Try {
Http_request = new activexobject ("msxm12.xmlhttp ");
} Catch (e ){
Try {
Http_request = new activexobject ("Microsoft. XMLHTTP ");
} Catch (e ){

}
}
}
If (! Http_request ){
Window. Alert ("e xmlhttpreqeust ");
Return false;
}
If (responsetype. tolowercase () = "text "){
// Http_request.onreadystatechange = processtextresponse;
Http_request.onreadystatechange = callback;
} Else if (resposetype. tolowercase () = "XML "){
// Http_request.onreadystatechange = processtextresponse;
Http_request.onreadystatechange = callback;
} Else {
Window. Alert ("E1 ");
Return false;
}

If (method. tolowercase () = "get "){
Http_request.open ("get", URL, true );
} Else if (method. tolowercase () = "Post "){
Http_request.open ("Post", URL, true );
Http_request.setrequestheader ("Content-Type", "application/X-WWW-form-urlencoded ");
} Else {
Window. Alert ("E2 ");
}
Http_request.send (content );
}

// Text
Function processtextresponse (){
If (http_request.readystate = 4 ){
If (http_request.status = 200 ){
Document. form1.rs. value = http_request.responsetext;
} Else {
Alert ("E3 ");
}
}
}

// XML
Function processxmlrequest (){
If (http_request.readystate = 4 ){
If (http_request.status = 200 ){
Document. form1.rs. value = http_request.responsetext;
} Else {
Alert ("E4 ");
}
}
}

Step 2: Put this script on the page (General)

<Script language = "JavaScript">
// Obtain the three clip in the group
Function Update (type, ID ){
VaR F = Document. P;
If ("clip" = type ){
One. innerhtml = "the requested content is being processed </img> ";
Send_request ("get", "/common2/query. jsp? Groupbyclip_id = "+ id, null," text ", processtextresponse_one );
}
VaR F = Document. P;
If ("CPID" = type ){
One. innerhtml = "the requested content is being processed </img> ";
Send_request ("get", "/common2/query. jsp? Cp_id = "+ id, null," text ", processtextresponse_one );
}
}

</SCRIPT>

Step 3: Create a JSP processing page, accept parameters, process, and out. print () is output, and the callback function receives the printed content (modify the content according to business needs). <%
// Obtain the city list by province ID
If (request. getparameter ("province_id ")! = NULL & request. getparameter ("province_id ")! = "-1 "){
Arraylist provincelist = new arraylist ();
Try {
Provincelist = factory. db_city.querybyprovinceid (integer. parseint (request. getparameter ("province_id ")));
} Catch (exception e ){
Out. Print ("city search error by province ");
}
If (provincelist! = NULL ){
Out. println ("<select name = 'city' id = 'city' onchange = \" Update ('city') \ "> ");
Out. println ("<option value = '-1'> select a city </option> ");
For (INT I = 0; I <provincelist. Size (); I ++ ){
Citybean = (citybean) provincelist. Get (I );
Out. println ("<option value =" + citybean. getcity_id () + ">" + citybean. getcity () + "</option> ");
}
Out. Print ("</SELECT> ");
}
}

// Query the districts and counties Based on city_id
If (request. getparameter ("city_id ")! = NULL & request. getparameter ("city_id ")! = "-1 "){
Arraylist districtlist = new arraylist ();
Try {
Districtlist = factory. db_district.querybycityid (integer. parseint (request. getparameter ("city_id ")));
} Catch (exception e ){
Out. Print ("An error occurred while searching for district by province ");
}
If (districtlist! = NULL ){
Out. println ("<select name = 'District 'Id = 'District'> ");
Out. println ("<option value = '-1'> select a district/county </option> ");
For (INT I = 0; I <districtlist. Size (); I ++ ){
Districtbean = (districtbean) districtlist. Get (I );
Out. println ("<option value =" + districtbean. getdistrict_id () + ">" + districtbean. getdistrict () + "</option> ");
}
Out. Print ("</SELECT> ");
}
}
%>