Jsonp跨域处理-优快云博客

本文链接：https://blog.youkuaiyun.com/ajian11/article/details/82504563

本文详细介绍了JSONP跨域的基本原理，包括如何利用script标签的特性绕过同源策略限制，以及服务端如何配合返回可执行JavaScript代码。同时提供了jQuery中实现JSONP请求的具体方法，包括设置dataType为'jsonp'、使用$.getJSON方法及$.getScript方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JSONP跨域的原理在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

举个例子，假如需要从服务器（http://www.a.com/user?id=123）获取的数据如下：

{"id":123,"name":张三,"age":17}

那么，使用JSONP方式请求（http://www.a.com/user?id=123?callback=foo）的数据将会是

如下：

foo({"id":123,"name":张三,"age":17}); 当然，如果服务端考虑得更加充分，返回的数据可能如下： try{foo({"id":123,"name":张三,"age":17});}catch(e){}

这时候我们只要定义一个foo()函数，并动态地创建一个script标签，使其的src属性为http://www.a.com/user?id=123?callback=foo：

便可以使用foo函数来调用返回的数据了。

在jQuery中如何通过JSONP来跨域获取数据

第一种方法是在ajax函数中设置dataType为'jsonp'： $.ajax({

dataType(参考下载：http://www.gpskld.com):'jsonp', url:'http://www.a.com/user?id=123', success:function(data){ //处理data数据 } });

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可： $.getJSON('http://www.a.com/user?id=123&callback=?',function(data){ //处理data数据 });

也可以简单地使用getScript方法： //此时也可以在函数外定义foo方法 functionfoo(data){ //处理data数据 }

$.getJSON('http://www.a.com/user?id=123&callback=foo');

客户端JQuery.ajax的调用代码示例：

查看源码
打印?

    01$.ajax({

    02    type : "get",

    03    async:false,

    04    url : "http://www.xxx.com/ajax.do",

    05    dataType : "jsonp",

    06    jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数

    07    jsonpCallback:"success_jsonpCallback",//callback的function名称

    08    success : function(json){

    09        alert(json);

    10        alert(json[0].name);

    11    },

    12    error:function(){

    13        alert('fail');

    14    }

    15});

服务端返回数据的示例代码：

    1public void ProcessRequest (HttpContext context) {

    2    context.Response.ContentType = "text/plain";

    3    String callbackFunName = context.Request["callbackparam"];

    4    context.Response.Write(callbackFunName + "([ { name:\"John\"}])");

    5}