Javascript dysfonctionnement dans Internet Explorer

Question

Here is a demo En bref bref: Si quelqu'un clique sur le changement de texte next() la fonction sera déclenchée.

next() La fonction envoie les données relatives à ajax_next_track.php et récupère une donnée aléatoire.

Puis il remplace les textes en artist_name et track_name avec les données aléatoires.

Tout cela fonctionne très bien dans Firefox et Chrome. Cependant, il ne le fait pas dans Internet Explorer. Si vous cliquez sur modifier le texte plus de deux fois avec différents navigateurs, vous pouvez voir le problème. Dans les autres navigateurs, il y aura une heure de fonctionnement avec le texte 'loading ...' à l'écran; mais cela arrive immédiatement, sans temps de fonctionnement dans Internet Explorer.

La fonction next() ne peut pas envoyer les données au fichier ajax.

Alors, comment puis-je le réparer?

Merci d'avance.

function next(tags) 
    { 
     var hr = new XMLHttpRequest(); 
     var url = 'ajax_next_track.php?tags=' + tags; 
     hr.open("GET", url, true); 
     hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     hr.onreadystatechange = function() 
     { 
      if(hr.readyState == 4 && hr.status == 200) 
      { 
       var return_data = hr.responseText; 
       jsonObj = JSON.parse(return_data); 
       document.getElementById("artist_name").innerHTML = jsonObj.artist_name; 
       document.getElementById("track_name").innerHTML = jsonObj.track_name; 
       document.getElementById("name").title = 'play '+jsonObj.artist_name+' - '+jsonObj.track_name+' radio'; 

      else 
      { 

      } 
     } 

     document.getElementById("track_name").innerHTML = 'loading...'; 
     document.getElementById("artist_name").innerHTML = ''; 
     hr.send(null); 
} 

---

<div id="player"> 
    <div id="playPauseOutDiv" onclick="pause();"> 

    </div> 
     <div id="artist_track"> 
      <span id="artist_name">gerry rafferty</span> 
      <span id="track_name">baker street</span> 
     </div> 
    </a> 

    <div id="ikinciSatir"> 
     <a id="changeSong" title="Shuffle" href="javascript:void(0);" onclick="next('3871');">Change</a> 
    </div> 
</div> 

Answer 1

J'ai rencontré le même problème il y a seulement 2 jours. J'utilisais IE8, et l'appel ajax suivant n'était pas vraiment fait mais IE8 essaye d'utiliser le cache à la place.

Je trouve cette page de documentation ajax

Par défaut, les demandes sont toujours émis, mais le navigateur peut servir des résultats de son cache. Pour interdire l'utilisation des résultats mis en cache, définissez cache sur false. Pour que la demande signale un échec si l'actif n'a pas été modifié depuis la dernière requête, définissez ifModified sur true.

Essayez si ça aide. Voici la documentation http://api.jquery.com/jQuery.ajax/

Answer 2

L'erreur dans le débogueur IE dit line 40 document.getElementById("name") is null or not an object. Je vois des portées nommées "ARTIST_NAME" et "TRACK_NAME" dans votre code html, mais pas de "nom".

Answer 3

Pour une raison quelconque, IE met en cache le fichier JSON et obtient 304 réponses non modifiées au lieu de 200 OK chaque fois après le 1er.

La solution de contournement la plus simple pour cela qui n'a pas besoin de modifier les paramètres côté serveur consiste à ajouter un paramètre aléatoire à l'URL demandée à chaque requête, par exemple.

var url = 'ajax_next_track.php?tags=' + tags + '&nocache=' + Math.random();