杂谈：前端Web通信

ideaa 发布于2019-08-05 14:33 / 2248人阅读

摘要：作为开发同学的小伙伴客户端的浏览器，有点小调皮还做了一个同源策略的限制，当我们的数据请求遇到不同源的情况下跨域，我们就得尝试其它的通信方法，不能一条道走到黑。

Web2.0以来，Ajax的出世，解决了传统表单提交页面跳转，闪烁白屏等问题。使得Web页面可以实现局部更新，不仅减少了网络带宽，还大大提升了用户体验。

但Ajax并非是一把万能的钥匙，足以打开Web通信这扇大门，当请求遇到跨域通信时，Ajax就没辙了。

Web的快速发展让开发走向工程化的同时，要求工作维度进行划分（前端后端分工明细），以便扩展维护日益复杂庞大的项目需求。而前后端分离的开发方式正是这种需求背景下衍生的产物。（以前混编的代码现在是再也不想看到）

前后端分离的开发方式，如何进行数据通信是开发人员绕不过去的问题。作为开发同学的小伙伴客户端的浏览器，有点小调皮还做了一个同源策略的限制，当我们的数据请求遇到不同源的情况下（跨域），我们就得尝试其它的通信方法，不能Ajax一条道走到黑。

什么是同源策略及限制

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

同源要求协议，域名，端口(默认80)三者都相同，否则为非同源。

同源策略限制：

Cookie， LocalStorage和IndexDB无法读取

Dom无法获取

Ajax请求不能发送

前后端如何通信

Ajax（仅支持同源）

WebSocket （不受同源限制）

CORS （都支持，新的W3C通信标准）

如何创建Ajax

XMLHttpRequest对象的工作流程

兼容性处理

事件的触发条件

事件的触发顺序

var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject("Microsoft")
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(/?$/g, "", true);
    xhr.send();
} 
if (type === "POST") {
    xhr.open(type, url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(data.join("&"));
}
xhr.onload = function() {
    if (xhr.status === 200 || xhr.status === 304) {
        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);
            }
        }
    }
}

同源下，我们可以直接使用Ajax来与后端同学做数据通信，但是遇到跨域请求时，我们就得更换手中这把Ajax的钥匙，来重新配钥匙开锁

跨域通信的几种方式

JSONP

Hash

postMessage (HTML5)

WebSocket

CORS (新的W3C通信标准)

1. JSONP

JSONP原理：客户端通过动态创建script标签异步加载来实现，服务端callback返回客户端定义的方法名，让客户端进行调用获取数据。

只支持Get请求 (GET与POST的区别这里暂不细讲)

// 客户端发送请求

2. Hash

Hash原理：通过window.onhashchange事件监听来获取url中hash值来实现数据传输。与Get一样，有Url长度限制

// A中代码
var B = document.getElementdByTagName("iframe");
B.src = B.src + "#" + "data";
// B中代码
window.onhashchange = function(){
    var data = window.location.hash;
}

3. postMessage

postMessage是HTML5的API，可参考开发文档window.postMessage

// A.com向B.com发送信息
Bwindow.postMessage("data","http://B.com")
// B中监听
window.addEventListener("message", function(event){
    console.log(event.origin); // http://A.com
    console.log(event.source); // Bwindow
    console.log(event.data); // data
}, false)

项目中应用场景：

页面和其打开的新窗口的数据传递

多窗口之间消息传递

页面与嵌套的iframe消息传递

上面三个问题的跨域数据传递

4. WebSocket

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，本身不受同源限制。

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

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

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

ws.onclose = function (evt) {
    console.log("Connection closed.");
}

5. CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

浏览器兼容在XHR(IE8/9)及XHR2(>=IE10)下需要做兼容处理。

// CORS代码示例
fetch("/url", {
    method: "get"，
}).then(function(res){
    ...
}).catch(function(err) {
    // 错误
})

-- End --

JSONP有更好的兼容性，能兼容低版本浏览器，但是基于Get传输数据，会因为浏览器Url长度限制而限制数据大小。CORS在不考虑低版本浏览器时，无疑是目前最好前后端通信方案（单向），双向选择WebSocket，而多个页面之间的数据通信，如内嵌iFrame等，则推荐postMessage。

每种方案有不同的应用场景，解决问题不只有一种解决方案，实际项目开发中，需根据实际需求来挑选最优的方案。

参考资料

html5 postMessage解决跨域、跨窗口消息传递

干货 | 前端常用的通信技术

阮一峰 — 跨域资源共享 CORS 详解

CORS正确使用姿势

作者：以乐之名
本文原创，有不当的地方欢迎指出。转载请指明出处。

专线服务超融合服务器杂谈前端web前端前端web前端课程 web前端前端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/58087.html

杂谈：前端Web通信

摘要：作为开发同学的小伙伴客户端的浏览器，有点小调皮还做了一个同源策略的限制，当我们的数据请求遇到不同源的情况下跨域，我们就得尝试其它的通信方法，不能一条道走到黑。 showImg(https://segmentfault.com/img/bVburZO?w=600&h=450); Web2.0以来，Ajax的出世，解决了传统表单提交页面跳转，闪烁白屏等问题。使得Web页面可以实现局部更新，...

Betta 2019-08-23 10:29 评论0 收藏0
[杂谈]了解一些额外知识，让前端开发锦上添花

摘要：对的请求，也是要有一个了解，比如协议，请求方式，请求过程，结果状态码等。教程协议详解经典面试题一个故事讲完响应状态码上面提到响应状态码，在这里也简单写下。劝了别人无数次，让别人喝了鸡汤，帮别人填坑，自己却掉了坑 1.前言在前端学习里面，很多人都是注重学习代码（html，css，js）。或者是一些框架，库（jquery，vue，react）,或者是各种工具（webpack，gulp）...

vvpvvp 2019-08-22 18:15 评论0 收藏0
[杂谈]了解一些额外知识，让前端开发锦上添花

摘要：对的请求，也是要有一个了解，比如协议，请求方式，请求过程，结果状态码等。教程协议详解经典面试题一个故事讲完响应状态码上面提到响应状态码，在这里也简单写下。劝了别人无数次，让别人喝了鸡汤，帮别人填坑，自己却掉了坑 1.前言在前端学习里面，很多人都是注重学习代码（html，css，js）。或者是一些框架，库（jquery，vue，react）,或者是各种工具（webpack，gulp）...

张率功 2019-08-02 10:45 评论0 收藏0
[杂谈]了解一些额外知识，让前端开发锦上添花

摘要：对的请求，也是要有一个了解，比如协议，请求方式，请求过程，结果状态码等。教程协议详解经典面试题一个故事讲完响应状态码上面提到响应状态码，在这里也简单写下。劝了别人无数次，让别人喝了鸡汤，帮别人填坑，自己却掉了坑 1.前言在前端学习里面，很多人都是注重学习代码（html，css，js）。或者是一些框架，库（jquery，vue，react）,或者是各种工具（webpack，gulp）...

zhichangterry 2019-08-30 15:53 评论0 收藏0
大前端公共知识杂谈

摘要：尽管面向对象编程也有着很多其他被人诟病的地方，但是在大型复杂业务逻辑的应用开发中我们还是会倾向使用面向对象编程的范式这就要求我们对于类与对象的基本语法有所掌握。大前端公共知识杂谈首发于InfoQ-架构师特刊：大前端，是笔者对于泛前端知识图谱（Web/iOS/Android/RN）的文字版介绍，夹杂了 GUI 应用程序架构的十年变迁：MVC、MVP、MVVM、Unidirection...

CODING 2019-06-25 11:22 评论0 收藏0