2012-05-06 2 views
2

Je travaille actuellement avec un site d'achat en ligne où différents produits doivent être notés. J'utilise un script de classement par étoiles. Tout fonctionne bien, mais un produit ne devrait être évalué qu'une seule fois en fonction de la propriété intellectuelle du visiteur et une fois que le visiteur clique sur une étoile (parmi les cinq étoiles), toutes les étoiles devraient être désactivées. la même adresse IP peut être évitée (j'utilise aussi des validations côté serveur) et la note moyenne selon la nouvelle valeur de la base de données devrait être indiquée par les mêmes étoiles (qui viennent d'être désactivées).Ajax ne fonctionne pas correctement avec Internet Explorer

Cela fonctionne sur Firefox sans aucun problème. Lorsqu'un visiteur clique sur une étoile, une nouvelle valeur est transmise à la base de données (en utilisant Ajax) et selon la nouvelle valeur, l'estimation moyenne est calculée et affichée mais Internet Explorer ne peut pas récupérer la nouvelle valeur de la base de données en utilisant Ajax.

Je ne fais que démontrer le problème avec un code très simple comme suit.

Ce qui suit est le fichier Temp.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<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() 
    { 
     if(window.XMLHttpRequest) 
     { 
      xmlhttp=new XMLHttpRequest(); 
     } 
     else 
     { 
      xmlhttp = new ActivexObject("Microsoft.XMLHTTP"); 
     } 
    } 

    function loadStars(prod_id) 
    { 
     ajax(); 

     xmlhttp.onreadystatechange=function() 
     {   
      if(xmlhttp.readyState==4 && xmlhttp.status==200) 
      {        
       document.getElementById("ajax_response").innerHTML=xmlhttp.responseText; 
       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; 
     xmlhttp.open("GET", queryString, true); 
     xmlhttp.send();    
    } 
</script> 
</head> 

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

et ce qui suit est le Temp1.php


<?php 
    include_once("../Connection.php"); 
    $con=new Connection(); 
    $con->get_connection(); 

    if(isset($_GET['prod_id'])) 
    {   
     $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'/>";                  
    } 
?> 

Le code dans les deux fichiers n'a rien à voir avec. La fonction js loadStars(prod_id) est appelée sur l'événement onload (regardez la balise body) qui invoque en fait la demande Ajax à la Temp1.php qui récupère rating_num de la base de données et stocke simplement dans un champ caché nommé rating_value qui est finalement alerté sur le fichier Temp.php en utilisant alert(rating);

la question réelle est ici lorsque la valeur de rating_num est modifiée dans la base de données , Firefox affiche la valeur mise à jour qui est l'explorateur essentiel mais Internet (8) affiche toujours la valeur ancienne, même si la page est actualisée et reload encore et encore.

Quelle devrait être la raison? Y-a t'il une solution à ce problème? J'espère que vous serez en mesure de comprendre ce que je veux dire.

Répondre

6

Internet Explorer fait parfois des choses amusantes avec la mise en cache. Il tend à prendre une approche beaucoup plus intense de la mise en cache que les autres navigateurs. Le cache est une bonne chose lorsque nous accédons normalement à la même ressource deux fois, trois fois ou plus. Dans le cas d'un contenu statique, nous voulons que le navigateur soit suffisamment intelligent pour ne pas demander les données qu'il a déjà récupérées, car cela économise du temps et de la bande passante.

Toutefois, les requêtes AJAX sont différentes en ce qu'elles sont généralement dynamiques. La même demande faite à un moment donné peut évidemment donner un résultat complètement différent à un autre moment. Par conséquent, nous ne voulons normalement pas mettre en cache une requête AJAX.

Cependant, la mise en cache intense d'IE pose problème en ce qui concerne les requêtes AJAX. Le navigateur traite une requête AJAX exactement comme s'il demandait une image statique immuable, et il récupérait les résultats précédents de cette requête dans son cache comme si rien n'avait changé.

Ce n'est évidemment pas quelque chose que vous voulez qu'Internet Explorer fasse. Ainsi, la technique la plus simple et la plus rapide que vous pouvez utiliser pour forcer IE à extraire de nouvelles données consiste à apporter une légère modification à l'URL à chaque fois.

Heureusement pour nous, le temps est quelque chose qui va de l'avant en permanence, et par sa nature même, il est garanti d'être unique. Voici comment vous pouvez éviter ce problème:

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

En apposant le temps d'époque à la fin de la chaîne de requête, nous nous assurons que l'URL sera toujours unique, assurant que le navigateur prend toujours du nouveau contenu à partir du serveur . J'utilise cette technique sur toutes mes requêtes AJAX et je l'ai trouvé extrêmement utile.

+1

Quelle solution! J'aurais pu donner +1000 mais très malheureusement, je n'ai que +1. – Bhavesh

+1

Je suis heureux d'avoir pu aider. – jmort253

Questions connexes