|AJAX| AJAX: AJAX and API's

          -Intro to AJAX
          -Intro to API's
          -Using Postman
          -Query Strings 
          -Making XHR's 
          -The Fetch API

Intro to AJAX

AJAX stands for asynchronous JavaScript and XML. The process is a concept of making requests to load information or to send information to save something behind the scenes on a given website or on a given application, seamlessly.

Intro to API's

API is application programming interface. API is more about one piece of software to another piece of software that doesn't have to be separate computers. API do not even need to be involved with the web in general.

Web Apps are interfaces that are web based, HTTP based.
Web APIs are like a portal into a different application or database somewhere or a data set or just some start up information.

Web API occurs over HTTP.

URLs are sometimes called endpoints.

Interfaces are for applications to read not humans.

Using Postman

Postman is used to make a bunch of requests to different apps and learn more about how HTTP requests are structured, different status codes, headers in a request with a query string.

https://www.postman.com/

Query Strings

q= is known as the query string. It is used to provide additional information to the request within a URL.

Making XHR's

XMLHttpRequest is the original way of sending request via JS.
Does not support promises.

const myReq = new XMLHttpRequest(); 

myReq.onload = function() {
 const data = JSON.parse(this.responseText); 
 console.log(data); 
};

myReq.onerror = function(err) {
 console.log('Error!', err); 
}; 

myReq.open('get', 'https://icanhazdadjoke.com/',true);
myReq.setRequestHeader('Accept', 'application/json');
myReq.send(); 

The Fetch API

This is the new way of making HTTP request using javascript. It has replaced XMLHttpRequest. Fetch API supports promises.

fetch('https://api.cryptonator.com/api/ticker/btc-usd')
 .then(res => {
   console.log("Response, waiting to parse...", res) 
     return res.json()
  })
  .then(data => {
    console.log("Data parsed...") 
    console.log(data.ticker.price)
  })
  .catch(e => {
   console.log("Oh no! Error!", e) 
  })