My goal in this coding situation is to change values in multiple DOM targets. The example from Tizag shows the DOM being altered within the onreadystatechange function, like this:
if(ajaxRequest.readyState == 4){
document.myForm.time.value = ajaxRequest.responseText;
}
However, I wanted to experiment with returning a value instead of directly changing the DOM. I modified the code accordingly, but encountered issues.
Below is the revised code where I attempted to access 2 different scripts towards the end. Is it feasible to accomplish this task?:
function ajaxFunction(){
var ajaxRequest; // Key variable enabling Ajax functionality
try{
// Compatible with Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// For Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Error handling for unexpected scenarios
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
return ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "/time.php", true);
var time = ajaxRequest.send(null);
ajaxRequest.open("GET", "/date.php", true);
var date = ajaxRequest.send(null);
document.getElementById('time').innerHTML = time;
document.getElementById('date').innerHTML = date;
}