Jsonp如何实现跨域详解

JSONP原理

JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了。

JSONP(JSON with Padding)是json的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

使用:

1. 客户端调用提供JSONP支持的URL Service,获取JSONP格式数据。

比如客户想访问http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction

假设客户期望返回JSON数据:["customername1","customername2"]

那么真正返回到客户端的Script Tags: callbackFunction(["customername1","customername2"])

可能的调用方式:

2.在客户端写callbackfunction函数的实现

3.页面展示

4.最终page code

体现:jquery下jsoncallback=?,其中“?”会自动替代function(data)函数。

2.$.ajax

如何在服务器端实现对JSONP支持

这仅仅需要把服务的JSON数据转换成想要的script tags的形式就可以了,格式可以自已定义,毕竟这是个非官方的协议。

可参考:Implement JSONP in your Asp.net Application

注:Callback仅仅是JSONP的简单实现,可以根据具体需要实现更复杂的功能,比如可以在客户端动态集成更多的变量数据来完成分页功能。

return request.getParameter("jsoncallback")+"("+JsonString+")";

返回内容像:jsonp1382016430883([{"id":1,"title":"XXXX"},{"id":2,"title":"YYYYY"}])

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

例子:如在当前网址ip1向ip2中提交get请求,我们可以将以下代码放在ip1中:

Var elescript=document.createElement(“script”);

elescript.type=”text/javascript”;

elescript.src=”ip2“;

document.Getelementsbytagname(“head”)[0].appendchild(elescript);

再如:var qsData = {‘searchWord‘:$("#searchWord").attr("value"),‘currentUserId‘:

$("#currentUserId").attr("value"),‘conditionBean.pageSize‘:$("#pageSize").attr("value")};

$.ajax({

async:false,

url: http://跨域的dns/document!searchJSONResult.action,

type: "GET",

dataType: ‘jsonp‘,

jsonp: ‘jsoncallback‘,

data: qsData,

timeout: 5000,

beforeSend: function(){

//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了

},

success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数

if(json.actionErrors.length!=0){

alert(json.actionErrors);

}

genDynamicContent(qsData,type,json);

},

complete: function(XMLHttpRequest, textStatus){

$.unblockUI({ fadeOut: 10 });

},

error: function(xhr){

//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了

//请求出错处理

alert("请求出错(请检查相关度网络状况.)");

}

});

有时也会

$.getJSON("http://dns/document!searchJSONResult.action?name1="+value1+"&jsoncallback=?",

function(json){

if(json.属性名==值){

// 执行代码

}

});

在响应端(http://跨域的dns/document!searchJSONResult.action),通过 jsoncallback = request.getParameter("jsoncallback") 得到jquery端随后要回调的js function name:jsonp1236827957501 然后 response的内容为一个Script Tags:"jsonp1236827957501("+按请求参数生成的json数组+")"; jquery就会通过回调方法动态加载调用这个js tag:jsonp1236827957501(json数组); 这样就达到了跨域数据交换的目的。

时间: 2024-08-06 12:39:10

Jsonp如何实现跨域详解的相关文章

跨域详解 been blocked by CORS policy: No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource

跨域问题的原因:浏览器出于安全考虑,限制访问本站点以为的资源. 比如你有一个 网站 127.0.0.1:8080/ , 并且上面挂了一个页面 ,那么在这个页面中 ,你只访问 本站点的 资源不会受到限制,但是你如果访问其他站点,比如  127.0.0.1:8081 的资源就会受到限制. 备注:暂且把  协议,域名,端口都一样的叫做同一个站点. 但是  带有 src 属性的标签可以没有这个 限制,比如 img ,script  等等. 在说说历史,以前的程序前后端不分离, 页面 和 请求接口,在同一

JavaScript中的跨域详解(内附源码)

什么是跨域? 什么是跨域? 所谓跨域,就是如果在不同的域名下面存在数据交互,这个时候就会存在跨域的问题,这里要说明的是在同一个网站不同的文件夹下的数据交互是不存在跨域问题的. 哪些情况下存在跨域问题? 主域和子域之间会存在跨域问题(比如 www.a.com 和 www.a.b.com). 不同的域名存在跨域问题,哪怕这两个域名指向的是同一个ip地址. 为什么 ajax 不可以跨域? 因为 ajax 是通过 XMLHttpRequest 这个对象来进行数据之间的交互的,而 XMLHttpReque

js&amp;jquery跨域详解jsonp,jquery并发大量请求丢失回调bug

URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名,不同端口 不允许 http://www.a.com/a.js https://www.a.com/b.js 同一域名,不

跨域详解及其常见的解决方式

跨域是什么 跨域是一个域下的网页去请求另一个域下的资源.严格点来说就是两个域的协议.域名.端口任何一个不同时,都会被当作跨域.当跨域访问资源时,会受到浏览器的安全限制,详细的情况可以看下表: URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名 允许 http://www.a.com/a/a.js http://www.a.com/b/b.js 同一域名,不同文件夹 允许 http://www.a.com:3000/a.js

CORS跨域详解

废话少数,直接上代码!!!!!!!!!! html: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>      <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"

Js跨域详解

感谢园子离的Rain Man这哥们,资料非常详细: 详情参见:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m0 我摘出来一部分自己收藏: -------------------------------------------------------------------------------------------------- 什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.

跨域详解

什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子: http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域) http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)

vue-cli3设置代理跨域详解

老规矩,先上代码 // 在根目录下自行创建vue.config.js module.exports = { // cli3 代理是从指定的target后面开始匹配的,不是任意位置:配置pathRewrite可以做替换 devServer: { port: '8080', open: true, proxy: { '/api': { // /api 的意义在于,声明axios中url已/api开头的请求都适用于该规则, // 注意是以/api开头,即:axios.post({url: '/api/

ajax 和jsonp 不是一码事 细读详解

由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneGap支持,后者要求用户设备必须支持WebSocket,因此都不能算是ST2的原生解决方案,原生的只有AJAX. 说到AJAX就会不可避免的面临两个问题,第一