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"
})
浏览器显示: