Lets start from view:
Drop Down Menu In your JSP/HTML
<select id = "Language" onchange="javascript:AjaxEx.sendAjaxRequest();"> <option value ='en'>EN</option> <option value ='fr'>FR</option> </select>
AJAX code that reqired to be include in the view
(function() {
AjaxEx = {
init: function(url, elId) {
if (!url || !elId) {
alert("Invalid input!");
return;
}
this.url = url;
var el = document.getElementById(elId);
if (!el) {
alert("Container Element, to place Ajax response doesn't exists!");
return;
}
this.el = el;
this.sampleHtml = "This will be replaced with AJAX response!
";
// create xml http request object for AJAX requests
this.xmlHttp = this.initXmlHttp();
}, // End of init()
initXmlHttp : function () {
if (window.XMLHttpRequest)
// Firefox, Opera, IE7, etc.
return new XMLHttpRequest();
if (window.ActiveXObject)
// IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}, // End of initXmlHttp()
resetContent : function () {
this.el.innerHTML = this.sampleHtml;
}, // End of resetContent()
sendAjaxRequest : function () {
// initialize XML Http object if not available
if (!this.xmlHttp)
this.xmlHttp = this.initXmlHttp();
if (this.xmlHttp) {
var ajaxObj = this;
this.xmlHttp.onreadystatechange = function() {
if (ajaxObj.xmlHttp.readyState==4 && ajaxObj.xmlHttp.status==200) {
// 4 = "loaded", 200 = "OK"
ajaxObj.el.innerHTML = ajaxObj.xmlHttp.responseText;
}
};
var selBox = document.getElementById("Language");
// prepare parameters
var langSalect = selBox.options[selBox.selectedIndex].value;
if (langSalect == "") {
alert("Please select language!");
return;
}
var params = "langSalect=" + langSalect;
// for multiple parameters separate them by '&' as given below
// var params = "empCode=E1001&dept=TestDept"
this.makePOSTRequest(params);
// this.makeGETRequest(params);
} else
alert("Your browser does not support AJAX.");
}, // End of sendAjaxRequest()
makePOSTRequest : function (params) {
this.xmlHttp.open("POST", this.url, true);
//Send the proper header information along with the request
this.xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
this.xmlHttp.setRequestHeader("Content-length", params.length);
this.xmlHttp.setRequestHeader("Connection", "close");
this.xmlHttp.send(params);
}, // End of makePOSTRequest()
makeGETRequest : function (params) {
this.xmlHttp.open("GET", this.url + "?" + params, true);
this.xmlHttp.send(null);
} // End of makeGETRequest()
} // End of AjaxEx
})();
Create Your AJAX content object as fallows for submission of the perticular url and the tag id whose content need to be set Asynchronously
<script type="text/javascript">
<var url = "...../DBServlet">
<var ajaxObj = document.getElementById('.....')>
<AjaxEx.init(url, "ajaxObj">
</script>
