Skip to main content

HTTP in JavaScript (Live Playground)

HTTP (Hypertext Transfer Protocol) is the foundation of data communication on the World Wide Web. It defines how messages are formatted and transmitted, and how web servers and browsers should respond to various commands. In this tutorial, we will learn about HTTP and its request methods, which are crucial when working with APIs in JavaScript.

HTTP Overview​

HTTP is a stateless, client-server protocol that allows clients (like web browsers) to send requests to servers and receive responses. HTTP requests can contain various methods, headers, and a message body, while HTTP responses consist of status codes, headers, and the requested data.

HTTP Request Methods​

HTTP request methods indicate the desired action to be performed on the specified resource. The most common request methods include:

  • GET: Requests data from a specified resource. It is the most common method used for retrieving information from APIs.
  • POST: Submits data to be processed by a specified resource. It is often used to create new resources, such as adding new items to a database.
  • PUT: Updates a specified resource with new data. It is used to modify existing data on the server.
  • DELETE: Deletes the specified resource. It is used to remove data from the server.

Making HTTP Requests in JavaScript​

In JavaScript, you can make HTTP requests using the fetch API or the XMLHttpRequest object. The fetch API is more modern and provides a more convenient way to work with requests and responses.

Example:

// Fetch API GET request
const url = 'https://jsonplaceholder.typicode.com/todos/1';

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// Fetch API POST request
const postData = {
  title: 'New Task',
  completed: false,
};

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(postData),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
Live Playground, Try it Yourself

Conclusion​

Understanding HTTP and its request methods is crucial when working with APIs in JavaScript. By using HTTP request methods like GET, POST, PUT, and DELETE, developers can interact with various resources on the web and perform a wide range of actions on them.