## AJAX
### After this you will be able to:
- use jquery ajax to make a get request
## Intro / Framing
- **Intro**:
today we'l learn a new way to make http requests. We've already seen: browser and curl requests.
today we'll be seeing a different kind of browser request, one that isn't tied to the request response re-render cycle we're used to in the browser
we **can** make requests from the browser, using javascript, without refreshing the page or having it rerender
- **Context**:
we are adding another layer of complexity, in that we are now going to make requests more and more from javascript
what does this allwo us to do?
- write a complex application that deals with it's data from the server transparent to the user
- use your server less and the user's computer more
- separation of concerns - back and front end
- faster response times with smaller data
- what are we losing?
- The back and refresh button are rendered useless: You don't get some default browser behavior.
- Javascript can be disabled: You can't know for sure what your users are up to.
- You have to consider the UX even more: You can't rely on the default browser behavior
- **Specific**:
AJAX is current standard (besides websockets) for communicating directly with a front-end application written in javascript that runs in the browser.
If we want to learn about applications in the browser, we have to know about AJAX.
- **How**:
We'll look at some examples of how to use the JQuery ajax functionality and what it is doing under the hood. Then you will write some JQuery ajax code.
## Setup
While we're still learning the ins-and-outs of building APIs, lets use an already-made API for today. We'll use on that works a lot like Mongo and Express and comes with RESTful resources out of the box.
That handy thing lives at https://api.doughnuts.ga/doughnuts – it's a simple dummy data service that'll let us do GETs & POSTs quickly. You can quickly check out https://www.doughnuts.ga/ to see what it's about.
__Make a simple html and js file__
```html
```
```javascript
console.log("works");
```
## GET Requests
####Vanilla JavaScript
Open up your browser and the console and follow along. We're gonna start with old-school JavaScript, so you can see how it works without any libraries.
```js
var request = new XMLHttpRequest();
request.open('GET', 'https://api.doughnuts.ga/doughnuts', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var resp = request.responseText;
console.log(resp);
} else {
// We reached our target server, but it returned an error
console.log('Uh oh, an error on the server side');
}
};
request.onerror = function() {
// There was a connection error of some sort
console.log('Something went wrong with the client side.');
};
request.send();
```
Let's walk through this for a second.
According to the documentation, `request.open` takes 3 arguments - `method`,`url`, and `async`.
Method matches our HTTP verb, URL is obvious, and async is just asking if it should perform the function asynchronously - by now, you should have a good idea about what the means.
Then, of course, we've got a function that runs if the requests works, and another if it doesn't. Simple `console.log` for now.
Finally, we send our request and see what happens. In this instance, we get back an array of doughnuts.
#### Exercise: vanilla javascript ajax
#### Demo: HTTP requests: envelopes and applications: Sending Cats
##### A get request
- One table is the client computer
- One table is the server computer
- A request is made. The browser addresses an envelope
- It is handed to a netowrk program.
- It leaves the table and is passed to the server
- The network program at the server recieves it
- The network program hands the envelope to the program running on the addressed port
- The server looks at the outside of the envelope
- If it is a post, the server opens the envelope
- The server processes the request and addresses a new envelope
- The server puts something in the envelope
- THe server hands the envelope to the network program
- The envelope goes back to the client computer
- The network program hands the envelope to the browser
##### A get request that details DNS
- before the envelope travels to the server, the browser sends a postcard to the DNS server, asking to resolve the domain name to an IP address
##### A get request that details TCP
- before the network program sends the envelope the envelope is numbered and torn into little pieces
##### A post request
- the browser puts something in the envelope before it is handed to the browser
##### A browser recieves a response and interprets it
- some html text gets interpreted, including `` and `` and `