JSONP跨域

最新推荐文章于 2024-08-12 09:48:39 发布

敢问

最新推荐文章于 2024-08-12 09:48:39 发布

阅读量160

点赞数

分类专栏： AJAX 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_41040445/article/details/115123528

版权

AJAX 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

都知道 Ajax是不能跨域的利用JSONP来跨域

关于JSONP

小demo

<script src="demo.js"></script> →定义了sayHello方法
<script>
  sayHello()	→执行sayHello
</script>

在demo.js 文件中定义了sayHello方法，然后我们在html页面中是可以调用这个方法的

此时将调用和设置方法换了一个位置

<script>
  function sayHello(str){
    alert(str)
  }
</script>
<script src="test.js"></script> →调用文件

test.js

sayHello("你好")

页面中会弹出：“你好”

JSONP其实就是模仿这个方法将调用传入的数据，前端设置方法接收

.js

sayHello({
  "info": [
    {
      "id":10001,
      "name": "小明",
      "age": 18,
      "sex": "男"
    },
    {
      "id":10002,
      "name": "小兰",
      "age": 15,
      "sex": "男"
    },
    {
      "id":10003,
      "name": "小红",
      "age": 14,
      "sex": "男"
    }
  ]
})

.html

function sayHello(str){
  console.log(str)
}

如果使用JSONP跨域，一定和后端是约定俗称的数据格式,JSONP数据很不安全，除非你比较信任数据来源，如果涉及到涉密信息，一定不能使用JOSNP，比如数据中有用户的手机号，身份证号码等等；

京东商品的评价利用的就是jsonp格式

使用原生js是模拟发送JSONP请求

京东某商品的评价数据

"https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_comment98&productId=100014348492&score=0&sortType=5&page=0&pageSize=10&isShadowSku=0&rid=0&fold=1";

<body>
    <input type="button" id="btn" value="点我发送请求">
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            var oScript = document.createElement("script");
            document.body.appendChild(oScript);
            oScript.src =
                "https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_comment98&productId=100014348492&score=0&sortType=5&page=0&pageSize=10&isShadowSku=0&rid=0&fold=1";
            document.body.removeChild(oScript);
        }

        function fetchJSON_comment98(data) {
            console.log(data)
        }
    </script>
</body>

jQuery中的JSONP

<body>
    <input type="button" id="btn" value="点击发送请求">
    <script src="js/jquery.min.js"></script>
    <script>
        $("#btn").click(function () {
            $.ajax("https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_comment98&productId=100014348492&score=0&sortType=5&page=0&pageSize=10&isShadowSku=0&rid=0&fold=1", {
                "dataType": "jsonp",
                "jsonpCallback": "fetchJSON_comment98",
                "success": function (jsonDate) {
                    console.log(jsonDate);
                }
            })
        })
    </script>
</body>