![HTTP Format
Verb and info
Headers, one per line
[blank line]
Optional body](https://image.slidesharecdn.com/http-160608144519/85/How-Web-Pages-Work-13-320.jpg)
![HTTP Responses
HTTP/1.1 200 OK
Content-Length: 1241
Date: Mon, 01 Feb 2016 17:54:16 GMT
Content-Type: text/html;charset=utf-8
Server: WEBrick/1.3.1 (Ruby/1.8.7/2014-01-28)
[HTML body that’s 1241 characters long]](https://image.slidesharecdn.com/http-160608144519/85/How-Web-Pages-Work-18-320.jpg)
How Web Pages Work
- 1. How Web Pages Work and other ghost stories
- 2. Disclaimer no math no programming no problem
- 3. How do computers talk?
- 4. How do computers talk?
- 5. How do computers talk?
- 6. How do computers talk?
- 7. How do computers talk?
- 8. How do computers talk?
- 9. Great, so how do they become friends? Domain Name System DNS translates domains into something computers understand google.com means nothing 1.1.1.1 means something
- 10. Who do they talk to?
- 11. Who do they talk to? IP address gets traffic to the computer Ports get the traffic to the application ex. 1.1.1.1:80 ex. fakewebpage.com:8080
- 12. What do they talk about? Hyper Text Transfer Protocol (HTTP) Transfers HTML (Hyper Text Markup Language) Usually on port 80
- 13. HTTP Format Verb and info Headers, one per line [blank line] Optional body
- 14. HTTP Verbs GET POST The other guys: PUT / PATCH / DELETE / HEAD
- 15. HTTP Headers Host - name of the website we’re talking to User agent - browser version Cache - remember this, not gonna answer again Cookies - magic
- 16. HTTP GET Requests GET / HTTP/1.1 Host: oneis.us User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X) Firefox/44.0 Accept: text/html,application/xml Accept-Language: en-US,en,es-MX Accept-Encoding: gzip, deflate Cookie: _ga=GA1.2.229765080.1436819046
- 17. Request sent! Server gets request Forwards it to the web server program Web server gets the file requested Sends response with requested file contents
- 18. HTTP Responses HTTP/1.1 200 OK Content-Length: 1241 Date: Mon, 01 Feb 2016 17:54:16 GMT Content-Type: text/html;charset=utf-8 Server: WEBrick/1.3.1 (Ruby/1.8.7/2014-01-28) [HTML body that’s 1241 characters long]
- 19. HTML (and CSS and JS and images and…)
- 20. HTTP Get Requests GET /users.php?page=2 HTTP/1.1 Host: oneis.us User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X) Firefox/44.0 Accept: text/html,application/xml Accept-Language: en-US,en,es-MX Accept-Encoding: gzip, deflate Cookie: _ga=GA1.2.229765080.1436819046
- 21. HTTP Responses HTTP/1.1 404 Not Found Content-Length: 28 Date: Mon, 01 Feb 2016 17:58:02 GMT Content-Type: text/html;charset=utf-8 Server: WEBrick/1.3.1 (Ruby/1.8.7/2014-01-28) Sorry, that code is unknown.
- 22. HTTP Status Codes 1xx - info 2xx - success 3xx - redirect 4xx - client error 5xx - server error
- 24. HTTP Post Request POST /api/set HTTP/1.1 Host: oneis.us User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X) Firefox/44.0 Accept: text/html,application/xml Accept-Language: en-US,en,es-MX api_key=lolidunno&submit=submit
- 25. HTTP Responses HTTP/1.1 302 Found Location: https://oneis.us/goaway Date: Mon, 01 Feb 2016 18:02:39 GMT Server: WEBrick/1.3.1 (Ruby/1.8.7/2014-01-28)
- 26. So what the hell are JS and PHP? PHP runs “server side” (read: on the server) Never sent to you, generates the HTML JS runs “client side” (read: in your browser) Included in HTTP response, manipulates HTML
- 27. JavaScript included in response
- 28. TL;DR DNS Lookup Sends request Server gets reads or runs requested file Server sends response back Browser draws response from HTML Browser requests any other needed files, runs JS
- 29. TL;DR
- 30. What didn’t we cover? HTTPS AJAX Cookies Caching
- 31. More learnins You can watch this stuff IRL in your browser’s dev tools Wikipedia’s HTTP page has some examples