Ajax和jQuery

I've tried to search it through but not getting a starting point of how to approach AJAX in WordPress (or as a concept in whole), how is it different from jQuery, or is it a different/same module?

Why do we use it when we have jQuery (what circumstances forces us to use it?).

Should I learn jQuery basics first, then AJAX, or other way around?

You cannot really compare jQuery, AJAX and WordPress in this way:

• jQuery is a JavaScript library designed to simplify the client-side scripting of HTML
• AJAX is a technique to send data to, and retrieve data from, a server asynchronously
• Wordpress is a blogging platform

To illustrate the point (with a very simple example), say you had a JavaScript event handler that was triggered when a form was submitted:

var f = document.getElementById("myForm");
f.onsubmit = doSomething;

You could have the event handler prevent the default submit action, instead making an AJAX request to a PHP script, optionally passing it some data (form values etc), then doing something with the response.

This has the advantage that the page is not refreshed, giving it a snappier, more responsive feel and generally making for a better user experience.

Here's how you'd implement it in plain JS:

var f = document.getElementById("myForm");
f.onsubmit = function(e){
  e.preventDefault();
  var r = new XMLHttpRequest(); 
  r.open("POST", "submit.php", true);
  r.onreadystatechange = function () {
    if (r.readyState != 4 || r.status != 200) return; 
    console.log(r.responseText);
  };
  r.send("a=1&b=2&c=3");  
}

Now, as mentioned, jQuery is a JavaScript library, that just adds a layer of syntactic sugar and smooths out browser incompatibilities.

The same code using jQuery:

var f = $("#myForm");
f.on("submit", function(e){
  e.preventDefault();
  $.ajax({
    url: "submit.php",
    type: "POST",
    data: "a=1&b=2&c=3",
    success: function(d) {
     console.log(d);
    }
  });
});