Ajax、JSONP、CORS

版权声明：内容多为自言自语，请自行判断有无价值。 https://blog.csdn.net/weixin_41702247/article/details/83660524

背景知识：

 Http的8种请求类型：

HEAD、GET、POST、OPTION、PUT、DELETE、TRACE、CONNECT

一、常规Ajax

    <script>
        function loadXMLDoc(){
            var xhr;
            if (window.XMLHttpRequest){
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xhr=new XMLHttpRequest();
            }else{
                // IE6, IE5 浏览器执行代码
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }

            xhr.onreadystatechange=function(){
                if (xhr.readyState==4 && xhr.status==200){
                    document.getElementById("myDiv").innerHTML=xhr.responseText;
                }
            }
            xhr.open("GET","相对路径",true);
            xhr.send();
        }
    </script>

 二、浏览器跨域发送请求

 产生跨域的原因：浏览器为保护用户数据安全而采取的同源策略（请求方与被请求方，只要协议、域名、端口不一致则报错）

解决办法：

1. 通过cmd禁用浏览器同源策略，实用性不高，不可能每个人都特地设置浏览器再发请求 
2. Flash插件发送请求，依赖Flash，基本被放弃
3. 同源域名下搭建代理服务器转发请求，因为服务器 不受同源策略限制，但需额外开发服务器端（反向代理）

４.JSONP

1. 使用绝对路径
2. 兼容性好，但只能发送GET请求，且需要服务端配合；
3. 通过动态添加script标签，并加入一个callback回调函数，获取到的数据被当作参数传入回调函数；

５.CORS（验证请求类型采取不同方式）

var url = '绝对路径';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('自定义头信息', 'value');
xhr.send();

1. 是一个W３C标准，允许浏览器跨域发送请求，需要浏览器和服务器同时支持，其代码与AJAX完全一致；
2. 一旦浏览器发现发出的请求是跨域的，就会附加头信息，如果是非简单请求还会附加一次预检请求，因此关键在服务器
3. 默认不发送cookie和HTTP认证信息，除非客户端在Ajax请求中设置withCredentials和服务端Access-Control-Allow-Credentials都为true

简单请求的标准：

1. 请求方法：GET、POST、HEAD
2. ＨTTP头信息字段：Accept、Accept-Language、ContentType-Language、Last-Event-ID、Content-Type

实现方式：

1. 简单请求：浏览器在请求头中添加origin字段，如果返回头中Access-Control-Allow-Origin字段中包含请求地址或是通配符＊，则同意请求，同时会在返回头中添加Access-Control相关字段
2. 非简单请求：会增加一次HTTP查询请求（OPTION），如果origin在服务端允许的范围内才会正式发送Ajax请求

参考：http://www.ruanyifeng.com/blog/2016/04/cors.html

https://segmentfault.com/a/1190000012469713