摘要：同源策略在中有一个很重要的安全性限制，被称为同源策略。然而，当进行一些比较深入的前端编程的时候，不可避免地需要进行跨域操作，这时候同源策略就显得过于苛刻。
JSONP原理 JSON和JSONP
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧，不是很清楚的朋友可以去json.org上了解下，简单易懂。
JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Scripttags返回至客户端，通过javascriptcallback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
JSONP就像是JSON+Padding一样(Padding这里我们理解为填充)，我们先看下面的小例子然后再详细介绍。
同源策略在JavaScript中,有一个很重要的安全性限制，被称为“Same-OriginPolicy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。
根据这个策略，在baidu.com下的页面中包含的JavaScript代码，不能访问在google.com域名下的页面内容；甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。对于Ajax的影响在于，通过XMLHttpRequest实现的Ajax请求，不能向不同的域提交请求，例如，在abc.example.com下的页面，不能向def.example.com提交Ajax请求，等等。然而，当进行一些比较深入的前端编程的时候，不可避免地需要进行跨域操作，这时候“同源策略”就显得过于苛刻。
然而html中有一些元素是不存在跨域问题的如:script,iframe等元素,利用这些元素,就能很好的解决这个问题.
JSONP的实现方式利用在页面中创建
//通过加载example2的JS文件来达到函数调用和数据传递
example2.com的test.js内容如下 以上这种方法只是一个简单实现原因的例子,现实中我们的数据和回调也不会都写死在JS中的,所以我们要想办法将这些静态的东西动态生成就可以了.只要将example1.com srcipt 地址改为一个能动态生成JS调用方法的服务地址即可.如: test.do Controller直接返回如下 例子如下:当然对 假若要实现一个需求,某个网站a.com上显示的客户信息来自于其它网站b.com,显然通过AJAX请求去取数据是不能做到的,因为存在同源策略. A网站的前台实现: B网站的后台实现: JSONP的优点是： 它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。 JSONP的缺点则是： 它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。 没有关于 JSONP调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。 从JQery 1.2以后，就开始支持JSONP的调用。JQuery对前台做了很好的处理如自动生成全局回调函数等,但后台还需要开发人员自己实现. 请求URL 请求URL http://xxx.com/rest.do?c=test&_=1393510789026 当dataType为JSONP时,JQUERY会为用户生成一个全局函数名称为jsonpCallback参数的值,这个函数内部调用了success方法JQUERY的实现原理及步骤 以GET方式请求目标地址,并在URL中拼接以jsonp参数值为key,以jsonpCallback值为value的参数 请求返回回调函数数据 触发调用全局的回调函数,在全局函数回调中调用success方法并将数据传递给success方法//回调函数
callback({name:"张三"});
callback(数据库客户信息的JSON对象);
createScript("http://B.com/search.do?&callback=displayCustomer");
@Controller
public classJsonpRest {
@RequestMapping(value = "/test.do",method = RequestMethod.GET)
public @ResponseBody Stringlist(HttpServletRequest request) {
returnrequest.getParameter("callback")+"({name:"张三",age:18})";
}
}
$.getJSON("http://跨域的dns/xxx.do?callback=?",function(json){
// 业务逻辑执行代码
});
http://xxx.com/rest.do?callba..._1332575486681&_=1393510789026
$.ajax({
url:"http://xxx.com/rest.do",
dataType:"jsonp", //必须指定
jsonp : "c", //若不指定则默认为callback
jsonpCallback:"test",//若不指定则Jquery自己生成随机的名称
success:function(data){
//业务逻辑执行代码
}
});
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96388.html
摘要：上节我们讲了同源策略，这节我们讲讲如何跨域。当这些从的脚本执行出错，因为违背了同源策略为了保证用户信息不被泄露，错误信息不会显示出来，取而代之只会返回一个。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每...
摘要：同源策略限制了我们无法通过原生的对象获取到数据。的原理其实不复杂浏览器的同源策略把跨域请求都禁止了的标签是例外，可以突破同源策略从其他来源获取数据由上可得，我们可以通过标签引入文件，然后通过一系列操作获取数据。上面三点便是实现跨域的原理。 今天做页面时，后台给了个接口：https://a.a.com/a/a.json,我页面的上线地址是：http://b.b.com。显而易见，因为浏览...
摘要：前提是的方法名与引入的文件方法名一致。简单描述就是先定义一个方法，然后引入外部调用这个方法并携带数据。 JSONP 被用于跨域获取数据。在讲解它之前，先讲讲它与 JSON 之间的区别 什么是JSON？ JSON 是一种基于文本的数据交换方式，或者叫做数据描述格式。 其优点是： 1、基于纯文本，跨平台传递极其简单； 2、Javascript 原生支持，后台语言几乎全部支持； 3、轻量级数...
摘要：，跨站脚本攻击。实际发的请求就是，用于表示这是一个请求。，用于告知服务器根据这个参数获取回调函数的名称，通常约定就叫。，回调函数的名称，也是前面参数的值，可省略，会自动生成。 本次课程主要围绕 PHP 面试和笔试中经常会出现的一些知识点，但是面试官会在笔试题基础上深入扩展，那么你知道如何更好的回答让面试官满意吗？题目收集自腾讯，迅雷，美图等公司的笔试面试题，以及本人面试经历中印象中的知...
阅读 2796·2023-04-26 03:01
阅读 3284·2023-04-25 19:54
阅读 1373·2021-11-24 09:39
阅读 1101·2021-11-19 09:40
阅读 2967·2021-10-14 09:43
阅读 1801·2019-08-30 15:56
阅读 1378·2019-08-30 13:52
阅读 1548·2019-08-29 13:05
