JavaScript + jsp + Servlet partial refresh page

1. script
// Ajax implements level-2 cascade in the drop-down box. The list in the second drop-down box is changed based on the value of the first drop-down box.
// Create an xmlHttpRequest object based on the browser type
Function createXmlHttpRequest ()
{
If (window. ActiveXObject)
{
Return new ActiveXObject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest ())
{
Return new XMLHttpRequest ();
}
}
Var xmlHttpRequest;

// Asynchronous response function, search professional
Function searchMajor (para)
{
Var url = "majorSearch. action? Para = "+ para; // path of the background request
XmlHttpRequest = createXmlHttpRequest ();
XmlHttpRequest. onreadystatechange = callbackMajor; // register the callback function to the status change event.
XmlHttpRequest. open ("GET", url, true );
XmlHttpRequest. send (null );
}

// Asynchronous response function, search for class number
Function searchClass (para)
{
Var url = "classSearch. action? Para = "+ para; // path of the background request
XmlHttpRequest = createXmlHttpRequest ();
XmlHttpRequest. onreadystatechange = callbackClass; // registers the callback function to the status change event.
XmlHttpRequest. open ("GET", url, true );
XmlHttpRequest. send (null );
}

// Callback function to get the result of searching the class number
Function callbackClass ()
{
Var c_num = document. getElementById ("c_num ");
// The request is responded successfully and the result is received.
If (xmlHttpRequest. readyState = 4 & xmlHttpRequest. status = 200)
{
Var result = xmlHttpRequest. responseText; // The returned result string.
Var classArray = result. split (","); // In the returned result string, values are separated by commas (,). Therefore, they are first split into arrays.
Var count = classArray. length;
C_num.length = 0; // first clear the drop-down list box
For (var I = 0; I <count; I ++)
{
C_num.options.add (new Option (classArray [I + 1], classArray [I]); // Add the result cyclically to the drop-down list
I ++;
}
If (classArray [count-1] = ""){
C_num.length = 0; // first clear the drop-down list box
C_num.options.add (new Option ("no class category ",""));
}

}
Else
{
C_num.length = 0;
C_num.options.add (new Option ("no class category ",""));
}

}

// Callback function to obtain professional search results
Function callbackMajor ()
{
Var major = document. getElementById ("major ");
// The request is responded successfully and the result is received.
If (xmlHttpRequest. readyState = 4 & xmlHttpRequest. status = 200)
{
Var result = xmlHttpRequest. responseText; // The returned result string.
Var majorArray = result. split (","); // In the returned result string, values are separated by commas (,). Therefore, they are first split into arrays.
Var count = majorArray. length;
Major. length = 0; // first clear the drop-down list box
For (var I = 0; I <count; I ++)
{
Major. options. add (new Option (majorArray [I + 1], majorArray [I]); // add the result cyclically to the drop-down list
I ++;
}
If (majorArray [count-1] = ""){
Major. length = 0; // first clear the drop-down list box
Major. options. add (new Option ("no professional category ",""));
}

}
Else
{
Major. length = 0;
Major. options. add (new Option ("no professional category ",""));
}

}

// Change event 1 in the drop-down list
Function changeMajorOptions ()
{
Var academy = document. getElementById ("academy ");
If (academy. value! = "")
{
SearchMajor (academy. value );
}
Return;
}
// Change event 2 in the drop-down box
Function changeClassOptions (){
Var major = document. getElementById ("major"). value;
If (major! = ""){
SearchClass (major );
}
}
2. jsp page
<Td height = "30" align = "right"> faculty class: </td>
<Td>
<Select name = "academy" id = "academy" onblur = "changeMajorOptions ()">
<C: if test = "$ {empty alist}">
<Option value = ""> no registered class </option>
</C: if>
<C: if test = "$ {! Empty alist} ">
<C: forEach items = "$ {alist}" var = "academy">
<Option value = "$ {academy. m_id}" >$ {academy. m_name} </option>
</C: forEach>
</C: if>
</Select> & nbsp;
<Select name = "major" id = "major" onblur = "changeClassOptions ()">
<Option value = ""> select a major </option>
</Select> & nbsp;
<Select name = "c_num" id = "c_num">
<Option value = ""> select a class </option>
</Select>
</Td>
3. MajorListAction class implementation (similarly, ClassListAction)
Response. setContentType ("text/html ");
Response. setCharacterEncoding ("UTF-8 ");
Int para = Integer. parseInt (request. getParameter ("para "));
IUserIndexBusiness iuib = BusinessIndexFactory. getUserIndexBusiness ();
List <MajorValue> mlist = iuib. getMajorList (para );
String result = "";
If (mlist! = Null & mlist. size ()> 0 ){
Result = "" + mlist. get (0). getM_id ();
Result + = "," + mlist. get (0). getM_name ();
For (int I = 1; I <mlist. size (); I ++ ){
Result + = "," + mlist. get (I). getM_id ();
Result + = "," + mlist. get (I). getM_name ();
}
}
Response. getWriter (). write (result );
This article is from the "not coming soon" blog