いくつかの助けajaxコードを理解してください

Question

私はいくつかのチュートリアルを行ったが、私が継承したコードはおそらく高度です。 このコードを理解するのに役立つものがありますか、それを私に説明してください。私が知っているすべては、私が更新するとき/気分descと色を変え、私は変化の色で入力した気分descと色の実際の文言...

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); 

}); 
} 

公式であなたに

Answer 1

おそらくすでに完了しているAJAXの基本については、この記事を参照してください。

//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"); 
} 

あなたが継承されているコードは以下は、Ajaxリクエストを作成し、コールバックを登録し、提出する、上記（そしてもちろんのに相当しJQuery Ajax.

を使用しています：三つのステップをまとめると

、よりjquerishとシンプルな）

$.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"); 
} 
}) 

getJSONですjQueryのもう1つのメソッド。サーバコールを行い、JSONというレスポンスを得る。 Ajaxコールバック（応答が来たときに呼び出される）が別のajax呼び出しを行うのは奇妙です。

$('#current_mood_color')は、document.getElementById('current_mood_color');に相当します。これはjqueryのidで要素を選択する方法です。 JQueryは非常に強力な（そして便利な）selector APIであり、これは要素を選択する基本的な方法の1つです。

#someThingは、idがsomeThingの要素を指しているため、コードベースでsomeThingを検索すると何かが返されます。

Answer 2

スタートに感謝ドキュメントとすべてが明確になるはずです：

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

と

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

Answer 3

構文を理解する上で問題がある場合、コードはmoodmeter_form_mood_descとmoodmeter_form_mood_colorから値を取得し、ターゲットにajaxリクエストを送信し、JSONデータを解析するためにJQueryライブラリを使用しています。詳細情報については

、以下を参照してください。http://jquery.com/、jQuery.ajax（）とjQuery.getJSONを（検索）

Answer 4

あなたが投稿したコードはjQueryのを使用しています。関数の最初の2行は、2要素（おそらくinput要素）の値を取得し、それらの値を変数に代入します。

$.ajaxの部分は、jQuery ajax関数を使用して、HTTP POST要求を介して、URL moodupdateにあるファイルにデータを送信します。送信されたデータは、以前に取得した値を使用して、次の行に文字列として作成されます。

次の行は、AJAXリクエストが成功したときに実行される関数を指定します。この関数は、ax_get_mood関数を呼び出し、これはjQuery getJSON関数を使用して別の非同期要求を/apps.php/profile/getmoodにし、レスポンスを処理します（応答はajax関数ではなくgetJSONを使用してヒントとしてJSON形式になります）。別の無名関数。