I'm encountering a strange issue that I've been trying to troubleshoot for some time now with no luck. I'm currently developing a website and have decided to load each subpage (content) dynamically using AJAX, including .js and .css files for each subpage. However, whenever I make changes to scripts or CSS files in one of the subpages and refresh the page, the changes don't seem to take effect. It's almost as if AJAX is somehow remembering the previous version. Oddly enough, when I leave it alone for a while and come back later, the changes miraculously appear. Any thoughts on what might be causing this? I want to ensure that there's no cache or memory retention interfering with my development process. I should note that I'm not using jQuery; instead, I'm relying on pure JavaScript and my own custom function for AJAX connection. Could there be something missing from my function? Here it is:
function sendQuery( data )
{
var http = new XMLHttpRequest();
var url = data["url"];
var params = "";
var query = data["params"];
for(var key in query)
params+=key+"="+query[key]+"&";
params=params.substring(0,params.length-1);
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.send(params);
http.onreadystatechange = function()
{
if(http.readyState == 4 && http.status == 200)
{
data["result"](http.responseText);
}
}
}