Ajax - XMLHttpRequest или / vs jQuery?Код в моем вопросе фактически одинаков?

Question

почему на практике больше нет примеров, подобных этому:

var xhr = new XMLHttpRequest();
// Second step is to create a callback function where I should get response from a web server, so here it is:
xhr.onreadystatechange = function()
{
    // Ready State is checking is my request succesfuly done (4 means it, that all data from server is received) and if so -> change a html
    // 200 means that everything is fine, so with checking is status 200 we ensure it's good one? 
  if(xhr.readyState === 4 && xhr.status === 200 )
  {
    // Now I should work with data I received from web server, that are stored in xhr.responseText
    document.getElementById('ajax').innerHTML = xhr.responseText;
  }
};
// Step 3 open a request
// First 

parameter is HTTP method that I'm going to use, in this case it's GET, second parameter is URL up to my data
xhr.open('GET', 'sidebar.html');
// Step 4 sending a request to the web server
xhr.send();

Большая часть кода, который я вижу сегодня, выглядит примерно так:

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Q1: Является ли код во втором примере фактически тем же кодом, что и код в первом примере?Просто это более короткий метод?

Q2: И возможно ли, что никто не пишет код, как я писал в первом примере?Все используют jQuery на самом деле, потому что я не вижу нигде подобного кода?Большая часть кода основана на втором примере?

Q3: И равен success: success из второго примера на самом деле:

if(xhr.readyState === 4 && xhr.status === 200 ) ?

Answer 1

Q1: $.ajax - это универсальный метод из Jquery для выполнения ajax-запроса, у вас даже есть более короткие методы, такие как $.get, $.getScript, $.getJSON, $.post и т. Д. Но в основном оба типа jquery ajax метод и XMLHttpRequest, делают ajax (асинхронные) запросы.Ваши примеры не совпадают, так как они делают разные вещи, а пример $.ajax является общим, но в esscense, да, они делают то же самое.

Q2: Это действительно зависит от разработчика, большую часть временимы используем какую-то библиотеку, которая помогает выполнять запросы ajax с более дружественным синтаксисом (я использую rails, поэтому я использую rails-ujs, например).Что касается jquery, вам нужно добавить jquery, если вы уже используете его, то нет причин не использовать его методы.С другой стороны, если вы не используете jquery, то нет смысла добавлять весь фреймворк только для методов ajax (вы можете добавить более легкие библиотеки, если хотите что-то подобное).Большинство людей не используют ванильный метод, потому что на самом деле обычно используют некоторые фреймворки, которые уже добавляют собственные методы для этого, а также поддерживают совместимость с другими браузерами.Если вы хотите использовать ванильные методы, всегда есть документы https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest (o ищите примеры xmlhttprequest, и вы найдете множество)

Q3: из документов readyState === 4 означает, что запросзавершено, а status === 200 означает, что запрос был успешным.Я не думаю, что они эквивалентны, так как есть больше http успешных кодов, чем 200 (все коды 2xx).Вы можете проверить, находится ли статус в диапазоне от 200 до 226, может быть, но в большинстве случаев это будет только 200 для успеха.

Я оставлю $.ajax документы для полноты http://api.jquery.com/jquery.ajax/