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) 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) {