Рефакторинг jQuery в проблемах JS

Question

Я часто использую jQuery, но я понял, что мне нужно лучше понять базовый Javascript. Я разработал часть AJAX, но застрял на вложенных функциях. Любая помощь приветствуется.

document.onreadystatechange = function() { 
    var state = document.readyState; 

    if (state == 'interactive') { 
    $('#button').on("click", function() { 
     $.getJSON(apiurl, function(json) { 

     $.each(json.photos.photo, function(i, myresult) { 
      apiurl_size = "https//api/myresult"; 
      $.getJSON(apiurl_size, function(size) { 
      $.each(size.sizes.size, function(i, myresult_size) { 
       if (myresult_size.width == selected_size) { 
       $("#results").append('<p class="col-md-4"><a href="" ><img src="' + myresult_size.source + '"/></a></p>'); 
       } 
      }) 
      }) 
     }); 
     }); 
    }); 
    } else if (state == 'complete') { 
    document.getElementById('complete'); 
    } 
} 

То, что я хочу знать:

1. как захватить селектор в $('button') так document.getElementById('button') возвращает весь элемента, но я не могу принять в .on click functionalitiy

2. нарушения функции .getJSON в чистую функцию повторного использования JS

Answer 1

1. $("#button").on("click", cb_function) является аналогом document.getElementById("button").addEventListener("click", cb_function). Если вы используете селектор, который может соответствовать нескольким элементам, он аналогичен, за исключением того, что он перебирает все возвращаемые элементы, чтобы добавить прослушиватели событий ко всем из них.

2. $.getJSON(URL, cb_function) создает запрос AJAX к URL которого onreadystatechange функция обратного вызова по существу делает:

   1. вызова JSON.parse() на ответ.
   2. Вызвать cb_function с результатом анализа.

Простой вариант будет, как:

function getJSON(url, cb_function) { 
    var xhr = new XMLHTTPRequest(); 
    xhr.open("GET", url); 
    xhr.onreadystatechange = function() { 
     if (xhr.readystate == 4 && xhr.status == 200) { 
      cb_function(JSON.parse(xhr.responseText)); 
     } 
    } 
    xhr.send(); 
    return xhr; 
} 

Реальный $.getJSON позволяет поставлять параметры в URL, и он автоматически переходит из объекта в соответствующий URL-закодированные строки в добавить в качестве параметров URL. Но ни один из ваших вызовов не имеет параметров данных, поэтому это определение должно работать на вас.