Fetch：下一代 Ajax 技术

JS 中 的几类异步请求：

1) AJAX

 　1> AJAX= Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。    用于页面部分异步同服务器交换数据 避免页面整体请求

     2>主要依靠  XMLHttpRequest  对象与后台服务器进行交互（老版本IE （IE5和IE6）使用 var variable=new ActiveXObject("Microsoft.XMLHTTP");）

     3>调用 XMLHttpRequest 的open 打开服务器地址使用 send方法向服务器发送数据　

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 跨域访问

    1.使用原始的jsonp格式 ：  

     ajax 在请求跨域地址时，使用传统的json /html / string 是取不到数据的 需要使用jsonp 形式 来获取数据  

      jsonp和json 类似 但是在服务器需要 将返回的字符串以函数名的形式返回,在ajax所在的页面需要定义那个那个返回函数

      Stack Overflow  上的 这里 说的很清楚:  Sending JSONP vs. JSON data?     

   2.jquery 提供了$.jsonp 函数用于解决跨域问题

 var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
    +"?id=1&callback=?";
    $.jsonp({
  "url": url,
  "success": function(data) {
    $("#current-group").text("当前工作组:"+data.result.name);
  },
  "error": function(d,msg) {
    alert("Could not find user "+msg);
  }
});

    拓展：jquery的几种异步请求，ajax   

　　1> $.load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中

　　2>$.get( url, [data], [callback] )：使用GET方式来进行异步请求

　　3>$.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

　　4>$.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件

　　5>$.Ajax 

　　备注： $("#loading").bind("ajaxSend", function(){})我们可以通过bind的形式 来绑定ajax实践

　　　　　 可以通过 $.ajaxSetup( options ) : 设置全局 AJAX 默认选项

                   serialize() 与 serializeArray() 用于序列化数据

2) axios

是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

随着 vuejs 作者尤雨溪发布消息，不再继续维护vue-resource,并推荐大家使用 axios 开始，axios 进入了很多人的目光。axios本质也是对原生的XHR的封装，不过它是Promise 的实现版本，符合最新的ES规范，axios的几条特性：

(1)从浏览器中创建XHR；

(2)从node.js创建http请求；

(3)支持Promise API；

(4)客户端支持防御CSRF

(5)提供了一些并发请求的接口

//axios

axios.get('/user',

　　 { params: { ID: 12345 } })

　　.then(function (response) { console.log(response); })

　　.catch(function (error) { console.log(error); });

3) Fetch:

　　1>它和ajax类似 可以向服务器发送和获取服务器的数据  

       2>它不同于ajax的基于事件绑定 它是使用ES6中提供的Promise 基于结果期许

      调用：

        fetch(url,{ 头部信息 ,发送请求数据 }).then(function(){  成功后处理 },function(){ 失败后处理});

      它支持链式调用：

　　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

});