Up Your Web Development Game: Learn to Write HTTP Requests in JavaScript
Tags: javascript, framework, api, frontend
Published: 2023-01-03 14:14:08

---
title: Up Your Web Development Game: Learn to Write HTTP Requests in JavaScript
published: true
date: 2023-01-03 09:38:51 UTC
tags: JavaScript,Framework,API,Frontend
canonical_url: https://techdevblog.io/up-your-web-development-game-learn-to-write-http-requests-in-javascript/
---

 ![Up Your Web Development Game: Learn to Write HTTP Requests in JavaScript](https://techdevblog.io/content/images/2023/01/image_5-1.png)

HTTP requests are an integral part of web development, and being able to write them in JavaScript is essential for any aspiring front-end or back-end developer. In this article, we will cover how to write HTTP requests in JavaScript in both the browser and in Node.js, both with and without using libraries.

## HTTP Requests in the Browser

In the browser, there are two primary ways to make HTTP requests: using the `XMLHttpRequest` object, or using the `fetch` API.

### XMLHttpRequest

The `XMLHttpRequest` object has been around for a long time, and it is supported by all modern browsers. It allows you to send HTTP requests to a server and receive a response. Here is an example of how to use `XMLHttpRequest` to send a GET request to the server to retrieve some data:

```
const xhr = new XMLHttpRequest();

xhr.open('GET', '/data');
xhr.send();

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  }
};
```

In this example, we first create a new `XMLHttpRequest` object and then call the `open` method to specify the type of request (GET) and the URL to send the request to. The `send` method is then called to send the request.

Finally, we set up an `onload` event handler to be called when the request is complete. In the handler, we check the `status` property of the `XMLHttpRequest` object to make sure the request was successful (a status of 200 indicates a success), and then we log the response data to the console.

You can also use `XMLHttpRequest` to send POST requests and other types of HTTP requests. Here is an example of how to send a POST request:

```
const xhr = new XMLHttpRequest();

xhr.open('POST', '/data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name: 'John', age: 30 }));

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  }
};
```

In this example, we first create a new `XMLHttpRequest` object and then call the `open` method to specify the type of request (POST) and the URL to send the request to. We then set the `Content-Type` request header to `application/json` to indicate that we are sending JSON data in the request body. Finally, we call the `send` method and pass it a stringified version of an object containing the data we want to send.

### Fetch API

The `fetch` API is a newer way to make HTTP requests that is supported by all modern browsers. It uses Promises to make it easier to work with asyncronous requests. Here is an example of how to use `fetch` to send a GET request to the server to retrieve some data:

```
fetch('/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
```

In this example, we call the `fetch` function and pass it the URL we want to send the request to. The `fetch` function returns a Promise that resolves with the response from the server.

We chain a call to the `then` method to the Promise returned by `fetch`, and in the callback function, we call the `json` method on the response object to parse the response as JSON. We chain another call to the `then` method to the Promise returned by the `json` method, and in this callback function, we log the data to the console.

If an error occurs at any point, it will be caught by the `catch` method, which will log the error to the console.

You can also use the `fetch` API to send POST requests and other types of HTTP requests. Here is an example of how to send a POST request:

```
fetch('/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
```

In this example, we call the `fetch` function and pass it the URL we want to send the request to, as well as an options object. In the options object, we specify the `method` as 'POST', the `headers` as an object containing the `Content-Type` request header set to 'application/json', and the `body` as a stringified version of an object containing the data we want to send.

## HTTP Requests in Node.js

In Node.js, there are several ways to make HTTP requests.

### Node.js `http` module

One of the most popular is the `http` module, which is built into Node.js. Here is an example of how to use the `http` module to send a GET request to the server to retrieve some data:

```
const http = require('http');

http.get('/data', res => {
  res.setEncoding('utf8');
  let data = '';
  res.on('data', chunk => {
    data += chunk;
  });
  res.on('end', () => {
    console.log(data);
  });
});
```

In this example, we require the `http` module and then call the `get` method, passing it the URL we want to send the request to and a callback function to be called when the response is received.

In the callback function, we set the encoding of the response to 'utf8' and create a variable to store the response data. We then set up an event listener for the 'data' event, which is emitted when a chunk of data is received. In the event handler, we append the chunk of data to the `data` variable.

Finally, we set up an event listener for the 'end' event, which is emitted when all of the data has been received. In the event handler, we log the `data` variable to the console.

You can also use the `http` module to send POST requests and other types of HTTP requests. Here is an example of how to send a POST request:

```
const http = require('http');
const data = JSON.stringify({ name: 'John', age: 30 });

const options = {
  hostname: 'localhost',
  port: 8080,
  path: '/data',
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Content-Length': data.length
  }
};

const req = http.request(options, res => {
  res.setEncoding('utf8');
  let data = '';
  res.on('data', chunk => {
    data += chunk;
  });
  res.on('end', () => {
    console.log(data);
  });
});

req.write(data);
req.end();
```

In this example, we first require the `http` module and create a variable to hold the data we want to send in the request. We then create an options object with the necessary information for the request, including the hostname, port, path, method, and headers.

We then call the `request` method on the `http` object, passing it the options object and a callback function to be called when the response is received. In the callback function, we set the encoding of the response to'utf8' and create a variable to store the response data, just like in the GET request example.

Before we end the request, we use the `write` method to write the data to the request body, and then we call the `end` method to send the request.

## HTTP Requests with Libraries

While it is possible to make HTTP requests using the built-in APIs and modules discussed above, there are also several libraries available that can make the process even easier.

### Axios

One popular library for making HTTP requests in Node.js is axios. axios is a Promise-based HTTP client that works in the browser and in Node.js. Here is an example of how to use axios to send a GET request to the server to retrieve some data:

```
const axios = require('axios');

axios.get('/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));
```

In this example, we require the `axios` library and then call the `get` method, passing it the URL we want to send the request to. The `get` method returns a Promise that resolves with the response from the server.

We chain a call to the `then` method to the Promise returned by `axios.get`, and in the callback function, we log the `data` property of the response object to the console. If an error occurs at any point, it will be caught by the `catch` method, which will log the error to the console.

You can also use `axios` to send POST requests and other types of HTTP requests. Here is an example of how to send a POST request:

```
const axios = require('axios');

axios.post('/data', { name: 'John', age: 30 })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));
```

In this example, we require the `axios` library and then call the `post` method, passing it the URL we want to send the request to and an object containing the data we want to send. The `post` method returns a Promise that resolves with the response from the server.

We chain a call to the `then` method to the Promise returned by `axios.post`, and in the callback function, we log the `data` property of the response object to the console. If an error occurs at any point, it will be caught by the `catch` method, which will log the error to the console.

### jQuery

Another popular library for making HTTP requests in the browser is `jQuery`, which provides a number of utility functions for making Ajax requests. Here is an example of how to use `jQuery` to send a GET request to the server to retrieve some data:

```
$.get('/data', data => {
  console.log(data);
});
```

In this example, we call the `get` function provided by `jquery` and pass it the URL we want to send the request to and a callback function to be called when the response is received. In the callback function, we log the data to the console.

You can also use `jquery` to send POST requests and other types of HTTP requests. Here is an example of how to send a POST request:

```
$.post('/data', { name: 'John', age: 30 }, data => {
  console.log(data);
});
```

In this example, we call the `post` function provided by `jquery` and pass it the URL we want to send the request to, an object containing the data we want to send, and a callback function to be called when the response is received. In the callback function, we log the data to the console.

## Conclusion

In this article, we have covered how to write HTTP requests in JavaScript in both the browser and in Node.js, both with and without using libraries. We have also looked at several different options for making HTTP requests, including the `XMLHttpRequest` object, the `fetch` API, the `http` module, and libraries like `axios` and `jquery`.

Regardless of which method you choose, it is important to understand the basics of HTTP requests and how to make them in JavaScript, as they are an essential part of web development.