certains aident à comprendre le code ajax s'il vous plaît

Question

je suis allé à travers quelques tutoriels, mais le code dont j'ai hérité est probablement avancé. quelqu'un peut-il m'aider à comprendre ce code et à m'expliquer pas à pas s'il vous plaît? tout ce que je sais est, quand je mets à jour/Changeons desc et la couleur, le libellé même de l'humeur et la couleur desc i tapé change de couleur ...

function ax_update_mood() 
{ 
    //what is it doing here? 
    var str_mood_desc = $('#moodmeter_form_mood_desc').val(); 
    var str_mood_color = $('#moodmeter_form_mood_color').val(); 

    //understand this part 
    if(str_mood_desc.length < 3 || str_mood_desc.length > 32) 
    { 
alert('Mood Description must be between 3 - 32 characters long.'); 
return 
    } 

//understand this part 
if(str_mood_color.length < 1 || str_mood_color.length > 32) 
{ 
alert('Mood Color must be between 3 - 32 characters long.'); 
return 
} 

//have NO idea on what is going on here! 
$.ajax({ 
type: "POST", 
url: "moodupdate", 
data: "mood_desc="+str_mood_desc+"&mood_color="+str_mood_color, 
success: function(msg) 
{ 
    ax_get_mood(); 
    alert("Mood Updated"); 
} 
}) 
} 

function ax_get_mood() 
{ 
    //this is also a complete mistery, have no idea what this code does 
$.getJSON('/apps.php/profile/getmood', function(data) 
{ 
    //const TIME_DIFF = 180; 
    var td_mood_color  = $('#current_mood_color'); 
    var td_mood_desc  = $('#current_mood_desc'); 
    var spn_mood_updated_at = $('#spn_updated_at'); 

    if(data.date_diff_in_min < 180) 
    { 
     spn_mood_updated_at.removeClass().addClass('span_mood_red'); 
    td_mood_desc.removeClass().addClass('span_mood_red'); 
    td_mood_color.removeClass().addClass('span_mood_red'); 
    } 
    else 
    {  spn_mood_updated_at.removeClass().addClass('span_mood_blue'); 
     td_mood_desc.removeClass().addClass('span_mood_blue'); 
     td_mood_color.removeClass().addClass('span_mood_blue'); 
    } 

    spn_mood_updated_at.text(data.mood_updated_at); 

    td_mood_color.text(data.mood_color); 
    td_mood_desc.text(data.mood_desc); 

}); 
} 

merci

Answer 1

Voir cet article pour les bases de AJAX, que vous avez probablement déjà fait.

En résumé, trois étapes:

//Step 1. get the XMLHTTPRequest object 
if (window.XMLHttpRequest) //All mordern browsers 
{ 
    obj = new XMLHttpRequest(); 
} 
else if (window.ActiveXObject) //IE6, 7 
{ 
    obj = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
else 
{ 
    alert("Your browser does not support AJAX"); 
    return; 
} 

// Step 2: set the callback function, as processMoodUpdateResponse 
//This function will be called when the response for the 
//call (done in step 3) comes back 

obj.onreadystatechange = processMoodUpdateResponse; 
// Step 3: Do the server call. 
//"POST" is the request type, true for asynchronous request 
var url = "moodupdate?mood_desc="+str_mood_desc+"&mood_color="+str_mood_color 
obj.open("POST", "moodupdate", true); 
obj.send(); 

//The callback function 
function processMoodUpdateResponse() 
{ 
     ax_get_mood(); 
     alert("Mood Updated"); 
} 

Le code que vous avez hérité utilise JQuery Ajax.

Ce qui suit crée une requête Ajax, enregistre le rappel et soumet, est équivalente à ce qui précède (et bien sûr plus jquerish et plus simple)

$.ajax({ 
type: "POST", 
url: "moodupdate", 
data: "mood_desc="+str_mood_desc+"&mood_color="+str_mood_color, 
success: function(msg) 
{ 
    ax_get_mood(); 
    alert("Mood Updated"); 
} 
}) 

Le getJSON est une autre méthode de jQuery, pour effectuer un appel de serveur et obtenir une réponse JSON. Il est étrange qu'un rappel Ajax (qui est appelé quand une réponse arrive) fait un autre appel ajax.

$('#current_mood_color') est équivalent à document.getElementById('current_mood_color');. C'est la manière de jquery de sélectionner un élément par son identifiant. JQuery comme un très puissant (et pratique) selector API, et c'est l'un des moyens de base pour sélectionner un élément.

#someThing fait référence à un élément avec l'ID someThing, donc la recherche de someThing dans votre base de code retournera quelque chose.

Answer 2

au début offical docs et tout devrait être plus clair:

http://api.jquery.com/jQuery.ajax/

et

http://api.jquery.com/jQuery.getJSON/

Answer 3

Si vous rencontrez des problèmes pour comprendre la syntaxe, le code utilise la bibliothèque JQuery pour obtenir la valeur de moodmeter_form_mood_desc et moodmeter_form_mood_color, pour envoyer une requête ajax à target, et pour analyser les données JSON.

Pour plus d'informations, voir: http://jquery.com/, rechercher jQuery.ajax() et jQuery.getJSON()

Answer 4

Le code que vous avez posté utilise jQuery. Les 2 premières lignes de la fonction obtiennent simplement la valeur de 2 éléments (probablement input éléments), et assignent ces valeurs aux variables.

La partie $.ajax utilise la fonction jQuery ajax pour envoyer des données via une requête HTTP POST, à tout fichier se trouve à l'adresse moodupdate. Les données envoyées sont construites en tant que chaîne sur la ligne suivante, en utilisant les valeurs obtenues précédemment.

La ligne suivante spécifie une fonction qui s'exécutera en cas de succès de la requête AJAX. Cette fonction appelle à son tour la fonction ax_get_mood qui utilise la fonction jQuery getJSON pour effectuer une autre requête asynchrone à /apps.php/profile/getmood et traite la réponse (qui sera au format JSON, comme indiqué par l'utilisation de getJSON au lieu d'une autre fonction ajax) dans une autre fonction anonyme.