Objectives:

By the end of this chapter, you should be able to:

• Explain what HTTP is and what HTTP headers are
• Use curl to make HTTP requests and include headers and data
• Compare and contrast HTTP verbs and status codes
• Define REST and explain what a RESTful API is

HTTP Format

Before we talk about making HTTP requests, let's review once again what HTTP is. HTTP is a protocol (means of communication) between servers and browsers. HTTP is the underlying protocol used by the web and it defines how information is transmitted. It also specifies how servers and browsers should interact. In HTTP, we have requests that are issued by clients (and sometimes servers) to other servers. Those servers then issue a response back to the originator of the request.

When we issue an HTTP request, we specify the URL that we are making a request to and we can pass additional meta-information to the request by using headers. You can learn more about headers here. Request headers can include information about:

• Sending cookies to the server
• Caching information
• Data types that are ok to be sent (json/html/xml)
• Browser information (Name/Version)

The same way that we send HTTP headers in a request, we also receive HTTP headers in a response. Reponse headers can include information about:

• Caching information
• The server issuing the response
• Attaching a cookie in the browser
• The data type being sent (json/html/xml)

Now let's understand the HTTP request and response in more detail. To make sample HTTP requests, we will use the curl command line tool which allows us to issue HTTP requests from the terminal. The curl command accepts quite a few flags including:

-v - for additional information
-H - for adding request headers
-I - including response headers
-X - for picking an HTTP verb
-d - for passing data in the request

You can learn more about curl and useful flags right here. There are more friendly tools to make HTTP requests like Postman and HTTPie, but we will start with the basics with curl as it is a valuable tool to teach the fundamentals.

curl command

Let's make a request to https://www.infschool.com using curl and add some request headers:

curl -v 'https://www.infschool.com/' \
     -H 'accept-encoding: gzip, deflate, sdch, br' \
     -H 'accept-language: en-US,en;q=0.8' \
     -H 'upgrade-insecure-requests: 1' \
     -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36' \
     -H 'accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' \
     -H 'authority: www.infschool.com' --compressed

You can copy this command and paste it anywhere in the terminal and press enter. You should see the following information:

HTTP Request

First - we see the request headers:

GET / HTTP/1.1
Host: www.infschool.com
accept-encoding: gzip, deflate, sdch, br
accept-language: en-US,en;q=0.8
upgrade-insecure-requests: 1
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
authority: www.infschool.com

HTTP Response

We then see the response headers and the full response:

HTTP/1.1 200 OK
Date: Wed, 26 Oct 2016 14:38:55 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Set-Cookie: __cfduid=dc463a8265a523ae34244e656361ef2a11477492735; expires=Thu, 26-Oct-17 14:38:55 GMT; path=/; domain=.infschool.com; HttpOnly
X-Frame-Options: SAMEORIGIN
X-Xss-Protection: 1; mode=block
X-Content-Type-Options: nosniff
Cache-Control: max-age=0, private, must-revalidate
Set-Cookie: _inf-paces-app_session=RlZ3T2F3Q0ZMYmFIRVBXeVJQMUZzbkY3R1lVSjNqSUxiL3JJR0t6NWZqWFdwdk9XanJzek9HZzBvb1RUUkN4U05ZWmZTTUttb045aUlLT1FmSUlySmYyalQwWXZYVnJtNFNYU1lYUTdIcW1wMnZxb0tSQ3dobXF3OFYvU3Y3RjhhMUEyMlRKZ2ZMOSs5dWdBbnJoWU1RPT0tLTRSWnRWRSttR3dDNlBFQUxuaXl4OGc9PQ%3D%3D--163a39a41af7d0f73718aee89bb9e52a603244bd; path=/; secure; HttpOnly
X-Request-Id: 8077930d-ab0c-44e2-95d0-8cf8b7bb7e34
X-Runtime: 0.008792
X-Rack-Cache: miss
Strict-Transport-Security: max-age=31536000
Via: 1.1 vegur
Server: cloudflare-nginx
CF-RAY: 2f7ea79b7e021e8f-SJC
Content-Encoding: gzip

<!DOCTYPE html>
<html lang="en">
<head>

  <meta property="og:image" content="https://www.infschool.com/assets/logos/300logo-eca4f23104b6dd23001f41f285105acac06e287a58befab70bad4d0c2fe86ebd.jpg"/>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Spend 4 months learning JavaScript, Python, and React with 4-12 other students. Learn quickly with experienced instructors. Next class Jan 28">
  <meta name="author" content="Inf-Paces School">

  <title>Inf-Paces School</title>

  <link rel="stylesheet" media="all" href="/assets/application-6c02ccab94eb3d1ef6ca11b543a6637fbe24039d6ec8b79eba0313ca992ac414.css" />

  <!-- Add a stylesheet tag for the name of the action -->
  <link rel="stylesheet" media="screen" href="/assets/main-ab69d4dadb064fcdbcfaa9df78b072f80633f59c5b2cced806ebde8a2f369884.css" />
  <link rel="stylesheet" media="screen" href="/assets/home-c2fad1776c2eba2f54b7e044395c569145a3771a7aaf1face93bbb7c954b7030.css" />

  <script src="/assets/application-501b04d21fa181e77f89e937da573db0747fdb888af1a319d7919a4ef67d5c10.js"></script>
  <script src="/assets/modernizr-43ece90ce3662a6bd3b00d7acdddd63c4a965f96d0b7e2b9738988f559971b3f.js"></script>

  <link rel="shortcut icon" type="image/x-icon" href="/assets/favicon-eb41ae8905bdd2b439d03b1628aaa345c177848bb8e6c36ea8c5a56cf03ef757.ico" />

  ...

Notice the format of the request and the response. The HTTP request has the following format:

Request-Line
1 or more headers
CRLF # new line
[ message-body ]

and the response has the following format:

Status-Line
1 or more headers
CRLF # new line
[ message-body ]

We call this entire process (an HTTP request being made and an HTTP response being issued), the request/response cycle.

HTTP Verbs

Another very important part of HTTP is that when we make a request, we specify the type of HTTP verb that we want to use. There are quite a few HTTP verbs, but here we'll cover only the most common ones. Different verbs serve different purposes, and only some of them are idempotent. (Remember what this word means? An idempotent operation is one that will repeatedly produce the same result.)

• GET - An idempotent operation that is designed for getting data from the server.
• POST - A non idempotent operation that can create data on the server or otherwise modify data.
• PUT - Technically idempotent, but commonly used for updating data that already exists on the server.
• PATCH - Non idempotent and also used for modifying data on the server. (Read this for details on why PATCH is not classified as idempotent.)
• DELETE - Deletes data from the server. Not idempotent.

There are other verbs allowed in the HTTP spec but we do not use them often as web developers. The other verbs are listed for reference:

• HEAD
• TRACE
• OPTIONS
• CONNECT

HTTP Status Codes

When a response is issued, a status code is sent to provide more information about the response. The HTTP status codes tell the client the result of making a HTTP request to the server. The general category of status codes is as follows:

• 200's Success! Your request was successfully processed by the server
• 300's Redirect! The server will return another url for which the client should make a GET request to.
• 400's Client Error! The client made a request that the server decided was invalid for some reason. This could be a get request to a resource that doesn't exit or a post request that was missing required information
• 500's Server Error! The client made a request to the server and the server could not fulfill the request because of some problem on the server side. This happens frequently if a website is down and cannot respond to requests or if there is an error in your server code.

REST

As you research more on APIs you will very commonly hear the term REST API when describing certain kinds of APIs. So what is it? REST (REpresentational State Transfer) is an architectural style, and an approach to communications that is often used in the development of Web services. The purpose of REST is to provide a framework for creating fast, scalable and reliable APIs. In order for an API to be RESTful there are some constraints that it must adhere to. You can read more about REST here and here.

Additional Resources

https://www.youtube.com/watch?v=7YcW25PHnAA