通信类

最新推荐文章于 2024-01-17 20:27:30 发布

WWWln1234

最新推荐文章于 2024-01-17 20:27:30 发布

阅读量159

点赞数

分类专栏：通信类文章标签：通信类

本文链接：https://blog.csdn.net/sinat_32308611/article/details/89669180

版权

通信类专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.什么是同源策略及限制

源：协议 + 域名 + 端口

同源策略：限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互；

这是一个用于隔离潜在恶意文件的关键的安全机制

cookie、localStorage、sessionStorage和indexDB无法读取
DOM无法获得
Ajax请求不能发送

2.前端后如何通信

Ajax：同源下的通信方式
WebSocket：不受同源策略的影响
CORS：支持跨域和同源通信

3.如何创建Ajax

//1.创建一个XMLHttpRequest对象
var xhr = XMLHttpRequest?new XMLHttpRequest():new window.Activexobject("Microsoft.XMLHTTP");//ie下的处理

var dataArr = [];
for(var key in data){
    dataArr.push(`key=${data[key]}`);
}

//xhr.onload = function(){
xhr.onreadystatechange = function(){
    if(xhr.readystate === 4){
        //200表示成功、304表示有缓存、206媒体资源中的一部分
        if(xhr.status === 200 || xhr.statux === 304 || xhr.statux === 206){
            //获得数据
            console.log(JSON.parse(xhr.responseText));
        }else{
            console.log("error.")
        }
    }
}

//发送get请求
if(method.toUpperCase === "GET"){
    url+ = "?"+dataArr.join("&");
    //open
    xhr.open("GET",url.replace(/\?$/,""),false);
    //发送
    xhr.send();
}


if(method.toUppperCase === "POST"){
    //open
    xhr.open("POST",url,false);

    //发送请求
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send(dataArr.join("&"));
}

4.跨域请求的几种方式

1.JSONP

src与href的区别：

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。

src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。

<script src =”js.js”></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加 <link href="common.css" rel="stylesheet"/> 那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

JSONP原理：
利用script标签可以跨域请求其他资源，并且可以接受到服务端返回的数据

<html>
    <body>
    <script>
        window.callback = function(data){
            //接收服务端传递过来的数据
            console.log(JSON.parse(data));
        }
    </script>
    <script async charset="utf-8" src="www.abc.com/request?name=zhangsan&callback=callback"></script>
    <!--服务端会返回给callback(data),callback(data)会放在上述的script标签中，并自动执行-->
    <script>
        //方式二：动态创建script标签
        var script = document.createElement("script);
        script.src = "www.abc.com/request?name=zhangsan&callback=callback";
        script.charset = "utf-8";
        script.type  = "text/javascript";
        script.async = true

        //
        script.onload = script.onreadystatechange = function(){
            if(!script.reaystate || /loaded|complete/.test(script.readystate)){
                script.onload = script.onreadystatechange = null;
                if(script.parentNode){
                    //移除script标签
                    script.parentNode.removeChild(script);
                }
                window.callback = null;
            }
        }
        script.onerror = function(){
            console.log("error.")
        }
        
        //添加到body中
        document.body.appendChild(script);
    </script>
    </body>
</html>

2.Hash

url地址中#后面的就叫hash，hash的变动，页面是不会刷新的

url地址中？后面的search，search的改变会刷新页面的，所以search不能做跨域请求

利用hash，场景是当前页面A通过iframe或frame嵌入了跨域的页面B

//页面A的伪代码

var iframe = document.getElementById("iframe");

iframe.src = B.src +"#name=zhangsan&age=20"


//页面B的伪代码

window.onhashchange = function(){
    //拿到hash中的数据 window.location.hash
    var data = window.location.hash;
}

3.postMessage

HTML5引入的message的API可以更方便、有效、安全的解决跨文本档、多窗口、跨域消息传递。

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

postMessage(data,origin)方法接受两个参数

1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。

2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

//窗口A（http://A.com）向跨域的窗口B（http://B.com）发送信息

var iframe = document.getElementById("iframe");

//第一个参数：数据，第二个参数：接收方的源，可以为具体的源也可以为*
iframe.postMessage(JOSN.stringify({name:"zhangsan"}),"http://B.com");



//窗口B接受信息

//监听message方法，event对象参数中有origin、source、data数据
window.addEventListener("message",function(e){
    //发送者的源:http://A.com
    console.log(e.origin);
    //发送消息的窗口对象：窗口A
    console.log(e.source);
    //发送的信息{name:"zhangsan"}
    console.log(e.data);
},false)

4.WebSocket

HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。

这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。大多数 Web 应用程序将通过频繁的异步JavaScript和XML（AJAX）请求实现长轮询。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。

因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。WebSocket 连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接，就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

WebSocket 如何工作？

Web浏览器和服务器都必须实现 WebSockets 协议来建立和维护连接。由于 WebSockets 连接长期存在，与典型的HTTP连接不同，对服务器有重要的影响。

基于多线程或多进程的服务器无法适用于 WebSockets，因为它旨在打开连接，尽可能快地处理请求，然后关闭连接。任何实际的 WebSockets 服务器端实现都需要一个异步服务器。

其他特点包括：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

websocket客户端

在客户端，没有必要为 WebSockets 使用 JavaScript 库。实现 WebSockets 的 Web 浏览器将通过 WebSockets 对象公开所有必需的客户端功能（主要指支持 Html5 的浏览器）。

websocket服务端

5.CORS

支持跨域通信的Ajax，用该技术后：浏览器在识别用ajax发送的跨域请求中会在http请求头中加一个origin允许跨域通信

//url必须，options可选
fetch("/some/url",{
    method:"get",
}).then(function(response){
    //成功
}).catch(function(err){
    //出错了，等价于then的第二个参数，但这样更好用更直观
})
# 至于跨域请求的配置，转：阮一峰老师的博客

WWWln1234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通信类

1.什么是同源策略及限制源：协议 + 域名 + 端口同源策略：限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互；这是一个用于隔离潜在恶意文件的关键的安全机制cookie、localStorage、sessionStorage和indexDB无法读取 DOM无法获得 Ajax请求不能发送2.前端后如何通信Ajax：同源下的通信方式 WebSocket：不受同源...
复制链接

扫一扫

专栏目录