Introduction to HTTP Requests with AJAX

What is HTTP?

HTTP is short for Hypertext Transfer Protocol. According to Wikipedia it is defined as, “… a request–response protocol in the client–server computing model”. In other words, it is the process by which messages are sent on behalf of a client using a web browser or application. These messages either get data from a server or send data to a server.

HTTP Methods:

There are many methods for communicating with a server. The GET method allows us to get requested data from a server. The POST method requests that the server accept the data we are sending and add it as specified by the URI. PUT and DELETE methods are used for altering data on the server.

These methods are the basic building blocks of communication integral to running web-based applications.

What is Asynchronous Programming?

Asynchronous programming practices allow us to send and receive HTTP requests while still allowing the user to interact with the application. Contrast this with a synchronous approach.

In a synchronous approach to programming, all processes in the program run one at a time. This means no other process can start until the current one is finished. It might not seem like a big deal until we consider just how many processes might be running in any given application. This can introduce obvious problems in the context of running a web application.

Take the example of a bakery. We have an oven that can bake many loaves of bread at once, but we have hired a ‘synchronous’ baker, who completes each loaf before starting the next one. He mixes the flour, kneads the bread, waits for it to rise, then puts it in the oven and waits for it to finish baking. How many loaves will he finish in a day? However, imagine a scenario where he could make and knead the dough and while it rises, start another batch. Then while the oven is baking his bread, he is preparing to bake another batch. This seems much more efficient.

Introducing AJAX

One efficient way for communicating HTTP requests to a server is the AJAX technique. AJAX stands for ‘Asynchronous Javascript and XML’. It allows us to update certain information on the browser without having to refresh the entire page. The great benefit of AJAX is that it can perform asynchronously. This way our client can still interact with the browser while the process of updating the data is being executed in the background.
Lets take a look at how the AJAX technique is executed. Here is an example of an AJAX POST request:

$.ajax({
      url: this.server,
      type: 'POST',
      data: JSON.stringify(message),
      contentType: 'application/json',
      success: (data) => {
        console.log(data);
      },
      error: (data) => {
        console.log('POST failed');
      },
    });

Above we have a jQuery call to AJAX. The specified url is the server to which the request will be sent. The type property tells the server which type of HTTP method we are requesting the server to complete. The data property contains the data we want to send to the server. The contentType property lets the server know what type the data is. The success and error properties contain functions to be called depending on whether or not our POST request was successful. Below is an example of a GET request.

$.ajax({
      url: this.server,
      type: 'GET',
      data: {order: '-createdAt'},
      contentType: 'application/json',
      success: (data) => {
        console.log(data);
      },
      error: (data) => {
        console.error('GET failed');
      }
    });

Conclusion

AJAX is a popular and powerful way to perform HTTP requests asynchronously. Since this increases the power and efficiency of our applications, it is a highly important technique to be competent in.