Ajax - XMLHttpRequest or/vs jQuery ? Is code in my question acctually the same?

Question

why there is not more examples like this is in practice:

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

Most of the code today I see is something like this:

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

Q1: Is the code in second example acctually the same code as code in first example? Just it is shorter method ?

Q2: And is it possible noone is writing code as I wrote in first example? Everyone is using jQuery acctually because I can not see anywhere similar code to that? Most of code is based on second example?

Q3: And is success: success from second example acctualy equal to this:

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

Answer 1

Q1: $.ajax is the generic method from Jquery to do ajax request, you even have shorter methods like $.get , $.getScript , $.getJSON , $.post , etc. But basically, both, jquery's ajax method and an XMLHttpRequest, do ajax (asyncrhonous) requests. Your examples are not the same since they do different things and the $.ajax example is generic, but in esscense, yes, they do the same.

Q2: It really depends on the developer, most of the time we use some kind of lib that helps to do ajax requests with a friendlier syntax (I use rails so I use rails-ujs for example). The thing with jquery is that you need to add jquery, if you already use it then there's no reason not to use it's methods. On the other hand, if you don't use jquery then there's no point on adding the whole framework just for the ajax methods (you can add lighter libs if you want something similar). Most people don't use the vanilla method because it's really common to use some framework that already adds custom methods to do that and also handle crossbrowser compatibility. If you want to use the vanilla methods there's always the docs https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest (o search examples of xmlhttprequest and you'll find plenty)

Q3: from the docs, readyState === 4 means the request is completed, and status === 200 means the request was successfull. I don't think they are equivalent since there are more http success codes that 200 (all 2xx codes). You could check if status is in the range of 200 and 226 maybe but most of the time it will be just 200 for success.

I'll leave the $.ajax docs for completeness http://api.jquery.com/jquery.ajax/