JavaScript网络请求与远程资源Ajax、Beacon、Web Socket

Ajax Asynchronous Javascript +XML
本质：远程脚本
Ajax-无需刷新当前页面即可从服务器获取额外数据的一个方法.
最初是通过JavaScript从服务器获取XML数据的一种手段

• 最初，JavaScript对服务器的请求可以通过中介（如Java小程序、或flash影片），即远程脚本
• 在XHR出现之前Ajax风格的通信必须通过黑科技实现-隐藏的窗格、内嵌窗格。
• XHR由微软提出，又被其他浏览器借鉴，打开一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息，提供了原生的浏览器通信能力。
  XHR为发送服务器请求和获取响应提供了合理的接口，该接口可以实现同/异步从服务器获取额外的数据，即用户不用点击页面刷新也可以获得新的数据。
• XHR的API被认为比较难用，所以又推出了fetch API，后者支持promise、service worker。

通过XHR进行请求有一个主要限制是跨域安全策略，默认情况下，XHR只允许访问 与发起请求的页面在同一个域的资源。想要实现跨域XHR，从实现跨域HTTP入手，CORS方法、CSP头部。此外也可以直接不用XHR，采用其他不受跨域限制的方法，jsonp、img图片探测

解决跨域

XMLHttpRequest对象 同/异 步

XMLHttpRequest对象 fetch API
一个异/同步（配置open方法的参数来实现同/异 步）调用对象，设置响应HTTP请求状态变化的函数

let xhr=new  XMLHttpRequest();

//收到响应后，xhr的部分属性会被填充赋值
xhr.onreadystatechange=function(){
	if(xhr.readyStatus==4){
		if(xhr.status>=200&&xhr.status<300||xhr.status==304){
			alert(xhr.responseText);
		}else{
			alert("Request failed ："+xhr.status）；
		}//不用this取代xhr,防止作用域问题
	}
};

xhr.open("get","./url",请求是否异步的布尔值）；//请求方法，不请求，只是做准备，只能访问同源URL
//修改添加 应在这时完成
xhr.send(请求体）；//无请求体，传入null

一般浏览器自己的默认HTTP消息头都会携带上去，此外
open()与send()函数之间开发者可以使用setRequestHeader（）发送自定义的头部

属性

1. responseText:作为响应体返回的文本
2. responseXML:当响应体是XML时
3. status:响应的HTTP状态
4. statusText:响应的HTTP状态描述
5. readyState:当前处在请求/