Form form------AJAX------Fetch

1. Before Ajax

At the beginning, the browser initiates the request as follows:

The user enters the URL/a label/img label, etc.--the server returns HTML/CSS/JS--and reloads the page after the user receives it.

The above request initiation method either causes the page to refresh (and so is the form submission), or can only request a specific type of file (picture, CSS, or JS).

The arrival of the 2.AJAX

The essence of Ajax is to use JS to initiate a request, and get the content returned by the server.

The key to JS initiating the request is the XMLHttpRequest interface provided by the browser. The request process is as follows:

//Create a XMLHttpRequest objectvarRequest =NewXMLHttpRequest ()//Monitor the status change after successful request, Request.responsetext is the content returned by the server (the default is the string)Request.onreadystatechange =function() {  if( This. readyState = = 4 && This. Status = = 200) {Console.log (Request.responsetext)}};//Set Request ParametersRequest.open ("GET", "filename",true);//Send RequestRequest.send ();

The above process, through the encapsulation of jquery:

$.get (' filename '). Then (function(response) {  //  response here is the contents of the return})

3.Fetch API

Now that the browser has XMLHttpRequest this API, why not just provide the encapsulated interface?

The Fetch API is the native AJAX interface provided by the browser. You can use the Window.fetch function instead of the previous $.ajax.

In other words, the browser helps us to implement the Jquery.ajax, and we can send the asynchronous request directly with Fetch.

Fetch ('/'). Then (function(response) {    response.text (). Then (function( Text) {        console.log (text)})    })

The fetch API, however, is based on ES6.

Form form------AJAX------Fetch