Http Requests

Sometimes understanding the innards of common processes can be strange because we've never thought about them before. For instance, what happens when you click a like button on a social media website? How does that little number next to the like button increase? Who told it to? Enter http requests.

Http requests are ways clients send requests to retrieve or modify resources/data, and servers then send responses back to the client to these requests. This clearly involves two parties. The client needs information, needs to give information, and/or needs to change information, and the server is there to listen and respond.

A server can create their own http request methods that a client must adhere to in order to send, receive, or alter their data. However clients and servers commonly follow the REST pattern which allows for clients to assume that there are a handful of http requests that the server has already set up for them. This format of RESTful API's is one that we will assume for sake of simplicity.

These are the four commonly used http requests: get, post, put, & delete. Let's examine each of these to see what they do when a client uses them to interact with a server.

GET - reads/retrieves a data. Requests using GET should only retrieve data, not send data.

POST - sends/creates new data to the server causing a change in state or side effects on the server.

PUT - updates specific data by replacing current representations of a specified piece of data with a new one.

DELETE - deletes a specified piece of data.

There are several other http request methods that you might see in addition to these four including OPTIONS, HEAD, CONNECT, TRACE, and, PATCH. As you might have noticed these are all verbs (with the exception of HEAD, and OPTIONS). Referring to to these methods as verbs is another common practice when following the RESTful guidelines.

So why would we need to know about these methods? Let's look back to the early days of internet surfing when web pages were made up of simply HTML files. Every web page was a static piece of data that you could view, but not interact with, certainly not in the way that we can now.

Tim Berners-Lee and his team at CERN are first proposed the original "World Wide Web" project in 1989. The first versions of what is now known as the World Wide Web had only one HTTP request method, the GET method. Clients would type in a URL which utilizes the GET method and then receive an HTML page from the server that would render as a static webpage for them to read and look at. Oh, how far we have come since 1989!

Now every time you post something on social media, like a friends's picture, change your profile picture, or delete your user from a website you are using these methods that we've talked about. Http request make the World Wide Web so much more dynamic and easier to interact with.

Now that we better understand these request methods, how do we utilize them as programmers? Let's first take a look at what JavaScript offers us:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
   }
};
xhttp.open("GET", "filename", true);
xhttp.send();

We are looking at an example of how to make a GET request with JavaScript. Admittedly, this is a little confusing and convoluted at first glance. We are creating a new instance of the HMLHttpRequest object and assigning it to xhttp utilizing pseudoclassical instantiation. Then we attach an event handler that calls the function is it assigned to whenever the "readystate" attribute changes on the xhttp object. This anonymous function sets up the document object with the our http request response text. We then call the GET method using .open() and finally send the request to the server with send().

The JavaScript approach is functional, but in reality it is likely something you will almost never use it. Most client side frameworks and libraries actually provide their own. For instance, jQuery gives you the AJAX method which offers a much user-friendly method, at least when compared to the native JavaScript approach.

Here is a GET request from jQuery:

$.ajax({
  url: url,
  data: data,
  success: successCallbackFunction,
  dataType: dataType
});

Here we are passing an object that lists the url to where we are sending the request, data which refers to a plain object or string that is sent to the server with the request, a success callback function that is executed if the request is successful, and dataType which is the type of data expected from the server. Ahh, how brevity can be so sweet.

Let's sum up what we've explored so far... Http requests are methods that the client uses to send, retrieve, or modify resources, and servers send responses to these requests. Thanks to Tim Berners-Lee we started out with a simple GET method for HTML and have now developed many more that make our internet surfing experience very dynamic. And while JavaScript has an XMLHttpRequest object built in, most client side frameworks and libraries provide their own way of making these requests which makes our lives a little bit better. Request away!