JSONP跨域

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/FLQ77/article/details/79948031

JSONP和JSON看起来差不多,只不过是被包含在函数调用中的JSON,就像下面一样。

callback({"age":15,"name":"Jack"})

JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般在请求中指定。而数据就是传如回调函数的中的JSON数据。
JSONP是通过动态添加<script>元素来使用的,使用时可以为src属性指定一个跨域URL。下面就是一个常见的请求:

https://flq77.github.io/jsonp.json?callback=handleJsonp

下面来看一个例子:

//回调函数
function handleJsonp(response) {
    alert("age:"+response.age+"name:"+response.name);
}
//动态创建一个<script>元素
function creatScript() {
      let script = document.createElement("script");
      script.src="https://flq77.github.io/jsonp.json?callback=handleJsonp";
    document.body.appendChild(script);
}

跨域文件flq77.github.io/jsonp.json中:

handleJsonp({
    "age":15,
    "name":"Jack"
})

浏览器显示:
这里写图片描述

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页