HTTP

HTTP

Hypertext Transfer Protocol

= protocol for requesting and transferring resources over a network

HTTP

Pair: Request - Response

Request: from the browser (mostly)

Response: from the server

HTTP requests and responses are transferred via a lower-level protocol, most commonly TCP

HTTP

request format:

  • request line
  • header fields
  • message body (optional)

response format:

  • status line
  • header fields
  • message body (optional)

Experimenting with HTTP

via:

  • Firefox tools under network
  • VS Code Plugin HTTP Client

HTTP example: Wikipedia

Request:

GET /wiki/Main_Page HTTP/2.0
Host: en.wikipedia.org
Connection: keep-alive

Response:

HTTP/2.0 200 OK
Date: Wed, 24 Apr 2019 07:50:41 GMT
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html ...

HTTP example: Wikipedia search (1)

request:

GET /w/index.php?search=test&title=Special:Search&go=Go HTTP/2.0
Host: en.wikipedia.org
Connection: keep-alive

response:

HTTP/2.0 302 Found
Location: https://en.wikipedia.org/wiki/Test
Content-Length: 0

HTTP example: Wikipedia search (2)

request:

GET /wiki/Test HTTP/2.0
Host: en.wikipedia.org
Connection: keep-alive

response:

HTTP/2.0 200 OK
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html ...

HTTP example: POST request

request:

POST /submit-posting HTTP/2.0
Host: example.com
Connection: keep-alive
Content-Type: text/plain; encoding=UTF-8
Content-Length: 33

This is the post content (body)

response:

HTTP/2.0 200 OK
Content-Type: text/html; charset=UTF-8

...

HTTP example: API

GET /todos/12
Host: jsonplaceholder.typicode.com
Connection: keep-alive

HTTP/2.0 200 OK
Content-Type: application/json; charset=utf-8
Etag: W/"5c-cn8o...

{
  "userId": 1,
  "id": 12,
  "title": "ipsa repellendus fugit nisi",
  "completed": true
}

Important request header fields

  • Host
  • Connection
  • Origin
  • Accept
  • Accept-Encoding
  • Cookie
  • Cache-Control
  • Authorization

Important HTTP status codes

  • 200 OK
  • 301 Moved Permanently
  • 307 Temporary Redirect (Redirect to other address)
  • 303 See Other (Redirect to other address, HTTP method changes is set to GET)
  • 308 Permanent Redirect
  • 304 Not Modified (Resource did not change since last query)

Important HTTP status codes

  • 400 Bad Request
  • 401 Unauthorized
  • 403 Forbidden
  • 404 Not Found
  • 500 Internal Server Error

see also: https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

Important response header fields

  • Content-Length
  • Content-Type
  • Set-Cookie
  • Location
  • Cache-Control

Header field "Content-Type"

possible values:

  • text/plain; charset=utf-8
  • text/html; charset=utf-8
  • application/json
  • application/javascript
  • application/ecmascript
  • image/jpeg
  • image/png
  • ...

Header field "Set-Cookie"

example:

GET /
Host: www.google.com

Set-Cookie: 1P_JAR=2019-04-24-08; expires=...; path=/; domain=.google.com
Set-Cookie: IDCC=AN0-TYtU7...fo; expires=...; path=/; domain=.google.com

HTTP APIs

HTTP APIs

HTTP API / web API = means of transmitting data sets between a client and a web server

HTTP APIs

standards:

  • XML-RPC (1998)
  • SOAP (1999)
  • JSON-RPC (2005)
  • REST (2000)
  • GraphQL (2015)

HTTP APIs

request format:

  • SOAP: XML
  • JSON-RPC: JSON
  • REST: URL + HTTP method (+ URL parameters) (+ request body)
  • GraphQL: GraphQL query language

response format:

  • SOAP: XML
  • JSON-RPC: JSON
  • REST: commonly JSON (or XML, ...)
  • GraphQL: JSON

Comparison of REST, JSON-RPC and GraphQL

  • fixed vs flexible queries
  • fixed protocol vs protocol agnostic

Fixed vs flexible queries

REST, JSON-RPC: endpoints / methods are fixed (e.g. posts_of_friends, suggested_friends, ...)

GraphQL: client can construct their own query in a flexible way

Advantage of GraphQL: more flexible, new functionality may not need extra code on the backend

Disadvantage of GraphQL: may often need additional code to restrict access (e.g. prevent querying for posts of suggested friends)

Fixed protocol vs protocol agnostic

REST is commonly associated with HTTP, distinguishing API calls by their HTTP methods (get, post, ...)

JSON-RPC and GraphQL could be used with other protocols, e.g. WebSockets

JSON-RPC

RPC = remote procedure call

JSON-RPC

example request body:

{
  "jsonrpc": "2.0",
  "method": "get_todo_by_id",
  "params": { "id": 1 },
  "id": 1234
}

example response body:

{
  "jsonrpc": "2.0",
  "error": null,
  "result": [
    { "id": 1, "title": "groceries", "completed": false }
  ],
  "id": 1234
}

REST

REST = Representational State Transfer

Mostly via HTTP requests with these methods:

  • querying elements via GET
  • adding an element via POST
  • adding an element at a specific URL via PUT
  • modifying an element via PATCH
  • replacing an element via PUT
  • deleting an element via DELETE
  • any other modification via POST

REST examples

get: querying multiple entries:

GET /todos HTTP/2.0
Host: jsonplaceholder.typicode.com

get: querying a single entity:

GET /todos/2 HTTP/2.0
Host: jsonplaceholder.typicode.com

get: querying multiple entities:

GET /todos?userId=1&completed=false
Host: jsonplaceholder.typicode.com

REST examples

post: adding an entry:

POST /todos HTTP/2.0
Host: jsonplaceholder.typicode.com
Content-Type: application/json
Content-Length: 27

{
  "title": "learn REST",
  "completed": false
}

REST examples

patch: changing an entry:

PATCH /todos/6 HTTP/2.0
Host: jsonplaceholder.typicode.com
Content-Type: application/json
Content-Length: 23

{
  "completed": true
}

REST examples

delete: deleting an entry:

DELETE /todos/6 HTTP/2.0
Host: jsonplaceholder.typicode.com

REST examples

post: other request (deleting all completed todos):

POST /todos/delete_completed HTTP/2.0
Host: ...

Resources

example REST APIs: