JSONP：
JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，是应用JSON的新方法，其利用%20%20

%20

请求端和服务端共同约定使用自定义函数，而不是内置函数；例如b.com/jsonptest.php：

 echo 'handlerJSONP({"name":"王唯","age":18})';  

请求端实现handlerJSONP()函数，并使用 %20%20

%20

b.com/jsonptest.php：

 header('Content-type: application/json');
//获取回调函数名
$callback = htmlspecialchars($_REQUEST['callback']);
//json数据
$json_data = '["王唯","静静","娟子","大国"]';
//输出jsonp格式的数据
echo $callback . "(" . $json_data . ")";  

JSONP是通过动态

JSONP的不足：

• 首先，JSONP是从其他域中加载代码执行，如果其他域不安全，很可能会在响应中夹带一些恶意代码；因此在使用不是你自己运维的Web服务时，一定得保证它安全可靠；
• 其次，只能进行GET请求；
• 最后，要确定JSONP请求是否失败比较麻烦，虽然HTML5给

  b.com/ message.html：

   
  b.com/message.html
    

  语法：otherWindow.postMessage(message, targetOrigin, [transfer]);

  • otherWindow为其他窗口的一个引用；
  • message参数：将要发送到其他window的数据；它将会被结构化克隆算法序列化，即可以不受限制的将数据对象安全的传送给目标窗口而无需自己序列化；
  • targetOrigin：通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串”*”（表示无限制）或者一个URI；
  • transfer参数：可选，是一串和message同时传递的Transferable对象，这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权；

  例如：a.com/post.html：

   // ...
  win.postMessage("来自a.com/post.html的消息","*");
  b.com/message.html：
  window.addEventListener("message", function(event){
  console.log(event); // MessageEvent
  });  

  需要延迟执行postMessage()方法，延迟的方式有多种，使用setTimeout()、iframe的onload事件、发送者的onload事件或者使用按钮的click事件处理程序，如a.com/post.html：

   setTimeout(function(){
  win.postMessage("来自a.com/post.html的消息","*");
  },500);
  // 或：
  var iframe = document.getElementsByTagName("iframe")[0];
  iframe.onload = function() {
  var iframe = document.getElementById("iframe");
  var win = iframe.contentWindow;
  win.postMessage("来自a.com/post.html的消息","*");
  }
  // 或：
  var btnSend = document.getElementById("btnSend");
  btnSend.addEventListener("click", function(){
  var iframe = document.getElementsByTagName("iframe")[0];
  var win = iframe.contentWindow;
  win.postMessage("来自a.com/post.html的消息","*");
  });  

  使用postMessage()将数据发送到其他窗口时，最好指定明确的targetOrigin，而不是*，原因是恶意网站可以在用户不知情的情况下更改窗口的位置，甚至可以拦截所发送的数据；

   win.postMessage("来自a.com/post.html的消息","#34;); // 或
  win.postMessage("来自a.com/post.html的消息","#34;); // 或
  win.postMessage("来自a.com/post.html的消息","#34;);  

  在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送；这个机制用来控制消息可以发送到哪些窗口。

  MessageEvent接口：
  代表一段被目标对象接收的消息；
  属性：

  • data属性：其保存着由发送者发送的字符串数据；
  • lastEventId属性：表示事件的唯一ID；
  • origin属性：返回一个表示消息发送者来源；
  • ports属性：MessagePort对象数组，表示消息正通过特定通道（数据通道）发送的相关端口；
  • source属性：是一个MessageEventSource对象，代表消息发送者；

   window.addEventListener("message", function(event){
  console.log(event);
  console.log(event.data); // 来自a.com/post.html的消息
  console.log(event.lastEventId); // 空
  console.log(event.origin); // 
  console.log(event.ports); // []
  console.log(event.source); // window 
  });  

  如果不希望接收message，就不要实现message事件；如果希望从其他网站接收message，最好使用origin或source属性验证消息发送者的身份；如：

   window.addEventListener("message", function(event){
  if(event.origin != "#34;)
  return;
  console.log(event.data);
  });  

  虽然postMessage()是单向的通信，但可以使用source属性在具有不同origin的两个窗口之间建立双向通信；
  例如a.com/message.html：

   
  
  
  是否确认保存？
  
  
  
  
    

  https://www.zhihuclub.com/console.html：

   
  控制台
    

  https://www.zhihuclub.com/content.html：

   
  
  设置1：
  设置2：
  设置3：
  设置4：
  
  
    

  示例，修改信息：

   https://www.zhihuclub.com/content.html：
  
  用户信息
  ID：001
  姓名：王唯
   
  单位：零点网络
  
  地址：
  电话：
  
  
    

  editInfo.html：

   
  
  
  姓名：
  性别：男
  女
  年龄：
  
  
  
    

  editInfo.php：

   query($sql);
  $row = mysqli_fetch_array($result);
  echo json_encode($row);
  }elseif($_REQUEST['action'] == 'update'){
  $ID = intval($_POST['ID']);
  $username = $_POST['username'];
  $sex = $_POST['sex'];
  $age = $_POST['age'];
  $sql = "update users set username='$username', sex='$sex', age='$age' where ID=$ID";
  $result = $conn->query($sql);
  if($result){
  echo '{"status": 1}';
  }else{
  echo '{"status": 0}';
  }
  }  

  超链接打开的窗口也可使用postMessage()方法进行通信，但需要设置a标签的target属性为自定义值，如：

   
  零点程序员
  b.com/https://www.zhihuclub.com/content.html：
  console.log(window.opener); // Window or global
  console.log(window.name); // "mywin"  

  发送消息，b.com/https://www.zhihuclub.com/content.html：

   if(window.opener){
  console.log(window.opener);
  window.opener.postMessage("我已经打开了","*");
  }  

  主页面：

   window.addEventListener("message", function(event){
  console.log(event.data);
  });