前端的，通信类和安全类在招唤你，快来吧！

最新推荐文章于 2025-09-09 16:55:30 发布

weixin_33842328

最新推荐文章于 2025-09-09 16:55:30 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

文章标签：前端网络 json ViewUI

原文链接：https://juejin.im/post/5b1cb7cd6fb9a01e5b10fab3

本文详细介绍了同源策略的概念及其限制，并探讨了多种跨域通信的方式，包括JSONP、Hash、postMessage等技术。此外，还讲解了如何通过Ajax实现前后端通信。

通信类

什么是同源策略及限制
前后端如何通信
如何创建Ajax
跨域通信的几种方式

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

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

Cookie、LocalStorage 和 IndexDB无法读取
DOM 无法获得
AJAX请求不能发送

2. 前后端如何通信

Ajax
WebSocket
CORS

3. 如何创建Ajax

XMLHttpRequest 对象的工作流程
兼容性处理
事件的触发条件
事件的触发顺序

<script>
  var xmlhttp;

  function createXMLHttpRequest(){
    xmlhttp=null;

    if (window.XMLHttpRequest){
      xmlhttp=new xmlHttpRequest(); //Netscape浏览器中的创建方式
    }else if(window.ActiveXObject){
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器的创建方式
    }

    //异步调用服务器段数据
    if(xmlhttp!=null){
      xmlhttp.open("GET/POST",url,true);  //创建HTTP请求
      xmlhttp.onreadystatechange=httpStateChange;//设置HTTP请求状态变化的函数
      xmlhttp.send(null);  //发送请求
    }else{
      alert("不支持XHR")
    }
  }

   //响应HTTP请求状态变化的函数
  function httpStateChange(){//判断异步调用是否完成
    if(xmlhttp.readyState==4){//readyState==4表示后台处理完成了
      if(xmlhttp.status==200||(xmlhttp.status==0){//状态码为0是本地响应成果，200表示处理的结果是ok的
      //判断异步调用是否成功,如果成功开始局部更新数据
        //code...
      }else{
        alert("出错状态码："+xmlhttp.status+"出错信息："+xmlhttp.statusText);
      }
    }
  }
</script>
复制代码

4. 跨域通信的几种方式

JSONP
Hash
postMessage
WebSocket
CORS

JSONP原理

ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

JSONP 具体实现

<script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            type : "get",
            async: false,
            url : "http://www.practice-zhao.com/student.php?id=1",
            type: "json",
            success : function(data) {
                jsonhandle(data);
            }

        });
    });
</script>
复制代码

Hash的实现

a.html 和 c.html我们放在php的wamp中运行

他们的地址为：http://localhost/a.html和http://localhost/c.html

b.html 的代码，我放在lamport.me/b.html中
复制代码

Hash原理

a.html中有一个隐藏的frame,该frame指向异域lamport.me的b.html，且传递hash值给b.html
b.html获取hash值，生成data值，然后动态创建iframe，该iframe将data值传给与a.html同域的c.html。
因为c.html与a.html同域，可以传值。

postMessage

postMessage是html5引入的API可以更方便、有效、安全的解决这些问题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，someWindow.postMessage()方法只会在someWindow所在的源(url的protocol, host, port)和指定源一致时才会成功触发message event，当然如果愿意也可以将参数设置为"*"，someWindow可以在任意源，如果要指定和当前窗口同源的话设置为"/"。