Bhavesh Bhavesh - 1 year ago 67
Javascript Question

Ajax doesn't work properly with Internet Explorer

I'm currently working with an e-commerce shopping site where different products require to be rated. I'm using a star rating script.

Everything is working fine but a product should be rated only once according to the visitor's IP and once the visitor clicks a star (among the five stars), all the stars should be disabled so that duplicate rating for the same product with the same IP can be prevented (I'm also using serve side validations) and average rating according to the new value from the database should be indicated by the same stars (which have just been disabled).

It's working on Firefox with no problem at all. When a visitor clicks a star a new value is passed to the database (using Ajax) and according to the new value, average rating is calculated and displayed but Internet explorer is unable to retrieve the new value from the database using Ajax.

I'm just demonstrating the problem with very simple code as follows.

Following is Temp.php file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" language="javascript">
var xmlhttp;
function ajax()
xmlhttp=new XMLHttpRequest();
xmlhttp = new ActivexObject("Microsoft.XMLHTTP");

function loadStars(prod_id)

if(xmlhttp.readyState==4 && xmlhttp.status==200)
var rating= document.getElementById("rating_value").value;
alert(rating); //Rating value of hidden field from the ajax response is alered.

var queryString="Temp1.php?prod_id="+prod_id;"GET", queryString, true);

<body onload="loadStars(11);">
<span id="ajax_response"></span>

and the following is the Temp1.php

$con=new Connection();

$result=mysql_query("select rating_num from rating where prod_id=".$_GET['prod_id']."");
$rating=mysql_result($result, 'rating_num');
echo "<input type='hidden' id='rating_value' name='rating_value' value='$rating'/>";

The code in both the files has nothing to do with. The js function
is called on the
event (look at the body tag) which actually invokes the Ajax request to the
which retrieves
from the database and simply stores into a hidden field named
which is finally alerted on the
file using

The actual question is here when the value of
is changed in the database, Firefox displayed the updated value which is essential BUT Internet explorer (8) still displays the old value even though the page is refreshed and reload again and again.

What should be the reason? Is there any solution to this problem? Hope you will be able to understand what I mean.

Answer Source

Internet Explorer does some funny stuff with caching sometimes. It tends to take a much more intense approach to caching than other browsers. The cache is a great thing when we normally access the same resource twice, three times, or more. In the cases of static content, we actually want the browser to be smart enough to not request data it already has retrieved, as this saves time and bandwidth.

However, AJAX requests are different in that they are generally dynamic. The same request made at one moment in time may of course yield a completely different result at another moment in time. As a result, we don't normally want to cache an AJAX request.

However, IE's intense caching becomes a problem when it comes to AJAX requests. The browser treats an AJAX request just like it would a request for a static, unchanging image, and it pulls the previous results of that request from it's cache as if nothing has changed.

This is of course not something that you want Internet Explorer to do. Thus, the quickest and simplest technique you can use to force IE to pull fresh data is to make a slight modification to the URL each time.

Lucky for us, time is something that constantly moves forward, and by its very nature, it is guaranteed to be unique. Here is how you can avoid this problem:

var queryString="Temp1.php?prod_id="+prod_id + "&t=" + new Date().getTime();

By appending the epoch time to the end of the query string, we ensure that the URL will always be unique, ensuring that the browser always grabs fresh content from the server.

I use this technique on all of my AJAX requests and have found it to be extremely valuable.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download