Day 5

class: center, middle

# Day 5
### HTTP

---

## HTTP

* Message protocol that is the foundation of the internet.
--

* Hypertext Transfer Protocol was designed for transferring hypertext (html).
--

* (It transfers much more than hypertext ... javascript, css, video, images, etc.)

---

## HTTP Protocol
--

* Request Response - You request a resource.  Server returns the resource(response).  That's it.
--

* Structured Requests - Just like mailing a letter, there is specific data that you have to put in specific places.
--

* Number Codes (status) - Each response has a status code that indicates the success or failure of the request.

---

## Request

* When you type `http://localhost:63342/gis-devops-slides/week1/day5.html`, the browser produces this request:
--

```
Request URL:http://localhost:63342/gis-devops-slides/week1/day5.html?_ijt=uun1m30tcspl4il93ipl443pah
Request Method:GET
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.9
Cache-Control:max-age=0
Connection:keep-alive
Cookie:optimizelyEndUserId=oeu1502034597292r0.21035548100896806; optimizelySegments=%7B%227282390156%22%3A%22false%22%2C%227252930080%22%3A%22direct%22%2C%227276750292%22%3A%22gc%22%2C%227233730390%22%3A%22none%22%7D; optimizelyBuckets=%7B%7D; Idea-2fdbf3fb=001be010-f245-4c28-9a8f-91710cd3abde
Host:localhost:63342
If-Modified-Since:Mon, 15 Jan 2018 22:15:13 GMT
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
```

---

## Request Components

* URL (Uniform Resource Locator) - Resource and the Protocol (where to get it.  how to get it.)
* HTTP Verb - GET, POST, DELETE, UPDATE, etc.
* HTTP Headers - Options of how you would like the data handled, message sent, authenticated, etc.
* HTTP Body - "Letter in the Envelope".  (Not present for GET since you're just requesting data)

---

## HTTP Verbs

* HTTP Verbs provide a standardized way to request actions from a server.
* GET    - Retrieve a resource.
* POST   - Save a resource.
* PUT    - Replace a resource.
* DELETE - Delete a resource
* HEAD   - "Says Hello"
* CONNECT, OPTIONS, TRACE, PATCH

---

## HTTP Message Body

* HTTP Message Body is the content that you are actually trying to transfer.  ***Nearly all HTTP responses will have a Message Body***.

A message body is only required on an HTTP request when attempting to update data on the server.
* GET    - None.
* POST   - Message body is content to save on server.
* PUT    - Message body is content to replace on a server.
* DELETE - None.
* HEAD   - None.

---

## HTTP Message Headers

* HTTP Message Headers allow you to provide additional context to the server about the request.
* Accept            - The content type that the client is expecting.
* Content-Type      - The content type that the client is specifically requesting.
* Accept-Language   - The language the client wants content in.
* Cookie            - Data ther server is able to persist between requests.
* User-Agent        - What type of device the cilent is, so that content is appropriate.
* Authorization     - A shared secret key between the client and server to access secured content.
* ... there's about 30 more ...

---
## Response

* The server sends a response after processing the HTTP Request.

The following is an example response.
```
Status Code:304 Not Modified
content-type:text/html
date:Tue, 16 Jan 2018 00:21:20 GMT
server:IntelliJ IDEA 2017.3.2
X-Content-Type-Options:nosniff
X-Frame-Options:SameOrigin
x-xss-protection:1; mode=block

Message Body
<html>
    <body>A really cool website</body>
</html>
```

---

## HTTP Message Response Components

The server sends a response after processing the HTTP Request.
* Status Code  - Message about how the request was processed.
* Message Body - Contains the content, which could be an image, video, HTML, JSON, XML, etc.
* Headers      - Information about the requested data.

---

## HTTP Status Codes

The reponse from the server will contain a status code. This code is helpful when your request failed.
--

There a many different codes and they are broken up into a series.

* 1xx - Purely Informational
* 2xx - Success
* 3xx - Redirection
* 4xx - Client Error ("you messed up")
* 5xx - Server Error ("server messed up")

---

## Common Status Codes

* 200 - Successful Request
* 201 - Resource created
* 301 - Moved Permanently
* 400 - Bad Request
* 401 - Unauthorized
* 404 - Not Found
* 500 - Internal Server Error
* 503 - Server Unavailable (aka melting)

---

## Message Body

* Can be HTML, JSON, images, css...

---

## JSON Format

* Many message bodies today contain JSON
* JSON is a text format definition that is based off of JavaScript objects
* JSON is like CSV, but a more complex format
--

* JSON and JavaSripts objects are not the same thing
* JSON looks very similair to JavaScript objects, but there are a few differences

---

## JSON
* keys must be written with double quotes
```
{ 
     "name": "Bert", 
     "age" : 6,
     "foods" : ["hot dogs", "cherrys", "chili", "twizzlers"],
     "registred" : true
}
```
* possible values = `true / false / null / object / array / string / number`

---

## JavaScript Object
* keys do NOT require double quotes
```
{ 
     name: "Bert", 
     age : 6,
     foods : ["hot dogs", "cherrys", "chili", "twizzlers"],
     registred : true
}
```
* possible values = `true / false / null / object / array / string / number / function / undefined`

---

## JSON Data
* Data is sent via HTTP between the client(browser) and server
* Many times that data is in the format of JSON (you can see that in the network tab of your browser)
--

* The JSON data has to be converted to a normal JavaScript object
* `JSON.parse(jsonString)` is used to convert json into workable JavaScript objects

```
var jsonString = '{"key1": "value1", "key2": ["option1", "option2"]}';
var jsObject = json.parse(jsonString);
console.log(jsObject.key2[1]);  // logs "option2"
```
---

## POSTMAN

- Postman is a GUI program that allows you to make, execute, save, and edit HTTP requests
- [https://www.getpostman.com/](https://www.getpostman.com/)