Nuts and Bolts: HTTP

INFO 253A: Frontend Web Architecture

Kay Ashaolu

Servers Return Representations

  • How do we decide which HTML to send?
  • How do we use methods and headers?
  • How do we represent errors?

What resource to return?

  • How are resources specified?

Hostname/Path -> Resource

  • https://ucb-info-frontend-webarch.github.io/lectures/content/html/l-introduction.html
  • How to specify hostname in HTTP?
  • How to specify path?
  • What method to use?

Webserver

  • Associate "lectures/content/html/l-introduction.html" with
    • https://github.com/UCB-INFO-FRONTEND-WEBARCH/ucb-info-frontend-webarch.github.io/blob/master/lectures/content/html/l-introduction.html
  • Associate "../style.css" with
    • https://github.com/UCB-INFO-FRONTEND-WEBARCH/ucb-info-frontend-webarch.github.io/blob/master/lectures/content/style.css

Methods

  • GET
    • Requests data from a specified resource
  • POST
    • Submits data to be processed to a specified resource
  • PUT
    • Update specified resource

Missing File

  • What should we do if we request a file that is not there?
  • Return "Oops!"
  • Return nothing?
  • Return standard HTML?

HTTP Response Codes

  • Numbers are unambiguous, can be read by machines
  • Always return a response code
  • Return text as well for human readability

HTTP Response Numbers

  • 200's: OK
  • 300's: Redirect
  • 400's: Client Errors
  • 500's: Server Errors

Demo 200 OK

* Connected to info253.p2ptrainer.com (74.50.7.240) port 80 (#0)
> GET /index.html HTTP/1.1
> Host: info253.p2ptrainer.com
> User-Agent: curl/7.43.0
> Accept: */*

Demo 200 OK

< HTTP/1.1 200 OK
< Date: Tue, 20 Sep 2016 05:55:21 GMT
< Server: Apache/2.4.16 (Unix) OpenSSL/0.9.8e-fips-rhel5 mod_bwlimited/1.4 mod_fcgid/2.3.9
< Last-Modified: Tue, 20 Sep 2016 05:37:12 GMT
< ETag: "24f-53ce9d202d200"
< Accept-Ranges: bytes
< Content-Length: 591
< Content-Type: text/html
<
< 
<!DOCTYPE html>
<html>
...

300’s: Redirect

  • 301: Permanent Redirect
  • 302: Temporary Redirect
  • Location: Header with URI of target

400’s: Client errors

  • 401: Unauthorized
  • 404: Resource Not Found

500’s: Server Errors

  • 500: Internal Server Error (Hard drive on fire)

Fun

  • When things go wrong, chance to play
  • HeyZap

Response Headers

  • Gave metadata about request
  • Return metadata about response
  • Size, representation, language

Different types of resources?

  • HTML
  • CSS
  • JavaScript
  • Images
  • ...

HTTP Versions

  • 1.0: Make a new connection each time
  • 1.1: Optionally use same connection
  • 2.0: Use same connection for multiple requests

Why have different protocols?

  • HTTP is about resource manipulation
  • Specifying what you want to do with a resource
  • How it is represented
  • Optimized for web browsing

Questions?