Fetch: Next-generation Ajax technology

Several types of asynchronous requests in JS:

1) AJAX

1> ajax= Asynchronous JavaScript and XML (asynchronous JavaScript and XML). Used for page part asynchronously Exchange data with server to avoid page overall request

2> mainly relies on the XMLHttpRequest object to interact with the background server (the old version ie (IE5 and IE6) uses Var variable=new activexobject ("Microsoft.XMLHTTP");)

3> calls XMLHttpRequest's open server address to send data to the server using the Send method

function Loadxmldoc () {
var xmlhttp;
　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 (xmlhttp.readystate = = 4 && xmlhttp.status = = 200) {
document.getElementById ("Mydiv"). InnerHTML = Xmlhttp.responsetext;
}
}
　　Xmlhttp.open ("POST", "/ajax/demo_post2.asp", true);
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xmlhttp.send ("Fname=bill&lname=gates");
}

4> Ajax cross-domain access

1. Use the original JSONP format:

Ajax when requesting cross-domain addresses, using the traditional json/html/string is the need to use the Jsonp form to get the data

JSONP is similar to JSON but the server needs to return the returned string as a function name, where the Ajax page needs to define the return function

It's very clear here on Stack Overflow: Sending JSONP vs. JSON data?

2.jquery provides the $.JSONP function to solve cross-domain problems

var url= "Http://localhost:8080/WorkGroupManagment/open/getGroupById"    + "? id=1&callback=?";
    $.jsonp ({  "url": URL,  "Success": function (data) {    $ ("#current-group"). Text ("Current workgroup:" +data.result.name) ;  },  "error": function (d,msg) {    alert ("Could not find User" +msg);}  );

Expansion: Several asynchronous requests for jquery, Ajax

1> $.load (URL, [data], [callback]): Load remote HTML file code and insert into DOM

2>$.get (URL, [data], [callback]): Use get mode for asynchronous requests

3>$.post (URL, [data], [callback], [type]): Use post to make asynchronous requests

4>$.getscript (URL, [callback]): Request to load and execute a JavaScript file via GET mode

5>$. Ajax

Note: $ ("#loading"). Bind ("Ajaxsend", function () {}) We can bind Ajax practices in the form of bind

You can set the global AJAX default options via $.ajaxsetup (options):

Serialize () and Serializearray () for serializing data

2) Fetch:

1> it's like Ajax. You can send and get data from the server to the server

2> it is different from Ajax-based event binding it is using the promise provided in ES6 based on results expectations

Call:

Fetch (url,{header information, send request data}). Then (function () {Succeeded after processing},function () {failed after processing});

It supports chained calls:

Fetch (url,{}). Then (function () {},function () {}). Then (function () {})

eg

fetch(‘doAct.action‘).then(function(res) {

     if (res.ok) {          res.text().then( function (obj) {              // Get the plain text          })      } },  function (ex) {      console.log(ex) })//////////////////////////////////////////////// fetch( "doAct.action" , {      method:  "POST" ,      headers: {          "Content-Type" :  "application/x-www-form-urlencoded"      },      body:  "keyword=荣耀7i&enc=utf-8&pvid=0v3w1kii.bf1ela" }).then( function (res) {      if (res.ok) {          // To do with res      }  else if (res.status == 401) {          // To do with res      } },  function (e) {      // Handling errors });

Fetch: Next-generation Ajax technology