некоторая помощь в понимании кода 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"); 
}

Код, который вы унаследовали, использует JQuery Ajax.

Следующее создает запрос 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 для вызова сервера и получения ответа JSON. Странно, что обратный вызов Ajax (который вызывается при получении ответа) делает еще один вызов Ajax.

$('#current_mood_color') эквивалентно document.getElementById('current_mood_color');. Это способ выбора элемента jquery по его идентификатору. JQuery как очень мощный (и удобный) селектор API , и это один из основных способов выбора элемента.

#someThing относится к элементу с идентификатором someThing, поэтому поиск someThing в вашей кодовой базе вернет что-то.

Answer 2

Если у вас возникают проблемы с пониманием синтаксиса, код использует библиотеку JQuery для получения значений из moodmeter_form_mood_desc и moodmeter_form_mood_color, для отправки ajax-запроса к цели и для анализа данных JSON.

Для получения дополнительной информации см .: http://jquery.com/, search jQuery.ajax () и jQuery.getJSON ()

Answer 3

Код, который вы разместили, использует jQuery.Первые 2 строки функции просто получают значение 2 элементов (вероятно, input элементов) и присваивают эти значения переменным.

Часть $.ajax использует для отправки функцию jQuery ajaxданные через HTTP-запрос POST, к любому файлу, находящемуся по URL moodupdate.Отправленные данные создаются в виде строки в следующей строке, используя значения, полученные ранее.

В следующей строке указывается функция, которая будет выполняться при успешном выполнении запроса AJAX.Эта функция, в свою очередь, вызывает функцию ax_get_mood, которая использует функцию jQuery getJSON, чтобы сделать еще один асинхронный запрос к /apps.php/profile/getmood и обработать ответ (который будет в формате JSON, на что намекает использование getJSON вместо другой ajax функции) в другой анонимной функции.

Answer 4

Начните с официальных документов, и все должно проясниться:

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

и

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