都知道,解决跨域通信的常用的方式是通过jsonp实现。原理是 通过<script>标签可以获取任意服务器资源、不受同源策略限制的特性。
原生js实现jsonp:
let src = "https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312?callback=f";
function f(data) {
console.log(data);
}
function addScriptTag(src) {
let script = document.createElement('script');
script.src = src;
document.body.appendChild(script);
}
window.onload = function () {
addScriptTag(src);
};
报错 Uncaught SyntaxError: Unexpected token :
分析:
<script>加载的内容会被当作js代码执行,json格式的数据肯定会报错。
解决:
- 修改服务器端json数据,将json数据封装成函数,如:
callback({
"success": true,
"data": {
})
这样,返回的数据就可以直接调用。
注:回调函数的名字和服务器端函数的名字必须一致!!!
- 通过jQuery实现
$.ajax({
url: src,
dataType: "jsonp",
success: function (data) {
console.log(data);
}
})