原生ajax & 跨域问题

前言

其实一直对原生ajax和跨域的问题似懂非懂，理解的程度也不是很全面，所以打算整理一下知识点，现在一般交互使用现成的插件，也就是调用封装好的api实现交互，出现的问题对应也有解决的方式,，解决跨域问题也是只知道没有出现跨域问题，如何解决的了解的也不是很透彻，虽然现在可能有些方式用的不是很多了，但是了解清楚还是很重要的

原生ajax讲解 

ajax即"Asynchronous Javascript And XML"(异步的JavaScript和XML)

ajax的核心是XMLHTTPRequest对象(XHR)

先创建一个xhr对象

function createXHR(){
　　let xhr
　　if(window.XMLHttpRequest){
　　　　xhr = new XMLHttpRequest()
　　}else if(window.ActiveXObject){
　　　　xhr = new ActiveXObject("Microsoft.XMLHTTP")
　　}
　　return xhr
}

XMLHttpRequest 1级

xhr对象的主要方法

void open(String method,String url,Boolean async)

method:请求方式

url:请求地址

async:是否异步，默认为true

username:可选参数，如果服务器需要验证，该参数指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。

password:可选参数，验证信息中的密码部分，如果用户名为空则改制将被忽略。

 

void send(String body)

body:要发送的数据

 

void setRequestHeader(String header,String value)

header:请求头的key

value:请求头的value

 

String getAllResponseHeaders()

获得所有响应头，返回值：响应头数据

 

String getResponseHeader(String header)

获取响应头中指定header的值

 

void abort()

终止请求

xhr对象的主要属性

Number readyState 状态值，可以确定请求/响应过程的当前活动阶段

0：未初始化。未调用send()方法。

1：启动。已经调用open()方法，但尚未调用send()方法。

2：发送。已经调用send()方法，但尚未接收到响应。

3：接收。已经接收到部分响应数据。

4：完成。已经接收到全部的响应数据，而且可以在客户端使用了。

 

Function onreadystatechange 当readyState的值改变时自动触发执行其相应的(回调)函数。

String responseText 作为相应主体被返回的文本

XMLDocument responseXML 服务器返回的数据

Number status 状态码（200/304）

String statusText 状态文本（OK）

只要readyState属相的值由一个值变为另一个值，都会触发一次readystatechange事件。也就是说可以用xhr对象监听readystatechange事件，从而在其回调函数中进行逻辑操作。

xhr.onreadystatechange = function(){
　　if(xhr.readyState == 4){
　　　　if(xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304){
　　　　　　alert(xhr.responseText)
　　　　}else{
　　　　　　alert(xhr.status)
　　　　}
　　}
}

XMLHttpRequest 2级

FormData为序列化表单以及创建与表单格式相同的数据（用于通过xhr传输）提供了遍历。

let formdata = new FormData()
formdata.get(key)
formdata.getAll(key)
formdata.append(key,value)
formdata.set(key,value)
formdata.has(key)
formdata.delete(key)
formdata.entries()
formdata.keys()
formdata.values()

超时设定：xhr对象添加了timeout属性，表示请求在等待多少毫秒之后就终止。还可以监听timeout事件。(前提是请求超时终止)

xhr.timeout = 1000
xhr.ontimeout = function (){
 
}

overrideMimeType()方法，用于重写xhr响应的MIME类型。比如：服务器返回的MIME类型时text/plain，但是数据中实际包含的是XML。根据MIME类型，即使数据时XML，responseXML属性中仍然是null。通过此方法可以保证响应当做XML而非纯文本处理。

 进度事件

loadstart：在接收到响应数据的第一个字节时触发。

progress：在接收响应期间持续不间断触发。

error：在请求发生错误时触发。

abort：在因为调用abort()方法而终止连接时触发。

load：在接收到完整的响应数据时触发。

loadend：在通信完成或者触发error、abort、或load事件后触发。

实现一个进度指示器

xhr添加了progress事件，这个事件会在浏览器接收新数据期间周期性触发。而onprogress事件处理程序会接收到一个event对象，其target属性是xhr对象，但包含着三个额外属性：lengthComputable、position和totalSize。其中lengthComputable是一个表示进度信息是否可用的布尔值，position表示已经接收的字节数，totalSize表示根据Content-Length响应头部确定的预期字节数。

跨域问题

同源策略：同源策略/SOP(Same Origin Policy)是一种约定，它是浏览器最核心最基础的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。

跨域：当协议、域名、端口号有一个或多个不同时，又希望可以访问并获取数据的现象称为跨域访问。

误区：同源策略限制下，访问不到后台服务器的数据，或访问到后台服务器的数据没有返回

正确：同源策略限制下，可以访问到后台服务器的数据，后台服务器会正常返回数据，只是被浏览器拦截了。

实现跨域的方式：写几种常见的方式

jsonp

只能发送get请求，不支持post、put、delete

不安全，很容易受到XSS攻击

function cbFn(data){
　　alert(data.name + data.age)
}

let script = document.createElement('script')
script.src = 'http://www.zjy.com?callback=cbFn'
document.body.appendChild(script)

//请求'http://www.zjy.com?callback=cbFn，后端返回的应该是这样的数据格式"cbFn({name:'zhangsan',age:18})"

使用CORS跨域：个人理解就是后端解决，也不用前端操心

跨源资源共享/CORS(Cross-Origin Resource Sharing)

基本思想：使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应应该成功还是失败。

设置哪个源可以访问，也可以设置 固定源，参数为 * 时，允许任何人访问，但是不可以和 cookie 凭证的响应头共同使用

"Access-Control-Allow-Origin": *

 

想要获取 ajax 的头信息，需设置响应头

"Access-Control-Allow-Headers":"key"

 

处理复杂请求的头

"Access-Control-Allow-Methods": "PUT"

允许发送 cookie 凭证的响应头

"Access-Control-Allow-Credentials": true

允许前端获取哪个头信息

"Access-Control-Expose-Headers": "key"

处理 OPTIONS 预检的存活时间，单位 s

"Access-Control-Max-Age": 10

使用postMessage实现跨域

postMessage是H5的新的API，跨文档消息传送(cross-document messaging)，简称为XMD。指的是来自不同域的页面见传递消息。

 

调用方式

window.postMessage(message,targetOrigin)

message：发送的数据

targetOrigin：发送的窗口的域

在对应的页面中用message事件接收，事件对象中有data、origin、source三个重要信息。

data：接收到的数据

origin：接收到数据源的域（数据来自哪个域）

source：接收到数据源的窗口对象（数据来自哪个窗口对象）

使用WebSocket实现跨域：WebSocket没有跨域限制

怎么使用去看WebSocket就可以了不过多说明了

或是我上面写的实现WebSocket心跳，基本上也用到几乎所有WebSocket中的API。

WebSocket的API比较简单，用法也相对简单

vue框架开发出现的跨域问题:这种方式应该是目前开发应用到最多的地方

可以在vue-cli脚手架config/index.js里面配置proxyTable，使用proxy代理。

其实这个配置项可以好好研究一下，一般开发的时候也不会注意到，里面还有哪些配置项，具体查一下用法就可以了

proxyTable:{
    '/api':{ //根据这个字段去匹配
         target:"http://www.zjy.com", //替换成的地址
         changeOrigin:true, //是否跨域
         pathRewrite:{ //重写路径
            "/api":""
         }
    }
}    

还有window.name、location.hash与iframe结合解决跨域问题