1024programmer Java The most common way to make HTTP requests in JavaScript

The most common way to make HTTP requests in JavaScript

Javascript has great modules and methods for sending HTTP requests that can be used to send or receive data from server-side resources. In this article, we will cover some popular methods of making HTTP requests in Javascript.

Ajax

Ajax is the traditional way of making asynchronous HTTP requests. Data can be sent using the HTTP POST method and received using the HTTP GET method. Let’s look at sending a GET request. I’ll be using JSONPlaceholder, a free online REST API for developers that returns random data in JSON format. To make HTTP calls in Ajax, you need to initialize a new XMLHttpRequest() method, specifying the URL endpoint and HTTP method (GET in this case). Finally, we use the open() method to bind the HTTP method and URL endpoint together, and call the send() method to trigger the request. We log the HTTP response to the console using the XMLHTTPRequest.onreadystatechange property that contains an event handler to be called when the readystatechanged event fires.

If you look at the browser console it will return an array of data in JSON format. But how do we know if the request is completed? In other words, how do we handle the response using Ajax? The onreadystatechange has two methods, readyState and status that allow us to check the status of the request.

If readyState equals 4, it means that the request has been completed. In addition to using Javascript to make Ajax calls directly, there are other more powerful HTTP calling methods, such as the $.AjaxjQuery method.

jQuery Methods jQuery has many methods to easily handle HTTP requests. To use these methods, you need to include the jQuery library in your project.

$.ajax

jQuery Ajax is one of the simplest ways to make HTTP calls.

The $.ajax method requires many parameters, some of which are required and some of which are optional. It contains two callback options success and error to handle the received response.

$.get method

The $.get method is used to perform GET requests. It requires two parameters: the request address and the callback function.

$.post

The $.post method is another way to post data to the server. It takes three parameters: the requested URL, the data you want to send, and the callback function.

$.getJson

The $.getJSON method only retrieves data in JSON format. It requires two parameters: url and callback function.

jQuery has all these methods to request or post data to a remote server. But you can actually combine all these methods into one: the $.ajax method, as shown in the following example:

Fetch

fetch is a new powerful web API that allows you to make asynchronous requests. In fact, fetch is one of the best and favorite ways to make HTTP requests. It returns a “Promise”, which is a great feature of ES6. If you are not familiar with ES6, you can read this article about ES6. Promises allow us to handle asynchronous requests in a smarter way. Let’s see how fetch technology works.

The fetch function requires a required parameter: endpointURL. It also has other optional parameters, as shown in the following example:

As you can see, fetch has many advantages for making HTTP requests. In addition, there are other modules and plug-ins in fetch that allow us to send and receive requests to the server side, such as Axios.

Axios

Axios is an open source library for making HTTP requests and provides many powerful features. Let’s see how it works.

Usage: First, you need to include Axios. There are two ways to include Axios in your project. First, you can use npm: npm install axios –save

Then you need to import it import axios from ‘axios’

Making requests using axios: Using Axios, you can retrieve and post data from the server using GET and POST.

axios takes one required parameter and can also take a second optional parameter. This puts some data as a simple query.

POST:

Axios returns “Promise”. If you are familiar with promises, you probably know that promises can execute multiple requests. You can do the same thing using axios andRun multiple requests at the same time.

Axios supports many other methods and options. You can learn about them on their official website

Summary

The above is the most common method of making HTTP requests in Javascript introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support of the website!

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/714785

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us

181-3619-1160

Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top
首页
微信
电话
搜索