I've written an AJAX function that goes like this:
function ajx(){
var ajaxRequest; // This variable makes Ajax possible!
try{
// Works in 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){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// A function to handle data received from the server
ajaxRequest.onreadystatechange = function(){
// alert(ajaxRequest.readyState);
if(ajaxRequest.readyState == 4){
//alert(ajaxRequest.responseText);
var res = ajaxRequest.responseText;
var a = JSON.parse(res);
var v1 = a[0];
var v2 = a[1];
var v3 = a[2];
//alert(v1);
document.getElementById('vara').value = v1;
document.getElementById('varb').value = v2;
document.getElementById('varc').value = v3;
}
}
ajaxRequest.open("GET", "ajax.php", true);
ajaxRequest.send(null); }
The HTML with the id attributes looks like this:
<div id="vara"></div>
<div id="varb"></div>
<div id="varc"></div>
Here's the ajax.php file:
<?php
$resp = array('man','cow','dog');
echo json_encode($resp);
?>
When I try to alert v1, v2, or v3, it shows man, cow, and dog respectively. But the values are not being displayed in the HTML. What could be the issue?