Intro To HTTP Notes

http.md

Introduction to HTTP

Starting from the top...

We know that in order to load an webpage, we page to type a URL (aka Link) into the address bar of our browser. Once we hit enter, the browser loads for a few seconds and BAAM the page is on your screen.

Internet 101

Let's break it down to a science. Here's what's happening behind the scenes at a high level:

In order for your computer's browser (aka client, where frontend code lives) to be able to load webpages, it starts communicating with the server to make request for the resources (aka URLs) you specified.

The communication is achieved with a communication channel (much like a language) called HTTP (Hyper-Text-Transfer-Protocol) which is the technical lingo for what it actually does, helps devices communicate over a network (i.e. over internet or local network).

HTTP is only one type of data exchange protocols. See Reference section below for other types of protocols.

Step 1: The Request

The format of the request (sent by the browser) has to be understood by the server, this agreement is achieved with HTTP.

So what's the format of this HTTP request we speak of?

It's, quite simply, mainly 2 pieces of information.

1. The request method (let's start with GET)
2. The path of the resource requested (aka URL or URI)

When you type http://google.ca into your browser and then press Enter. You are making a GET request to that URL (http://google.ca).

Commonly used Request Methods:

• GET - READ data from the server
• POST - SEND data and CREATE an object on the server
• PUT/PATCH - SEND data and UPDATE an object on the server
• DELETE - DELETE data on the server

Side Notes:

• they map nicely to CRUD operations
• These aren't the only methods available for use with HTTP but they are fully sufficient for most cases.

URI - Uniform Resource Indicator

• Also known as URL - Uniform Recource Locator
• Has several parts. In http://www.example.com:8080/hello?name=faisal
  • Communication Protocol: http://
  • Host: www.example.com
  • Port: :8080
  • Path: /hello
  • Query parameters: ?name=faisal

Side Note: An article about the difference between URLs and URIs

Request Headers

• Always in the form of key: value pairs
• Contain additional information about the client and the request, including:
  • User agent (info about browser)
  • Cookies (data used to identify each client)

Request Body

Data to be sent to the server (optional)

Step 2: The Response

Once the server receives and process the request, it send back a response which contains the following:

Response status

• Contains a response code and a message
• Response codes are divided in series
  • 100 series = informational
  • 200 series = ok
  • 300 series = redirection
    • 301 moved permanently
    • 302 moved temporarily
  • 400 series = client error
    • 401 unauthorized
    • 403 forbidden
    • 404 not found
  • 500 series = server error
  • Full list: https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

Response headers

• Informations about the data being returned
  • Content size
  • Media type
    • This follows conventions. See: https://en.wikipedia.org/wiki/Media_type
    • If you're curious, here's a complete list: https://www.iana.org/assignments/media-types/media-types.xhtml
  • ETags (used for caching)
  • ...several others

Response Body

• Yep, that's the content
• Usually it's HTML, but can also be pure text, JSON data, images, videos, audio...

---

Reference

What is a protocol?

• It's a formalized way to communicate.
  • Spoken language is a communications protocol, as is body language! But we're getting philosophical here...
• In computer science, it's a set of rules defining a way for two systems to communicate in a way both can make sense of what's going on.

The web is like a lasagna of protocols

• At the bottom layer there's TCP -> Transmission Control Protocol
• On top of it there's IP -> Internet Protocol
• And on top that we have HTTP -> Hyper Text Transfer Protocol
• There are other protocols
  • FTP -> File Transfer Protocol
  • SMTP -> Simple Mail Transfer Protocol
  • XMPP -> Extensible Messaging and Presence Protocol (used by Slack!)
  • SSH -> Secure Shell
  • ...and hundreds of others

Servers

• Applications that communicate over a network
• Answer to requests on a specific IP address and port
• For every IP, only one server can be listening on a given port
  • You can have multiple servers listening on different ports on the same IP
• Different protocols use different ports
  • HTTP: 80 / HTTPS: 443
  • FTP: 21
  • SMTP: 25
  • SSH: 22

HTTP

• It's the way browsers talk to servers
• It's very simple: just some text structured in a specific way
• It's a client-server protocol
  • The client makes requests
  • The server returns responses

Testing

• Chrome developer tools is your best friend!
• Making complex requests
  • curl - make requests from the terminal
    • Tutorial: http://curl.haxx.se/docs/httpscripting.html
    • Documentation in FAQ format: http://curl.haxx.se/docs/faq.html
  • DHC Chrome App: https://goo.gl/aa2jaU
  • Postman: http://getpostman.com
• Checking responses
  • http://requestb.in
  • http://httpbin.org

Resources & stuff

• extensive and detailed explanation of what happens when you type google.com and press enter on your browser.
• slides by fabio
• Khan Academy - How The Internet Works

server.rb

# The server will run at http://localhost:4567 by default
require 'sinatra'

get '/' do
  # `puts` don't show up in the browser; you can use it for logging
  puts "Going to / worked!"

  # Query parameters (?foo=bar&fizz=buzz) show up in the params[] array.
  # When a param isn't present, nil is returned.
  # We're taking advantage of this below to define default values.
  time_of_day = params[:time_of_day] || 'morning'
  name = params[:name] || 'stranger'

  # The last thing returned by the method will be displayed in the browser.
  "<h1>Good #{time_of_day} #{name}!</h1>"
end

get '/name' do
  name = params[:name] || "youuuu"
  "<h1>Hello there, #{name}!</h1>"
end

get '/signin' do
  # Just returning the HTML for a simple form.
  # Pressing the GOGOGO!!! button will POST the data to `/login`.
  "<form method='post' action='/login'> \
    Username: <input type='text' name='username' placeholder='your username'>
    <br>
    Password: <input type='password' name='password'>
    <br>
    <input type='submit' value='GOGOGO!!!'>
   </form>
  "
end

post '/login' do
  # POSTed form fields will also show up inside params[]
  "<h1>You logged in with username #{params[:username]} and password #{params[:password]}.</h1>"
end