Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Several ways in which the front end initiates network requests

At present, front and back end separation has become the industry standard of Internet project development. The interaction of front and back end data through JSON data format can effectively decouple the overall project. The front and back end separation also lays a solid foundation for the future distributed architecture and multi-end service expansion of the project.

The separation of front and back ends is inseparable from the data interaction between front-end code and back-end code.

So what are the ways that the front end can initiate requests from the back end?

Js directly initiates XHR

As the most compatible pure data request method, XHR is widely used in front-end data request.

All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have the XMLHttpRequest object built in.

It can be

  • Update a web page without reloading the page
  • Request data from the server after the page has been loaded
  • Receives data from the server after the page has been loaded
  • Sends data to the server in the background

It is preferred for requesting data asynchronously.

$. Ajax from the early days of jQuery and axios now, the underlying principle is actually new XMLHttpRequest().

It is born early, and data is processed using callbacks, which is cumbersome to write.

XHR can natively support asynchronous requests

Example:

var xhr = new XMLHttpRequest(); xhr.open("get","url", true); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status == 200){ alert(xhr.responseText); }}}Copy the code

featch API

The standard way of modern front-end request initiation greatly simplifies the complexity of request initiation with less code.

Natural fusion Promises, asynchronous by default, reject only when the network is abnormal or across domains.

To achieve synchronous effects you need to use async await

At the lower level, it can be used to read file data streams

It is browser-native and can send requests without referring to HTTP libraries

but

Fetch also has compatibility issues, but as time goes by, browser vendors upgrade, and IE dies, this issue won’t be a big deal in the near future

Fetch configures whether the request carries cookies and accepts cookies written by the server. These are the credentials that need to be set extra

Example:

fetch('url', { method: 'GET', // *GET, POST, PUT, DELETE body: '', headers: { 'user-agent': 'Mozilla/4.0', 'content-type': 'application/json'}, credentials: 'include' }) .then(function(response) { return response }) .then(function(response) { console.log(response); });Copy the code

SRC request for the image

As we all know,

The IMG tag in HTML makes a request whenever the SRC attribute is placed.

Duplicate image addresses that all browsers request only once.

Often used to load a picture to display or paint a canvas.

Used for statistics. The advantage is less resource consumption, natural cross – domain. However, because it is a Get request, the amount of data is limited.

 <img src="xx.xx" style="display: none"/>
Copy the code