Up Your Web Development Game: Learn to Write HTTP Requests in JavaScript was initially published on Tuesday January 03 2023 on the Tech Dev Blog. For the latest up-to-date content, fresh out of the oven, visit https://techdevblog.io and subscribe to our newsletter!
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.
Up Your Web Development Game: Learn to Write HTTP Requests in JavaScript was initially published on Tuesday January 03 2023 on the Tech Dev Blog. For the latest up-to-date content, fresh out of the oven, visit https://techdevblog.io and subscribe to our newsletter!