Week 16: AJAX XHR, Fetch, jQuery and Axios

This week focus was on AJAX XHR, Fetch, jQuery and Axios from Colt Steele The Advanced Web Developer Bootcamp.

 -Intro to AJAX   
 -JSON and XML
 -Fetch Introduction
 -Fetch Options 
 -Fetch Error Handling 
 -The Problem with Fetch
 -jQuery AJAX 
 -jQuery $.ajax Method
 -jQuery AJAX Shorthand Methods 
 -Axios Intro 

Intro to AJAX

AJAX is Asynchronous JavaScript and XML
XML has been replaced with JSON for the most part.

####AJAX is not a library, framework or technology

AJAX is an approach to web development

A concept to how a website may be built.

AJAX allows websites to send and request data from a server in the background without disturbing the current page which gave single page applications functionality.

Making Requests with JavaScript

1. XMLHTTPRequest
2. The Fetch API
3. 3rd Party Libraries: jQuery, Axios, etc..

JSON and XML

They are both data formats.

API's do not respond with HTML. API's respond with pure data, not structure.

API's exist to share information between computers or between bits of code.

XML stands for Extended Markup Language

<pin>
  <title>Some Title</title> 
  <author>Author Name</author> 
  <num-saves>2000</num-saves> 
</pin> 

XML is syntactically similar to HTML, but it does not describe presentation like HTML does.

JSON JavaScript looks almost like JavaScript objects.

'pin': {
  'title': 'this is title', 
  'author': 'Author', 
   'num-saves': 1800 
  }

Fetch Introduction

fetch(url) 
.then(function(res) {
  console.log(res); 
})
.catch(function(error) {
 console.log(error); 
}); 

parsing JSON with Fetch

fetch(url).then(function(res) {
 return res.json(); 
 }).then(function(data) {
  console.log(data); 
 }).catch(function() { 
  console.log("problem!"); 
 }); 

Fetch Options

To use the fetch method, you always have to provide the URL that the request is going to.

fetch(url) {
   method: 'POST', 
   body: JSON.stringify({
     name: 'blue', 
     login: 'bluebird' 
   })
})

.then(function (data) {
//do something 
})
.catch(function (error) {
//handle error 
}); 

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

Fetch Error Handling

What happens when things go wrong.
Handling fetch errors

fetch(url) 
.then(function(res) {
  if (!res.ok) {
    throw Error(404); 
   }
   return res; 
}).then(function(response) {
  console.log("ok"); 
}).catch(function(error) {
  console.log(error); 
}); 

The Problem with Fetch

Fetch is easy to use, it is a lot cleaner than XML.
Browser support may be limited tho.

###jQuery AJAX

jQuery AJAX Methods
.$.ajax
.$.get
.$.post
.$.getJSON

these are shorthand methods

###jQuery $.ajax Method

.$.ajax
The "base" jQuery Method

$.ajax({
 method: "GET", 
 url: "some.api.com", 
 })
.done(function(res) {
  console.log(res)
})
.fail(function(){
//do something
})

this code just creates an XMLHttpRequest under the hood.

###Axios Intro

Axios is a lightweight HTTP request library

axios.get(url) 
.then(function(res) {
 console.log(res.data); 
})
.catch(function(e){
 console.log(e); 
})

just creates an XMLHttpRequest under the hood.