Retards/incohérences dans AJAX refresh

Question

J'ai travaillé sur une application Web qui permet aux utilisateurs de soumettre du contenu et d'avoir ce contenu, et aujourd'hui, j'ai vu des résultats inattendus sans apporter de changements significatifs.

La fonctionnalité de base de l'application est que l'utilisateur soumet certaines données POST d'un formulaire sur une page Web index.php, après quoi un script PHP submit.php est exécuté pour ajouter les données à une table dans une base de données. Pendant ce temps, une fonction Jquery sur index.php rafraîchit le contenu d'un div avec des lignes sélectionnées dans la table au moyen d'un script load.php, et la fonction est appelée une fois par seconde. Le problème est qu'aujourd'hui, soudainement, je vois de longs délais (entre 10 et 20 minutes) entre le moment où les données sont ajoutées à la table et celles qui apparaissent dans la div rafraîchie par JQuery. De plus, le div oscille entre son contenu existant et le nouvel ensemble de données avec les valeurs ajoutées, comme s'il alternait entre les résultats en temps réel de load.php et un appel précédent au même script. J'ai vérifié la base de données MySQL avant et après submit.php est appelée et j'ai vérifié que les données sont ajoutées instantanément une fois qu'il est soumis, donc le problème a quelque chose à voir avec comment le script load.php est appelé de Jquery.

Cela vient de commencer aujourd'hui. Étrangement, j'ai observé ce même comportement avec une autre application AJAX que j'ai créée plus tôt pour tester le même mécanisme d'E/S, et je n'ai pas touché le code de cette application depuis plus d'une semaine. Mon administrateur système dit qu'il n'y a eu aucune modification au serveur qui pourrait en tenir compte. J'ai posté tout le code pour fournir toutes les informations nécessaires, mais je pense que le problème est soit load.php ou le javascript updateMyContent() en index.php

index.php

<script language="JavaScript"> 

setInterval("updateMyContent();",1000); 
$(function(){ 
    updateMyContent=function(){ 
     $('#refreshData').load("./module/load.php").fadeIn("slow"); 
    } 
}); 

</script> 

<script language="JavaScript"> 

$(document).ready(function(){ 
    $('#submitForm').on('submit',function(e){ 
     $.ajax({ 
      url:'./module/submit.php', 
      data:$('#submitForm').serialize(), 
      type:'POST', 
      success:function(data){ 
       console.log(data); 
       $("#success").show().fadeOut(5000); 
       $('#textID').val(''); 
      }, 
      error:function(data){ 
       $("#error").show().fadeOut(5000); 
      } 
     }); 

     e.preventDefault(); 
    }); 
}); 

</script> 



<div style="float: right; 
     top: 0; 
     " id="submitDiv"> 
    <form id="submitForm" action="" method="post"> 
     <textarea id="textID" type="text" name="content" rows=5></textarea> 
     <input type="submit" value="send" name="submit"/> 
    </form> 
    <br> 
    <span id="error" style="display: none; color:#F00">error</span> 
    <span id="success" style="display:none; color:#0C0">success</span> 
</div> 
<div style="float: center;" id="refreshData"></div> 

submit.php

<?php 
    if(isset($_POST['content'])) 
    { 
     $content=$_POST['content']; 
     $dsn="mysql:host=someserver.net;dbname=thisdb;charset=utf8"; 
     $db=new PDO($dsn,'thisdb','password'); 
     $insertSQL="insert into submission (content) values (?)"; 
     $stmt=$db->prepare($insertSQL); 
     $stmt->execute(array($content)); 
    } 
    else 
    { 
     echo "FAIL!"; 
    } 
?> 

load.php

<?php 
    try 
    { 
     $dsn="mysql:host=someserver.net;dbname=thisdb;charset=utf8"; 
     $db=new PDO($dsn,'thisdb','password'); 
     $PDOsql="select * from submission order by id desc"; 
     $stmt=$db->query($PDOsql); 
     foreach($stmt->fetchAll(PDO::FETCH_ASSOC) as $resultRow) 
     { 
      printf("%s<br>",$resultRow["ID"]); 
      printf("%s<br>",htmlspecialchars($resultRow["content"])); 
     $stmt->closeCursor(); 
     } 
    } 
    catch(PDOException $ex) 
    { 
     echo "an error occurred! ".$ex->getMessage(); 
    } 
?> 

Answer 1

Le problème avec elle tant de temps pour retourner la réponse Ajax est sans doute que la table submissions a grandi. Plutôt que chaque seconde chargement de toutes les soumissions, ajouter seulement de nouvelles soumissions à la div. C'est à dire. garder une trace du dernier identifiant reçu et l'utiliser dans la requête afin que la clause where soit limitée.

De plus, la div scintille et-vient entre son contenu existants et les nouvelles données définies avec les valeurs ajoutées, comme si elle était en alternance entre les résultats en temps réel de load.php et un appel précédent au même script.

La réponse Ajax peut être mise en cache par le navigateur comme toute autre chose. Pour éviter cela, vous pouvez:

1. Mettez les en-têtes no-cache dans la page qui traite la demande pour empêcher la mise en cache du navigateur des réponses Ajax. IE est particulièrement têtu et nécessitera les en-têtes les plus puissants.Ajoutez un paramètre à votre requête Ajax qui est un nombre aléatoire, pour rendre chaque requête unique.

2. Dites à JQuery d'empêcher la mise en cache (elle ne fait que # 2 pour vous). Utilisez $.ajaxSetup ({ cache: false }); ou ajoutez l'attribut cache: false, à chaque appel à $.ajax