304 not modified, Ajax is not working?

Question

<script>
var xmlHttp =new XMLHttpRequest();
var url= "summary.txt";
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var myArr = JSON.parse(xmlHttp.responseText);
myFunction(myArr);
}
xmlHttp.open("GET", url , true);
xmlHttp.send();
}   function myFunction(arr)
var output="";
var i;
for(i=0;i<arr.length;i++){
    output+='<p>'+arr[i].title+arr[i].image+arr[i].price+'</p>';    
}
document.getElementById("proTab").innerHTML = output;
}
</script>

I stored all both the HTML and JSON in the htdocs folder, did xampp start and made sure Apache and mysql were running on the control panel. I then typed the link to the html using the "localhost/" to get to the html but the page was blank. Sorry for all the details.

Console says 304 Not modified. What should I do?

Answer 1

My guess is that you are using IE, which caches AJAX GET requests aggressively. I would suggest changing to using POST for the AJAX request.

Another alternative if you must use GET requests. You can add a unique querystring value to each GET request like this:

var url = 'summary.txt' + '?' + Math.random()*Math.random();

Answer 2

I used this for jQuery AJAX:

$.ajaxSetup({
    // Disable caching of AJAX responses
    cache: false
});

I think you can find how to use this for JS without jQuery. So the idea is to clear cache before sending the request, because server responds that nothing changed and sends 304 NOT MODIFIED instead of 200 OK. Namely, your summary.txt hasn't changed (not modified), so that's what server telling you.