DEV Community 👩‍💻👨‍💻

Code_Regina
Code_Regina

Posted on

|AJAX| AJAX: AJAX and API's

          -Intro to AJAX
          -Intro to API's
          -Using Postman
          -Query Strings 
          -Making XHR's 
          -The Fetch API
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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) 
  }) 

Enter fullscreen mode Exit fullscreen mode

Top comments (0)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.