Week 16: AJAX XHR, Fetch, jQuery and Axios
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-09-14 19:19:02

---
title: Week 16: AJAX XHR, Fetch, jQuery and Axios
published: true
description: 
tags: javascript, webdev, codenewbie, beginners
---


####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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ot8bcx66n7zy7pjpo8a6.png)


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 

```xml
<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.

```javascript 

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




###Fetch Introduction




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

```

parsing JSON with Fetch 

```javascript
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. 

```javascript 

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 

```javascript
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 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4n99pix4nndptjpw6p2f.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xu58hojgufbgtggd1gox.png)

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

these are shorthand methods 
 

 ###jQuery $.ajax Method

.$.ajax 
The "base" jQuery Method 

```javascript 

$.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 

```javascript 

axios.get(url) 
.then(function(res) {
 console.log(res.data); 
})
.catch(function(e){
 console.log(e); 
})
```
just creates an XMLHttpRequest under the hood.