Igor Igor - 1 year ago 66
Javascript Question

Issues with GET Ajax method

I started to work with ajax some time ago, but I'm getting a strange problem that I don't have any idea of the reason.

I work with 3 files to make all my pages: a header, a footer and the content files. In header I put my ajax code that is something like this:

$(document).on("click", '.ajax a', function (e) {
var href = $(this).attr("href");
if (href == location.pathname) return; // Prevent from refresh on click the current page link
loadContent(href); // Make the AJAX call
window.history.pushState('', '', href); // Changes the link

window.onpopstate = function(event) {

///////////////////////////////////////AJAX ITSELF
function loadContent(url){
error: function(){
alert("Oops, something went wrong :(");
$('#content').html(data); // Inject page into the content div
document.title = $("#titulosads").val(); // Changes the page title


After that I open the
that will be closed in footer.

And in each page file, I use these codes for include the
and the
when is needed:

function includeheader($pagename, $pagedescription)
$title = $pagename;
$description = $pagedescription;
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
echo "<input type='hidden' id='titulosads' value='".$title."' />";
} else {
include 'header.php';

And for the footer:

function includefooter()
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
} else {
include 'footer.php';

So, basically, this is my pages:

include_once 'includes/checkajax.php';

Content of the page here!


Well, this is my issue: it gets a little strange when I use the GET method of AJAX.

Things get duplicated when you click in other link and back on the first. You can check it on http://feely.com.br

When I change the method to POST or when I activate chrome dev tools that disable the cache, everything works fine.

Oh, there is a lot of errors on console that I don't have idea about what they mean.

A picture of the errors:

Duplicated content

Help :(

Answer Source

Well, if you yourself already found out that this is a caching issue, then follow that hint:

Either take care that you mark your requests to not getting cached by the browser by means of http headers you add, or use a unique URL for the requests, that is typically done by simply adding a micro time based request argument to the URL. The preferred method however is to use http headers to tell the browser how to handle a response payload. That is what http headers are for...

PHP offers the header() function for that:

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download