前端中的通信（一）

什么是同源策略及限制

• 源：协议(http/https/ws)+域名(www.baidu.com)+端口(80)，不一样就是跨域了。
• 同源策略：限制两个不同的源之间的资源交互，是用于隔离潜在恶意文件的安全机制。
• 限制：
  – cookie、localStorage、indexDB无法读取
  – DOM无法获得
  – Ajax请求不能发送

前后端如何通信

• Ajax
• websocket
• CORS

如何创建Ajax

• 创建ajax对象(兼容处理)
• open()
• send()
• onreadystatechange
• readyState
• status
• JSON.parse(xhr.responseText)

function ajax(){
    var xhr = null;
    try{
        xhr = new XMLHttpRequest();
    } catch(e){
        xhr = new aActiveXObject('Microsoft.XMLHTTP');
    }

    xhr.open('get','getNews.php',true);
    xhr.send();

    /*
    xhr.open('post','1.post.php',true);
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
    xhr.send('username=刘&age=3');
    */

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if( xhr.status ==200 || xhr.status ==304  ){
                //alert( xhr.responseText );//string
                var data = JSON.parse(xhr.responseText);
            }else{
                alert( '出错了，Err:' + xhr.status );
            }

        }
    };
};

跨域通信的几种方式

• jsonp :动态添加<script>标签，执行服务器返回的函数
• hash :hash改变页面不会刷新，改变hash后，监听hash变化，获取数据
• postMessage :

window.postMessage('data','http://a.com')
window.addEventListener('message',(event)=>{
   console.log(event.origin,event.source,event.data) 
},false)

• websocket :

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};  
--------------------------------------------------
> Connection open ...
> Received Message: Hello WebSockets!
> Connection closed.

• CORS(Cross-Origin Resource Sharing, 跨源资源共享) : 浏览器会拦截ajax请求，如果是跨域的，会在http请求中添加origin

fetch("/a/url",{
    method:'get',
}).then(
    function(response){
        if(response.status!==200){
            console.log("存在一个问题，状态码为："+response.status);
            return;
        }
        //检查响应文本
        response.json().then(function(data){
            console.log(data);
        });
    }
).catch(function(err){
    console.log("Fetch错误:"+err);
});

个人链接

• github：https://github.com/webxing
• 简书：https://www.jianshu.com/u/489662a091fd