JSONP
Opened this issue · 0 comments
thyecust commented
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>