一、前言
Ajax是Asynchronous javaScript + XML的简写。这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。这一技术改变了自从Web诞生以来就一直沿用的'单击，等待'的交互模式。Ajax技术的核心是 XMLHttpRequest 对象（简称 XHR）,在 XHR出现之前，Ajax式的通信必须借助一些 hack手段来实 现，大多数是使用隐藏的框架或内嵌框架。XHR 为向服务器发送请求和解析服务器响应提供了流畅的 接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。 也就是说，可以使用 XHR 对象取得新数据，然后再通过 DOM 将新数据插入到页面中。
二、XMLHttpRequest 对象
1.IE7+、Firefox、Opera、Chrome和 Safari都支持原生的 XHR对象。
var xhr = new XMLHttpRequest();
2.XHR用法
xhr.open('get',url,false);//接受三个参数 请求的类型，请求的url，是否异步发送请求，open(0方法只是打开一个请求并没有真正的发送出去
xhr.send(null);//send()方法接受一个参数，要作为请求主体发送的数据，如果没有则传入null;
3.HTTP的头部信息
每个http请求和响应都会带有相应的头部信息，XHR 对象也提供了操作这两种头部（即请求头部和响应头部）信息的方法。
默认情况下，在发送 XHR 请求的同时，还会发送下列头部信息：
Accept：浏览器能够处理的内容类型
Accept-Charset：浏览器能够显示的字符集
Accept-Encoding：浏览器能够处理的压缩编码
Accept-Language：浏览器当前设置的语言
Connection：浏览器与服务器之间连接的类型
Cookie：当前页面设置的任何 Cookie
Host：发出请求的页面所在的域
Referer：发出请求的页面的 URI
User-Agent：浏览器的用户代理字符串
4.setRequestHeader()方法 可以设置自定义的请求头部信息，接受两个参数‘头部字段的名称’,‘头部字段的值’，setRequestHeader()只能在open()之后，send()之前调用，例:
xhr.open("get", url, true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);
通过getResponseHeader()方法并传入头部字段名称，可以取得相应的响应头部信息
5.get请求
使用get请求经常会发生一个错误，就是查询字符串的格式有问题。url末尾参数的参数的名称-值必须以&连接。
xhr.open('get','example.php?name1=value1&name2=value2',true);
一个辅助函数向现有URL的末尾添加查询字符串参数：
function addURLParam(url,name,value){
url += (url.indexof("?") == -1 ? "?" : "&");
url += endcodeURIComponent(name)+ '=' endcodeURIComponnet(value);
return url;
}
const url = "example.php";
url = add(url,"name","haha");
xhr.open('get',url,false);
三、XMLHttpRequest 2级
1.FormData
FormData为序列化表单以及创建表单格式相同的数据提供了便利
var data = new FormData();
data.append('name','haha');
例：
xhr.open("post",'xxx',true);
var form = document.getElementById("xx");
xhr.send(new FormData(form));
四、CORS 跨域资源共享
通过 XHR 实现 Ajax 通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR 对象只能访 问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是，实现合理的跨 域请求对开发某些浏览器应用程序也是至关重要的。
CORS（Cross-Origin Resource Sharing，跨源资源共享）是 W3C的一个工作草案，定义了在必须访 问跨源资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想，就是使用自定义的 HTTP头部 让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
1、IE对CORS的实现 微软在 IE8中引入了 XDR（XDomainRequest）类型。这个对象与 XHR类似，但能实现安全可靠 的跨域通信。
XDR与XHR的一些不同之处
cookie不会随请求发送，也不会随响应返回。
只能设置请求头部信息中的 Content-Type 字段。
不能访问响应头部信息。
只支持 GET 和 POST 请求。
XDR的用法和XHR的用法类似，但XDR的请求都是异步的
2、其他浏览器对CORS的实现
Firefox 3.5+、Safari 4+、Chrome、iOS版Safari和Android平台中的WebKit 都通过 XMLHttpRequest 对象实现了对 CORS 的原生支持。。要请求位于另一个域中的资源，使用标准的XHR对象并在 open()方法中传入绝对URL即可。
3.CORS的基本原理
浏览器将CORS分为“简单请求”和“非简单请求”
满足一下两大条件就属于简单请求:
1.请求方式是 ：get、post、head之一
2.http的头部信息不超过这些字段:Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
3.1基本流程
对于简单的请求，浏览器直接发送CORS请求，浏览器发现这次跨源AJAX请求是简单请求，就自动在头信息之中，添加一个Origin字段
GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
上面的头信息中，Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包 含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。
如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段：
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html;
charset=utf-8
上面的头信息之中，有三个与CORS请求相关的字段，都以Access-Control-开头。
（1）Access-Control-Allow-Origin 该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
（2）Access-Control-Allow-Credentials 该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
（3）Access-Control-Expose-Headers 该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。
对于非简单的请求
非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
五、其它跨域技术
Comet 是一种更高级的Ajax技术（也有人称为‘服务器推送’），Ajax 是一种从页面向服务器请求数据的技术，而 Comet 则是一种服务器向页面推送数据的技 术。Comet能够让信息近乎实时地被推送到页面上，非常适合处理实时数据的更新
Comet实现的两种方式：
长轮询和流：
长轮询是浏览器定时向服务器发送请求。页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到数据可发送。无论是短轮询还是长轮询，浏览器都要在接收数据之前，先发起对服务器的连接。两者大的区别 在于服务器如何发送数据。短轮询是服务器立即发送响应，无论数据是否有效，而长轮询是等待发送响 应。
http流，流不同于上面两种轮询，因为他在页面的整个生命周期内只使用一个http连接。就是浏览器向服务器发送一个请求，而服务器保持连接打开，然后周 期性地向浏览器发送数据
web scoket：是一个在单独的持久连接上提供全双工、双向通信。在 JavaScript中创建了 Web Socket之后，会有一个 HTTP请求发送 到浏览器以发起连接。在取得服务器响应后，建立的连接会使用 HTTP 升级从 HTTP 协议交换为 Web Socket 协议。也就是说，使用标准的 HTTP 服务器无法实现 Web Sockets，只有支持这种协议的专门服 务器才能正常工作。由于 Web Sockets使用了自定义的协议，所以 URL模式也略有不同。未加密的连接不再是 http://， 而是 ws://；加密的连接也不是 https://，而是 wss://。在使用 Web Socket URL时，必须带着这个 模式，因为将来还有可能支持其他模式。
1. Web Sockets API
var socket = new WebSocket("ws://www.example.com/server.php");
WebSocket 表示当前状态的 readyState 属性：
WebSocket.OPENING (0)：正在建立连接
WebSocket.OPEN (1)：已经建立连接
WebSocket.CLOSING (2)：正在关闭连接
WebSocket.CLOSE (3)：已经关闭连接
要关闭 Web Socket连接，可以在任何时候调用 close()方法
socket.close();
2. 发送和接收数据
socket.send("Hello world!");
var message = {time: new Date(), text: "Hello world!", clientId: "asdfp8734rew" };
socket.send(JSON.stringify(message)); //参数必须序列化
socket.onmessage = function(event){
var data = event.data;
console.log(data);
};
3. 其他事件
var socket = new WebSocket("ws://www.example.com/server.php");
socket.onopen = function(){ //成功建立连接时的钩子函数
alert("Connection established.");
};
socket.onerror = function(){ //发生错误时触发，连接不能持续
alert("Connection error.");
};
socket.onclose = function(){ //在连接关闭时触发
alert("Connection closed.");
};
六、Promise
在javaScript中，所有代码执行都是单线程执行的。所以导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行
基本用法：
const promise = new Promise(function(resolve, reject) {
if (true){
resolve(value); //把状态Promise对象状态从未完成变为成功
} else { reject(error); //把状态Promise对象状态从未完成变为失败}});
Promise.prototype.then();
Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。
then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法
Promise.prototype.catch();
Promise.prototype.catch方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。
参考文章
<<javascript 高级程序设计>> <<ECMAScript6入门-阮一峰>><<https://www.cnblogs.com/keyi/p/6726089.html>>