how web pages work
TRANSCRIPT
How Web Pages Workand other ghost stories
Disclaimerno math
no programming
no problem
How do computers talk?
How do computers talk?
How do computers talk?
How do computers talk?
How do computers talk?
How do computers talk?
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
Who do they talk to?
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
What do they talk about?Hyper Text Transfer Protocol (HTTP)
Transfers HTML (Hyper Text Markup Language)
Usually on port 80
HTTP FormatVerb and info
Headers, one per line
[blank line]
Optional body
HTTP VerbsGET
POST
The other guys: PUT / PATCH / DELETE / HEAD
HTTP HeadersHost - name of the website we’re talking to
User agent - browser version
Cache - remember this, not gonna answer again
Cookies - magic
HTTP GET RequestsGET / 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
Request sent!Server gets request
Forwards it to the web server program
Web server gets the file requested
Sends response with requested file contents
HTTP ResponsesHTTP/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]
HTML (and CSS and JS and images and…)
HTTP Get RequestsGET /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
HTTP ResponsesHTTP/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.
HTTP Status Codes1xx - info
2xx - success
3xx - redirect
4xx - client error
5xx - server error
HTTP Post Request
HTTP Post RequestPOST /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
HTTP ResponsesHTTP/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)
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
JavaScript included in response
TL;DRDNS 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
TL;DR
What didn’t we cover?HTTPS
AJAX
Cookies
Caching
More learninsYou can watch this stuff IRL in your browser’s dev tools
Wikipedia’s HTTP page has some examples