AJAX

Question 1

What does XHR Stand For?

Answer 1

XMLHttpRequest object

Question 2

What is XHR?

Answer 2

The XMLHttpRequest object is a JS API that allows us to transfer data between a client and a server and update parts of a page without refreshing

Question 3

What type of data is the standard to be used with XHR?

Answer 3

JSON - JavaScript Object Notation

Question 4

Add an HTML link that will use XHR to getRepositories( )

Answer 4

<div>
<h3>Repositories</h3>
<a>Get Repositories</a>
</div>

Question 5

Create a getRepositories function and initiate our XHR request.

Answer 5

function getRepositories() {
const req = new XMLHttpRequest();
req.addEventListener(‘load’, showRepositories);
req.open(‘GET’, ‘https://api.github.com/users/octocat/repos’);
req.send();
}

Here, we’re creating a new instance of an XMLHttpRequest. We call open with the HTTP verb we want, in this case GET, and the URI for the request.

Now that our request is set up and ready to go, we call send to make it happen.

Question 6

Add an event listener with a callback function that will get called when the event fires.

Answer 6

function getRepositories() {
const req = new XMLHttpRequest();
req.addEventListener(‘load’, showRepositories);
req.open(‘GET’, ‘https://api.github.com/users/octocat/repos’);
req.send();
}

function showRepositories() {
  //this is set to the XMLHttpRequest object that fired the event
  console.log(this.responseText);
}

Question 7

Create a getCommits REQUEST function that listens for a response

Answer 7

function getCommits(el) {
const name = el.dataset.repo;
const req = new XMLHttpRequest();
req.addEventListener(‘load’, showCommits);
req.open(‘GET’, ‘https://api.github.com/repos/octocat/’ + name + ‘/commits’);
req.send();
}

Question 8

Create a showCommits function that shows the response

Answer 8

function showCommits() {
  const commits = JSON.parse(this.responseText);
  const commitsList = `<ul>${commits
    .map(
      commit =>
        '<li><strong>' +
        commit.author.login +
        '</strong> - ' +
        commit.commit.message +
        '</li>'
    )
    .join('')}</ul>`;
  document.getElementById('commits').innerHTML = commitsList;
}

Question 9

Create a place in HTML to put the commits

Answer 9

<div>
<h3>Commits</h3>
<div></div>
</div>

Question 10

What does jQuery do?

Answer 10

Abstracts XHR into easier, higher-level \code

Question 11

What Does AJAX stand for?

Answer 11

Asynchronous JavaScript and XML

Question 12

What does AJAX do?

Question 13

What’s the diff between XHR, AJAX & Jquery?

Answer 13

XMLHttpRequest is raw object for ajax request. It is lightest performance wise but it is not cross-browser compatible so using this you will loose cross-browser accessability for your Asynchronous request while $.ajax() is provided by jquery that adds cross-browser compatibility to asynchronous request

Question 14

Give an example of how we could use jQuery to perform an Ajax request.

Answer 14

var url =
    'https://api.github.com/repos/rails/rails/commits?sha=82885325e04d78fb7ec608a4670164d842d23078';

$.get(url).done(function(data) {
console.log(‘Done’);
console.log(data);
});

Question 15

How to use jQuery,get()

Answer 15

https://api.jquery.com/jquery.get/

Question 16

AJAX relies on these technologies:

Answer 16

Things called Promises
Things called XMLHttpRequestObjects
A serialization format called JSON
asynchronous Input / Output
the event loop

Question 17

JS vs jQuery vs AJAX vs PHP

Answer 17

https://bsscommerce.com/blog/javascript-jquery-ajax-are-they-the-same-or-different/#:~:text=While%20JQuery%20is%20a%20library,used%20on%20a%20web%20page.&text=At%20the%20same%20time%2C%20jQuery,to%20program%20for%20the%20browser.