HTTP - The Protocol of Our Lives

© 2014 Adobe Systems Incorporated. All Rights Reserved. 1
Brent Shaffer
Introduction to HTTP - The Protocol of Our Lives

What is HTTP?
• Hypertext Transfer Protocol (Hypertext?!??)
• One of the least understood aspect of web development
• The language your browser speaks to web servers
• The technology used for most web traffic
• The foundation for other web technologies such as REST, AJAX, and
HTTPS

What isn't HTTP?
• Web Sockets - same port, different protocol
• IRC (chat), SMTP (mail), FTP (files)
• Anything prefixed with :// other than http and https
• A gooey slice of pizza
• Your mother

I'm so excited! What do I need?
• an HTTP Server
• the internet
• your computer
• PHP and RoR have built-in web servers
• Apache is pre-installed on OS X

I'm so excited! What do I need?
• an HTTP Client
• a browser
• cURL
• command-line http utility
• Telnet
• for those who like it raw

Is there anything else I can use?
• an HTTP Proxy
• Charles (charlesproxy.com)
• spy on your own network traffic!

1. Open Charles
a. OS X: ensure "Mac OS X Proxy" is checked
b. Windows: ensure "Windows I.E. Proxy" is checked
c. ensure Charles is recording
Let's Get Started!

1. Open Charles
d. Take a moment to observe some of your
network traffic
e. Go to Proxy > Recording Settings > Include and
enter "httpbin.org"
Let's Get Started!

2. Open your Browser
• Browse to "httpbin.org"
• Click on the request you just made
in Charles
• Click the "Request" tab
• Select the "Raw" tab at the bottom
Let's Get Started!

Raw HTTP Request
3. You Did It!

Method
Protocol / Version
Path
Headers

Raw HTTP Response

Status Code
Protocol / Version
Headers
Body

Browser Love
1. Using Chrome
a. Go to View > Developer > Developer Tools
b. Load (or reload) the page
c. Click Network > [url]
d. Click Headers to see the request and
response headers

HTTP Basics - Methods
• Possible Methods
• GET / PUT / POST / DELETE / HEAD / OPTIONS / PATCH /
TRACE / CONNECT
• Methods YOU should care about
• GET and POST
• Eventually PUT / DELETE

• GET
• no request body
• variables in URL via query string parameters
• safe - meaning the request does not modify a resource
• idempotent - meaning the call can be made many times without
changing the outcome

• POST
• variables in request body or URL
• used to modify resources
• not safe
• not idempotent
• your browser performs these on form submission

HTTP Basics - Let's get POSTin'
<form method="post" action="http://httpbin.org/post">
Field 1: <input type="text" name="field1" /><br />
Field 2: <input type="text" name="field2" /><br />
<input type="submit" />
</form>
1. Create an HTML form with method POST

HTTP Basics - Let's get POSTin'
2. Submit the form

View the POST request in Charles

Method Protocol / Version
Path
Headers
Body

HTTP Basics - Status Codes
• Possible Status Codes
• Informational - 1xx (3)
• Success - 2xx (10)
• Redirection - 3xx (9)
• Client Error - 4xx (~30)
• Server Error - 5xx (14)

• Status Codes YOU should care about
• 200 OK - everything's groovy, baby
• 301 Moved Permanently - this resource now has a new URI
• 302 Found - you performed some action, now go somewhere else
• 400 Bad Request - there was a problem, and it's your fault
• 401 Unauthorized - you need to authorize before accessing this resource
• 403 Forbidden - you may have authorized, but you still don't have access
• 404 Not Found - this is not the page you are looking for
• 500 Internal Server Error - there was a problem, and it's not your fault

• Status codes which are useless but you are required to know
• 418 I'm A Teapot
• http://httpbin.org/status/418
• this WILL be on the exam

HTTP Basics - Headers
• Possible Headers
• Lots
• http://en.wikipedia.org/wiki/List_of_HTTP_header_fields

• Request Headers YOU should know about
• Host - typically required (IP + Host = Web Request)
• Accept - content type(s) your client can handle
• User-Agent - The HTTP Client for the request
• Cookie - the cookies you want to send to the web server
• Content-Type - the encoding of your request body (if applicable)
• Content-Length - the length of your request body (if applicable)

• Response Headers YOU should know about
• Date - the date of the response
• Content-Type - the content type of the response
• Content-Length - the length of the response
• Set-Cookie - that's how cookies are made!
• Location - where the browser should go, in the case of 301 and 302 redirects

• Postman (easy)
• Chrome extension for HTTP Requests
• Good for testing API calls
• Paw (easy) - https://luckymarmot.com/paw
• Native OS X app for API calls
HTTP Tools

HTTP Tools
• cURL (intermediate)
• just like the browser, cURL is an HTTP Client
• unlike the browser, cURL is a Command Line Interface (CLI) rather
than a Graphical User Interface (GUI)
• This is useful for making specific http requests without a browser

HTTP Tools
# curl -v http://httpbin.org/post
-d 'foo=bar&test=123'
-d '{"foo":"bar","test":"123"}'
-H 'Content-Type:application/json'
-d '{"foo":"bar","test":"123"}'
-H 'Content-Type:application/json'
-x localhost:8888
# POST request
# POST request using JSON
# POST request using JSON and
sent to an HTTP Proxy (Charles)

HTTP Tools
• Telnet (expert)
• Raw HTTP request
• You type it in!
# telnet httpbin.org 80
Trying 50.16.189.35...
Connected to httpbin.org.
Escape character is '^]'.
GET / HTTP/1.1
Host: httpbin.org
# The simplest possible HTTP request
# Press enter twice once you've finished
to complete the request

HTTP - The Protocol of Our Lives

More Related Content

What's hot

Similar to HTTP - The Protocol of Our Lives

More from Brent Shaffer

Recently uploaded

HTTP - The Protocol of Our Lives

Editor's Notes