What Are The Popular Ways To Make HTTP Request In Javascript

    Apr 22, 2019       by Pankaj Kumar
http-requst-javascript.jpg

As a developer, We all come across making HTTP request either in web or in mobile app development. After becoming javascript frontend frameworks so popular, Every developer comes across these methods. 

Nowadays, There are various ways to make an HTTP request in the client application.  In this article, I will explain the popular ways of fetching data from the server after making HTTP request.

 

1. fetch

The fetch API provides a fetch() method which we can use to perform an HTTP request. It returns a Promise that we can use to retrieve the response data from the request made. It takes only one mandatory argument, Which is the endpoint URL of the resource we want to fetch.

 

 
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(records => {
this.setState({
records: records
})
})
 

 

2. Axios 

It is a Promise based HTTP client. It is a big advantage of using Promises when dealing with code that required a more complicated chain of events.  

 

 
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
 

 

3. HttpClient

The HttpClient in @angular/common/http offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers. Additional benefits of HttpClient include testability features, typed request and response objects, request and response interception, Observable apis, and streamlined error handling.

 

 
let bodyString = JSON.stringify(data);
let headers = new HttpHeaders().set('Content-Type','application/json ');
return this.http.put<any[]>(environment.apiUrl+"user/update-profile",bodyString,{headers});
 

 

4. AJAX

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. In AJAX, we mainly initialize a new XMLHttpRequest() method, specifing the URL endpoint and HTTP method. For getting detailed info, you can click here 

 

 
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
 

 

5. jQuery AJAX

jQuery has various methods to make HTTP requests. For using this method we need to include jQuery library in our project.

 

 
$.ajax({
url: 'users.php',
dataType: 'text',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
data: $(this).serialize(),
success: function( data, textStatus, jQxhr ){
$('#response pre').html( data );
},
error: function( jqXhr, textStatus, errorThrown ){
console.log( errorThrown );
}
});
 

 

That’s all for now. Thank you for reading and I hope this post will be very helpful for understanding the popular ways to make an HTTP request.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

javascript HTTP reqeust

Find other similar Articles here:

CATEGORIES
INTERVIEW QUESTIONS