1.JSONP

JSONP是一种数据调用方式，是解决跨域交互的方法。网页通过在script标签里添加元素，向服务器请求数据，这种做法不受同源政策的限制，服务器收到请求后，把数据放在一个指定的回调数中返回。

1.定义出来函数的appendHtml
        function appendHtml(news){
            var html = ''
            for(var i = 0;i<news.length;i++){
                html +='<li>' +news[i]+'</li>'
            }
            console.log(html)
            $('.news')innerHtml = html
        }
        2.创建script标签，src地址执行后端端口，地址的末尾加个参数callback = appendHtml
            $(".change").addEventListener("click",function(){
            var script=document.createElement("script")
            script.src='http://localhost:8080/getNews?callback=appendHtml'
            document.head.appendChild("script")
            document.head.removeChild("script")
            })
         3.服务器在收到请求后，解析参数，计算返回数据，输出appendHtml(data)字符串

         var www = req.query.callback
         if(www){
             res.send(www + '(' +JSON.stringify(data)+')')
         }else{
             res.send(data)
         }
         4.appendHtml(data)会放在script标签里面当做js来执行，同时调用appendHtml()函数。将data作为参数。

2. CORS

cross origin resource sharing 跨域资源共享。这是W3C的标准，是跨域请求的根本解决方法。相比JSONP只能发get请求，CORS允许发任何类型的请求。对于开发者来说CORS 通信与同源的ajax通信没有差别，代码完全一样。浏览器一旦发现ajax请求是跨源的，会自动在头部添加origin标签，用户无需单独做操作。

工作流程：

当使用XMLHttpRequest发送请求时，浏览器会检测到不符合同源策略，于是会加一个请求头origin。
后台确认符合策略时，会在返回的数据里添加一个响应头access-control-allow-origin。
浏览器判断该响应头中是否有origin值，如果有则接收数据。如果没有，则直接驳回。我们无法拿到数据。

$('.change').addEventListener('click', function () {
        var xhr = new XMLHttpRequest()
        xhr.open('get', 'http://b.jrg.com:8080/getNews', true);
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                appendHtml(JSON.parse(xhr.responseText))
            }
        };
        window.xhr = xhr
    });

如果有则浏览器会处理响应，我们就可以拿到响应数据，
    res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080")
    //res.header("Access-Control-Allow-Origin", "*")

3.降域

如果在域名a.jrg.com通过js操作b.jrg.com将会报错：浏览器阻止访问不同源的iframe
<iframe src="http://b.jrg.com:8080/b.html" frameborder="0" ></iframe>
通过修改document.domain来跨域操纵页面上的iframe，这样就能达到我们的目标，让他们实现跨域交互
document.domain = "jrg.com"

4.Post Message

降域实现跨域通信时要求两个域属于同一个父级域名。而post message没有这个限制。
一个页面向另一个页面发送postmessage消息，如果接收方愿意接收的话(通过message语句监听)，那么就实现了通信。
主页面a.html向ifame页面b.html加入postMessage信息

    $('.main input').addEventListener('input', function(){
        console.log(this.value);
        window.frames[0].postMessage(this.value, '*');
    });
        $('.main input').value = e.data;
        console.log(e.data);
    });

iframe页面b.html向父页面a.htm加入postmessage信息

    $('#input').addEventListener('input', function(){
        window.parent.postMessage(this.value, '*');
    });
    window.addEventListener('message',function(e) {
        $('#input').value = e.data;
        console.log(e.data);
    });

2019-11-07