跨域技术JSONP

关注

原创最新推荐文章于 2026-03-27 03:23:40 发布 516 阅读 AI 写同款· GEO 优化 ›

掌握JSONP技术实现跨域请求在Web开发中，跨域请求是一个经常需要面对的问题。尽管现代的CORS（跨源资源共享）技术已经成为主流解决方案，但在一些旧的环境或特定的情况下，JSONP（JSON with Padding）跨域请求技术仍然有着其独特的应用场景。本章节我们将深入探讨JSONP的核心机制——全局回调函数，解析其定义、使用以及在实现跨域请求中所起的关键作用。全局回调函数是在JSONP请求中用来处理从另一个域返回的数据的关键机制。由于JSONP本质上是通过<script> 阅读详情

JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，是应用JSON的一种新方法，在后来的Web服务中非常流行。JSONP看起来与JSON差不多，只不过是被包含在函数中调用的JSON

如下：

callback({"name":"Nicholas"});

JSONP组成

JSONP由两部分组成：回调函数和数据

回调函数

当响应到来时在页面中调用的函数，回调函数的名字一般是在请求中指定的

数据

数据就是传入回调函数中的JSON数据

典型的JSONP请求如下所示：

http://freegeoip.net/json/?callback=handleResponse

这个URL是在请求一个JSONP地理定位服务。通过查询字符串来指定JSONP服务的回调参数是很常见的，像上面的URL所示，指定的回调函数的名字叫做handleResponse()

实现原理

JSONP是通过动态<script>元素来使用的，首先为src属性指定一个跨域URL。这里的<script>元素和<img>,都有能力不受限制地从其他域加载资源。

总结：但凡具有src或者href类似可以引用外部资源的属性的标签都可以实现跨域

因为JSONP是有效的javascript的代码，所以请求完成后，即再JSONP响应加载到页面中以后，就会立即执行。

function handleResponse(response){
    alert("You are at IP address" +response.ip+",whitch is in"+response.city +","+response.region_name);
    }
    var script = document.createElement("script");
    script.src = "http://freegeoip.net/json/?callback=handleResponse";
    document.body.insertBefore(script,document.body.firstChild);