Quel est le problème avec cette fonction jQuery/Ajax?

Question

J'ai une salle de discussion en ligne qui utilise jQuery/Ajax pour demander des données au serveur. Cependant, la méthode que j'utilise est très inefficace et j'essaie de l'améliorer en chargeant seulement les données du serveur si le contenu du chat a été changé (nouveau message, etc.) La méthode semble être logiquement correcte, bien qu'elle n'évalue jamais à vrai. J'ai joint le code ci-dessous, s'il vous plaît dites-moi ce que je fais mal car cela me donne un moment très difficile. Je veux que le chat div soit modifié uniquement lorsque les données du serveur sont différentes.

function loadMsgs() 
{ 
var v_loadMsgs = new XMLHttpRequest(); 

v_loadMsgs.open("GET", "msgs.php"); 

v_loadMsgs.onreadystatechange = function() 
{ 
    var old_content = $("#msgs").html(); 
    var new_content = v_loadMsgs.responseText; 

    if (old_content != new_content) 
    { 
     $("#msgs").html(new_content); 
    } 

    if (old_content == new_content) 
    { 
     $("#msgs").html("EQUAL!"); // only here for testing 
    } 
}; 

v_loadMsgs.send(null); 
} 

Answer 1

J'utiliserais simplement les fonctions AJAX de jQuery. Ils font vraiment tout simple:

function loadMsgs() 
{ 
    jQuery.get("msgs.php", function(data) 
    { 
     if ($("#msgs").html() != data) 
     { 
      $("#msgs").html(data); 
     } else { 
      $("#msgs").html("EQUAL!"); // only here for testing 
     } 
    }); 
} 

Si vous voulez vraiment savoir pourquoi votre méthode ne fonctionne pas, vous n'êtes pas vérifier si le serveur vous envoie en fait une réponse (qui renvoie une readyState de 4):

function loadMsgs() 
{ 
var v_loadMsgs = new XMLHttpRequest(); 

v_loadMsgs.open("GET", "msgs.php"); 

v_loadMsgs.onreadystatechange = function() 
{ 
    if (v_loadMsgs.readyState == 4) 
    { 
     var old_content = $("#msgs").html(); 
     var new_content = v_loadMsgs.responseText; 

     if (old_content != new_content) 
     { 
      $("#msgs").html(new_content); 
     } 

     if (old_content == new_content) 
     { 
      $("#msgs").html("EQUAL!"); // only here for testing 
     } 
    } 
}; 

v_loadMsgs.send(null); 
} 

Answer 2

essayer d'utiliser jquery's ajax functions

Answer 3

Lorsque vous faites .html(), le navigateur HTML vous donne parfaitement formaté. Autrement dit, tous les tags sont fermés, tous les attributs entre guillemets, ce genre de chose. Et ce que vous revenez de msgs.php est, très probablement, pas parfaitement formaté. Par conséquent, la différence.

Si vous êtes inquiet au sujet de l'inefficacité, cependant, cette méthode serait très inefficace. Je veux dire, oui, vous ne mettez plus à jour l'UI inutilement, mais vous chargez toujours la liste des messages du serveur, n'est-ce pas?

Afin d'économiser quelques octets ici, vous devriez plutôt avoir utilisé la technique "si-modifié". C'est, avec la liste des messages, retourner une sorte d'horodatage. Dites, juste un nombre entier. Lorsque quelque chose change sur le serveur, augmentez cet entier de un. Lorsque vous demandez une mise à jour au serveur, demandez à votre code AJAX de passer l'horodatage reçu précédemment, puis demandez au serveur de répondre "rien n'a changé" si l'horodatage est en cours. Sinon, demandez au serveur de transmettre la nouvelle liste de messages. C'est, à peu près, l'idée.