Как передать переменную из функции xhr.onreadystatechange

Question

Здравствуйте! Есть не большой скрипт для перевода через яндекс api.

$('.name').each(function( index ) { 
        var url = "https://translate.yandex.net/api/v1.5/tr.json/translate",
        keyAPI = "trnsl.1.1.20130922T110455Z.4a9208e68c61a760.f819c1db302ba637c2bea1befa4db9f784e9fbb8";

            var xhr = new XMLHttpRequest(),
                textAPI = $( this ).text(),
                langAPI = 'ru'
                data = "key="+keyAPI+"&text="+textAPI+"&lang="+langAPI;
            xhr.open("POST",url,true);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(data);
            xhr.onreadystatechange = function() {
                if (this.readyState==4 && this.status==200) {
                    var res = this.responseText;
                    var json = JSON.parse(res);
                    if(json.code == 200) {
                         var translate = json.text[0];
                    }                    
                }
            }
          $( this ).text('new'+translate);
    });

На выходе он должен обновить содержимое элементов с классом 'name', однако перменная translate неизвестна.

Пример https://jsfiddle.net/y1mz6tw5/

Answer 1

Если вы используете jQuery, то нет необходимости писать свой XMLHttpRequest обработчик.

$('.name').each(function(index) {
  var url = "https://translate.yandex.net/api/v1.5/tr.json/translate";
  var keyAPI = "trnsl.1.1.20130922T110455Z.4a9208e68c61a760.f819c1db302ba637c2bea1befa4db9f784e9fbb8";
  var textAPI = $(this).text();
  var langAPI = "ru";

  $.post(url, {
    key: keyAPI,
    text: textAPI,
    lang: langAPI
  }).done(response => $(this).text(response.text[0]));
});