Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTTP demystified for web developers


Published on

HTTP is the distributed computing API that makes all of the others look bad. HTTP’s popularity is largely due to the simplicity of its text-based format and stateless interaction. Despite this, many web application development frameworks attempt to provide an abstraction layer over HTTP, and only add complexity in the attempt to hide the details.

This short presentation introduces HTTP basics for beginners, and shows what it looks like under the covers. Novice web developers benefit from this introduction by learning to understand where a platform-specific ends and where HTTP and the platform we call ‘the web’ starts.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTTP demystified for web developers

  1. 1. @PeterHilton HTTP demystified for web developers Peeling back the top layer of the 
 web application stack
  2. 2. Web technology is like an onion: there’s always another layer. @PeterHilton • 2
  3. 3. A long time ago…
  4. 4. A long time ago… 1945 First description of a link-based information system. 1965 The term ‘hypertext’ coined for text containing links. 1970s Many hypertext computer systems implemented. 1980s The Internet becomes widely used by scientists. 1989 WorldWideWeb project introduces HTML to describe hypertext documents and HTTP to fetch them via Internet. 1991 HTTP 0.9, 1996 HTTP 1.0, 1997-1999 HTTP 1.1 2015 HTTP 2 4@PeterHilton •
  5. 5. HTTP = hypertext + Internet 5@PeterHilton • The Internet is a communications network. HTTP - Hypertext Transfer Protocol is an Internet communication protocol. HTML - Hypertext Markeup Language is a text-based markup language for writing hypertext documents. Internet + HTTP + HTML = the web
  6. 6. HTTP in action
  7. 7. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Greeting</title> </head> <body> <h1>Hello, world!</h1> </body> </html>
  8. 8. URL Uniform Resource Locator (address)
  9. 9. scheme (transfer protocol) (resource) URL path host (server) name
  10. 10. 80 is the default port in a URL port number
  11. 11. $ telnet 80 Trying
 Connected to
 Escape character is '^]'. GET /hello.html HTTP/1.1
 HTTP/1.1 200 OK
 Date: Sat, 16 Jul 2016 09:20:27 GMT
 Content-Type: text/html; charset=utf-8
 Content-Length: 147
 Last-Modified: Sat, 16 Jul 2016 08:27:20 GMT
 <!DOCTYPE html>
 <html lang="en">

  12. 12. Internet HTTP request HTTP response client server
  13. 13. HTTP request in detail
  14. 14. GET /hello.html HTTP/1.1 Host: localhost:3000 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36 Accept: text/html,application/xhtml+xml,application/ xml;q=0.9,image/webp,*/*;q=0.8 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-GB,en;q=0.8,nl;q=0.6,fr;q=0.4 Cache-Control: max-age=0 Connection: keep-alive Upgrade-Insecure-Requests: 1
  15. 15. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Form</title> </head> <body> <form method="post" action="http://localhost:3000/form"> <input name="colour" value="blue"> <input name="fruit" value="banana"> <button>Send</button> </form> </body> </html>
  16. 16. POST /form HTTP/1.1 Host: localhost:3000 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/601.6.17 (KHTML, like Gecko) Version/9.1.1 Safari/ 601.6.17 Content-Length: 24 Accept: text/html,application/xhtml+xml,application/ xml;q=0.9,*/*;q=0.8 Accept-Encoding: gzip, deflate Accept-Language: en-us Connection: keep-alive Content-Type: application/x-www-form-urlencoded Dnt: 1 Origin: file:// colour=blue&fruit=banana
  17. 17. HTTP request methods GET - fetch a resource HEAD - returns the same headers as GET, but no body POST - send a resource PUT - replace a resource DELETE - delete a resource TRACE, OPTIONS, LINK, UNLINK, PATCH 18@PeterHilton •
  18. 18. HTTP response in detail
  19. 19. HTTP/1.1 200 OK Server: Date: Sat, 16 Jul 2016 11:47:50 GMT Content-Type: text/html; charset=utf-8 Content-Length: 147 Last-Modified: Sat, 16 Jul 2016 08:27:20 GMT Access-Control-Allow-Origin: * Expires: Sat, 16 Jul 2016 11:57:50 GMT Cache-Control: max-age=600 Accept-Ranges: bytes X-GitHub-Request-Id: 53A0612B:15F4:2FDF3B:578A1EE6 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Greeting</title> </head> <body> <h1>Hello, world!</h1> </body> </html>
  20. 20. HTTP/1.1 200 OK response status code status text
  21. 21. The tricky details
  22. 22. HTTP response status codes 100-199 Informational 200-299 Client request successful 300-399 Request redirected, further action necessary 400-499 Client error - do not repeat the same request 500-599 Server error - maybe try again About 60 defined status codes 23@PeterHilton •
  23. 23. HTTP header fields (‘HTTP headers’) 24@PeterHilton • General headers are used in both request and response Request headers indicate client preferences and config Response headers provide information about the server Entity headers describe the request or response body Non-standard headers are application-specific About 50 defined standard headers
  24. 24. Things that everyone gets wrong Character encodings URL encoding/decoding Caches and proxies Cookies, and using them to introduce session state 25@PeterHilton •
  25. 25. Further reading 26@PeterHilton • Web Client Programming with Perl (O’Reilly, 1997), 
 now available free online via O’Reilly Open Books, starts with three well-written chapters that teach everything web developers need to know about HTTP: Chapter 1: Introduction Chapter 2: Demystifying the Browser Chapter 3: Learning HTTP
  26. 26. @PeterHilton