jsonp解决跨域实践

最新推荐文章于 2024-12-04 15:06:04 发布

凤凰谷1

最新推荐文章于 2024-12-04 15:06:04 发布

阅读量147

点赞数

分类专栏： js 跨域文章标签： jsonp js php

本文链接：https://blog.csdn.net/u011089760/article/details/93550458

版权

js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

跨域

4 篇文章 0 订阅

订阅专栏

Jsonp解决跨域核心原理解析：

动态加载服务端返回的js代码
执行服务端返回的可执行js代码
请求方式为get
使用script标签的src属性加载另一个域名的js资源

使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ，所以我们只能把参数通过 url的方式传递,所以jsonp的 type类型只能是get示例：

以下两个js脚本等价：

1.html_jsonp.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>ehz-app</title>
    <script type="text/javascript">
      function resolveJosn(result) { //浏览器端代码
          console.log(result.name);
      }
    </script>
    <script type="text/javascript" src="http://192.168.1.10/php_demo/php_jsonp.php?callback=resolveJosn"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

2.html_jsonp.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>ehz-app</title>
    <script type="text/javascript">
      function resolveJosn(result) { //浏览器端代码
          console.log(result.name);
      }
      var jsonpScript= document.createElement("script");
      jsonpScript.type = "text/javascript";
      jsonpScript.src = "http://192.168.1.10/php_demo/php_jsonp.php?callback=resolveJosn";
      document.getElementsByTagName("head")[0].appendChild(jsonpScript);
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

服务端php代码示例:

php_jsonp.php

<?php
    $callback = $_GET['callback'];  // 获取回调函数名
    $arr = array("name" => "alsy", "age" => "20"); // 要请求的数据
    echo $callback."(". json_encode($arr) .");"; // 输出
?>

执行效果图：