JSONP

[thyecust]

JSONP 是一种可以跨域请求数据的解决方案。

首先，我们知道，浏览器是有跨域限制的，但是 <script src='...'> 等标签不受这个限制。

所以我们自然想到

remote.com/server:

-> "alert('hello');"

jsonp.html:

<script src='remote.com/server'></script>

这样就调用了远程的函数。

我们还可以传入参数，比如

remote.com/server:

grade = {'Alice' : 87, 'Bob' : 92}
name -> "alert('{name}, hello. Your grade is {grade[name]}."

jsonp.html:

<script src='remote.com/server?name=Bob'></script>

我们还可以传入回调函数名，比如

remote.com/server:

grade = {'Alice' : 87, 'Bob' : 92}
callback, name -> 
"{callback}({"
"'name': {name},"
"'grade': {grade[name]}"
"});"

jsonp.html:

<script>
var gradeHandler = function(data) {
    alert('你查询的学生是' + data.name + '，成绩是' + data.grade + '。');
};
var url = 'remote.com/server?name=Bob&callback=gradeHandler';
var script = document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);
</script>