JS如何实现浏览器通信

本文主要和大家分享JS如何实现浏览器通信，主要以代码形式，希望能帮助到大家。

同源策略及限制

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。（三相同：协议http/https，域名和端口）

• Cookie/LocalStorage和IndexDB无法读取

• DOM无法获得

• Ajax请求不能发发送

前后端如何通信

• Ajax：同源下通信方式

• WebSocket：不限制同源策略

• CORS：支持跨域通信，也支持同源通信

如何创建Ajax

• XMLHttpRequest对象的工作流程

• 兼容性处理

• 事件的触发条件

• 事件的触发顺序

var xht = XMLHttpRequest ? new XMLHttpRequest():new window.ActiveXObject('Microsoft.XMLHTTP');var data = opt.data,
    url = opt.url,
    type=opt.type.toUpperCase(),
    dataArr=[];for(var k in data){
    dataArr.push(k+'='+data[k]);
}if(type === 'GET'){
    url = url + '?' + dataArr.join("&");
    xhr.open(type, url.replace(/\?s/g,''), true);
    xhr.send();
}if(type === 'POST'){
    xhr.open(type, url, true);
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xhr.send(dataArr.join('&'));
}
xhr.onload = function(){
    if(xhr.status === 200 || xhr.status === 304){ //媒体资源需要206
        var res;        if(opt.success && opt.success instanceof Function){
            res = xhr.responseText;            if(typeof res === 'string'){
                res = JSON.parse(res);
                opt.success.call(xhr, res);
            }
        }
    }else{        if(opt.error && opt.error instanceof Function){
            opt.error.call(xhr, res);
        }
    }
}

跨域通信的几种方式

Hash详解：

// 利用Hash，场景是当前页面A通过iframe或者frame嵌入了跨域页面B//A中伪代码如下：var B = document.getElelementByTagName('iframe');
B.src = B.src + '//m.sbmmt.com/m/faq/#' + 'data';// B中伪代码window.onhashchange = function(){
    var data = window.location.hash;
}

postMessage

// 窗口A(http://A.com)向跨域的窗口B(http://B.com)发送信息window.postMessage(data, "http://B.com");()//在窗口监听window.addEventListener('message', function(event){
    console.log(event.origin)//http://A.com
    console.log(event.source)//引用A window
    console.log(event.data) //数据}, false)

WebSocket

var ws = new WebSocket('wss://a.com');
//ws 类似http为非加密，wss类似https为加密
ws.onopen = function(){}//打开链接
ws.onmessage = function(){}//收到消息
ws.onclose = function(){}//关闭连接

CORS

//使用 fetch 的构造函数请求数据后，返回一个 Promise 对象，处理即可。
//Fetch 常见坑
//Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'})
//服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
 fetch("/some/url", {
    method:'get
 '}).then(function(response){
    }).catch(function(err){
  })

以上就是JS如何实现浏览器通信的详细内容，更多请关注php中文网其它相关文章！