Fetch: Next-generation Ajax technology

The technology of the ajax,2005 year has lasted for 10 years. It is a technology that creates an asynchronous request on the client, which is not an innovation in nature, but a combination of technologies. Its core object is XMLHttpRequest.

A brief review of the history

1. In 1996, an IFRAME was first added in IE to enable asynchronous requests to get server content
2. In 1998, Microsoft Outlook implemented the XMLHttp object in client script
3. In 1999, Microsoft added the XMLHTTP ActiveX object to IE5 to get the server content asynchronously until the Edge browser was discarded. Other browsers have implemented similar objects in succession called Xmlhttpreques.
4. In 2004, Google Gmail used a lot of XMLHttpRequest
5. In 2005, Google maps used a lot of XMLHttpRequest
6. 2005, Jesse James Garrett published the article "Ajax:a New approach to WEB applications", the birth of Ajax
7. 2006, XMLHttpRequest was adopted by the new, the last update is January 2014

The steps to use are as follows

var xhr = new XMLHttpRequest (); Xhr.open (' GET ', url); xhr.onload = function () {//to does with Xhr.response};xhr.onerror = Fun Ction () {//handling errors};xhr.send ();

As can be seen above, XHR uses OnXXX processing, a typical "event pattern".

Fetch is not yet a standard, and is produced by Whatag. Unlike Ajax, its API is not an event mechanism, but is handled by the popular Promise approach. We know that Promise is one of the ES6 content that has been officially released.

Fetch (' doact.action '). Then (function (res) {    if (Res.ok) {        res.text ()} then (function (obj) {            //Get The Plain Text        })    }}, Function (ex) {    console.log (ex)})

The above fetch functions are global, and the newest Firefox,chrome,opera are now supported, see

The above is a simple request, just pass a parameter URL in the past, the default is GET request, get plain text, fetch the second parameter can be a lot of configuration, such as POST request

Fetch ("Doact.action", {method: "POST", headers: {"Content-type": "application/x-www-form-urlencoded"},body: "keyword = Glory 7i&enc=utf-8&pvid=0v3w1kii.bf1ela "}"). Then (function (res) {if (Res.ok) {//to does with res} else if (Res.status = = 401) {//to does with res}}, function (e) {//Handling errors});

If the JSON is returned, the following

Fetch (' doact.action '). Then (function (res) {    if (Res.ok) {        Res.json ()} then (function (obj) {            //Get the JSON        })    }}, Function (ex) {    console.log (ex)})

Res is actually the Response object defined by the specification, and it has the following methods

1. ArrayBuffer ()
2. Blob ()
3. JSON ()
4. Text ()
5. FormData ()

Related:

Https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch
https://fetch.spec.whatwg.org
Https://hacks.mozilla.org/2015/03/this-api-is-so-fetching

Fetch: Next-generation Ajax technology