Sorry for not getting back to you earlier. Try the following steps:
1. Create test.html and paste the following code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Page</title>
<script type="text/javascript" src="mgb_ajax.js"></script>
<script type="text/javascript">
var o_ajax = new AJAX("GET", process_ajax, "get_second_info.html");
function load_second()
{
o_ajax.execute();
}
function load_third()
{
o_ajax.set_url("get_third_info.html");
o_ajax.execute();
}
function process_ajax()
{
eval(o_ajax.get_result());
}
</script>
</head>
<body>
<select onchange="load_second();">
<option>test 1</option>
<option>test 2</option>
</select>
<select id="second" onchange="load_third();"></select>
<select id="third"></select>
</body>
</html>
2. Create mgb_ajax.js and paste in the following code:
Code:
function AJAX(_s_method, _o_callback, _s_url)
{
var _o_http = get_xmlhttprequest();
var _result = null;
this.execute = execute;
this.set_method = set_method;
this.set_callback = set_callback;
this.set_url = set_url;
this.get_result = get_result;
function execute(o_input)
{
var s_key_value_pairs = "";
var s_temp = "";
var o_form = null;
if (typeof(o_input) == "string") {s_key_value_pairs = o_input;}
else if ((typeof(o_input) == "object") && (_s_method == "POST"))
{
o_form = o_input;
for (var i=0; i<o_form.length; i++)
{
s_temp = "";
if ((o_form.elements[i].name.trim().length > 0) && (o_form.elements[i].disabled == false) && (o_form.elements[i].style.display != "none"))
{
switch(o_form.elements[i].type)
{
case "select":
case "select-one":
if (o_form.elements[i].selectedIndex > -1)
{
if (o_form.elements[i].options[o_form.elements[i].selectedIndex].value.trim().length > 0)
{
if (s_key_value_pairs.length > 0) {s_key_value_pairs += "&";}
s_key_value_pairs += o_form.elements[i].name + "=" + escape(o_form.elements[i].options[o_form.elements[i].selectedIndex].value);
}
}
break;
case "select-multiple":
for (var j=0; j<o_form.elements[i].options.length; j++)
{
if (s_temp.length > 0) {s_temp += "&";}
if (o_form.elements[i].options[j].selected) {s_temp += o_form.elements[i].name + "=" + escape(o_form.elements[i].options[j].value);}
}
if (s_temp.trim().length > 0)
{
if (s_key_value_pairs.length > 0) {s_key_value_pairs += "&";}
s_key_value_pairs += s_temp;
}
break;
case "checkbox":
if (o_form.elements[i].checked)
{
if (s_key_value_pairs.length > 0) {s_key_value_pairs += "&";}
s_key_value_pairs += o_form.elements[i].name + "=" + escape(o_form.elements[i].value);
}
break;
case "radio":
if (o_form.elements[i].checked)
{
if (s_key_value_pairs.length > 0) {s_key_value_pairs += "&";}
s_key_value_pairs += o_form.elements[i].name + "=" + escape(o_form.elements[i].value);
}
break;
default:
if (o_form.elements[i].value.trim().length > 0)
{
if (s_key_value_pairs.length > 0) {s_key_value_pairs += "&";}
s_key_value_pairs += o_form.elements[i].name + "=" + escape(o_form.elements[i].value);
}
break;
}
}
}
}
_o_http.open(_s_method, _s_url, true);
_o_http.onreadystatechange = process;
if (_s_method == "POST") {_o_http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");}
else {_o_http.setRequestHeader("Content-type", "");}
_o_http.send(s_key_value_pairs);
}
function set_method(s_method)
{
if ((s_method == "GET") || (s_method == "POST")) {_s_method = s_method;}
else {alert("AJAX error: Please use GET or POST method.");}
}
function set_callback(o_function)
{
_o_callback = o_function;
}
function set_url(s_url)
{
//add regex url-checking here?
_s_url = s_url;
}
function process()
{
if (_o_http.readyState == 4)
{
if ((_o_http.status == 200) || (_o_http.status == 0))
{
if (_o_callback) {_o_callback(get_result());}
}
else
{
//error handling here
alert("Error: " + _o_http.statusText);
}
}
}
function get_xmlhttprequest()
{
var request = false;
try
{
request = new XMLHttpRequest();
}
catch(err1)
{
try
{
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(err2)
{
try
{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(err3)
{
alert("Can't create object.");
request = false;
}
}
}
return request;
}
function get_result()
{
if (_o_http.responseText.length > 0) {return _o_http.responseText;}
else {return _o_http.responseXML;}
}
}
3. Create get_second_info.html and paste the following code:
Code:
o_select = document.getElementById("second");
o_select.options[o_select.length] = new Option("display1", "value1", false, false);
o_select.options[o_select.length] = new Option("display2", "value2", false, false);
4. Create get_third_info.html and paste the following code:
Code:
o_select = document.getElementById("third");
o_select.options[o_select.length] = new Option("display111", "value111", false, false);
o_select.options[o_select.length] = new Option("display222", "value222", false, false);
5. Now load test.html in your browser and watch AJAX (actually AJAJ) at work 
.
Note that you can use any type of dynamic file to create your get_xxxxx.xxx pages. For instance, I would use PHP to get records from a database, and then iterate through the results to create the JavaScript in the page. My version is merely simplified to illustrate the basic principle.
Also, to simplify usage of AJAX I have create my own AJAX class, which is defined in mgb_ajax.js. This provides me with all the tools I need to perform ajax, and that way I don't have to rewrite AJAX functionality everytime I want to use it.
Bookmarks