JSONP 原理

Posted web前端开发技术

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JSONP 原理相关的知识,希望对你有一定的参考价值。

HTML 中 script 标签可以加载其他域下的js,比如我们经常引入一个其他域下线上cdn的jQuery。那如何利用这个特性实现从其他域下获取数据呢?

可以先这样试试:

<script src="http://api.jirengu.com/weather.php"></script>

这时候会向天气接口发送请求获取数据,获取数据后做为 js 来执行。 但这里有个问题, 数据是 JSON 格式的数据,直接作为 JS 运行的话我如何去得到这个数据来操作呢?

这样试试:

<script src="http://api.jirengu.com/weather.php?callback=showData"></script>

这个请求到达后端后,后端会去解析callback这个参数获取到字符串showData,在发送数据做如下处理:

之前后端返回数据: {"city": "hangzhou", "weather": "晴天"}

现在后端返回数据: showData({"city": "hangzhou", "weather": "晴天"})

前端script标签在加载数据后会把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做为 js 来执行,这实际上就是调用showData这个函数,同时参数是 {“city”: “hangzhou”, “weather”: “晴天”}。

用户只需要在加载提前在页面定义好showData这个全局函数,在函数内部处理参数即可

以上是关于JSONP 原理的主要内容,如果未能解决你的问题,请参考以下文章

JSONP原理

jsonp的工作原理,观后必然懂!!!

JSONP跨域的原理解析

前端跨域之Jsonp实现原理及.Net下Jsonp的实现

转JSONP跨域的原理解析

剖析JSONP原理的小例子