1. 什么是JSONP?
JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
2.为什么使用JSONP?
由于 JSON 只是一种含有简单括号结构的纯文本,因此许多通道都可以交换 JSON 消息。因为同源策略的限制,我们不能在与外部服务器进行通信的时候使用 XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法,即通过使用 JSON 与 < script> 标记相结合的方法,从服务端直接返回可执行的JavaScript函数调用或者JavaScript对象。
JSONP的安全问题:我们可以使用若干种方法在 JavaScript 程序中动态地生成代码。最著名的函数之一就是 eval() 函数,该函数允许您将任意字符串做为 JavaScript 代码执行。然而,肆无忌惮地使用该函数是非常危险的。遗憾的是,一些使用广泛的 JavaScript 库在内部直接使用 eval() 函数。由于 JSON 是以 JavaScript 的一个子集为基础的,所以脚本内容会潜在地包含恶意代码。然而,JSON 是JavaScript 的一个安全的子集,不含有赋值和调用。因此,许多 JavaScript 库使用 eval() 函数将 JSON 转换成 JavaScript 对象。要利用这点,攻击者可以向这些库发送畸形的 JSON 对象,这样 eval() 函数就会执行这些恶意代码。可以采取一些方法来保护 JSON 的使用。这里提供一种方法:使用
RFC 4627 中所定义的正则表达式确保 JSON 数据中不包含活动的部分。
下面演示了如何使用正则表达式检查 JSON 字符串:
var my_JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
text.replace(/"(\\.|[^"\\])*"/g, ''))) &&
eval('(' + text + ')');
其实 jsonp 是个很简单的一个东西。主要是利用了 <script/>标签对javascript文档的动态解析来实现。(其实也可以用eval函数)
< script type=" text/javascript" >
function jsonpCallback(result)
{
alert(result.msg);
}
< /script>
< script type=" text/javascript" src=" http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback" > < /script>
其中 jsonCallback 是客户端注册的,获取跨域服务器上的json数据后,回调的函数。
http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback
这个 url 是跨域服务器取 json 数据的接口,参数为回调函数的名字,返回的格式为:
jsonpCallback({ msg:'this is json data'} )
Jsonp原理:
首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 json 数据。然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的javascript文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)
分享到:
相关推荐
在JavaScript的世界里,由于同源策略的限制,浏览器禁止了不同源之间进行AJAX通信,但JSONP(JSON with Padding)作为一种巧妙的方式,允许我们绕过这个限制,实现在jQuery中进行跨域请求。本篇文章将深入探讨JSONP...
AJAX与JSONP跨域访问问题小结 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个页面的情况下,能够更新部分网页的技术。它通过使用XMLHttpRequest对象来与服务器进行异步通信。XMLHttpRequest对象...
JSONP(JSON with Padding)...总之,JSONP是jQuery中实现跨域访问的一种常见方法,尤其在不支持CORS的旧浏览器环境中非常有用。但随着技术的发展,CORS已成为更推荐的跨域解决方案,因为它提供了更多的控制和安全性。
服务器需要在响应头中添加`Access-Control-Allow-Origin`字段,允许特定的源进行跨域访问。客户端的AJAX请求设置`xhr.open('GET', url, true)`,然后发送请求。 2. **JSONP跨域**: JSONP的工作方式不同,它不依赖于...
本文将详细介绍JQuery、ajax以及jsonp跨域访问的知识。 首先,jQuery作为一个广泛使用的JavaScript库,其提供的ajax方法极大地简化了HTTP通信操作。然而,当尝试通过ajax访问不同域下的资源时,就会遇到跨域限制...
2. JSONP原理:JSONP的基本思想是,服务器提供一个可以接受参数的JavaScript函数名,客户端在请求时传递这个函数名,服务器返回一个调用该函数并带有JSON数据的脚本,`<script>`标签加载这个脚本,从而实现跨域数据...
跨域访问是Web开发中一个常见的挑战,尤其是在进行Ajax异步请求时,浏览器的同源策略(Same-origin policy)会限制JavaScript从一个源获取另一个源的数据。为了解决这个问题,开发者通常采用JSONP(JSON with ...
Ajax JSONP跨域处理是Web开发中的重要技术,通过JSONP,开发者可以在不违反同源策略的前提下实现跨域数据交互。虽然JSONP存在一些限制和安全隐患,但在许多场景下,它仍然是一个实用且有效的解决方案。随着技术的...
在标题"跨域访问禁止以及使用JSONP实现跨域的示例"中,我们将探讨如何应对这一挑战,特别是通过JSONP技术来突破限制。 首先,我们要理解什么是跨域。跨域是指一个域下的文档或脚本试图请求另一个域下的资源。比如,...
JSONP (JSON with Padding) 是一种跨域数据交互协议,它允许JavaScript从不同的域名获取数据,从而...然而,随着现代浏览器对CORS的支持,JSONP的使用正在逐渐减少,CORS提供了更安全且功能更强大的跨域数据访问方式。
JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`<script>`标签可以跨域请求资源的特性来实现JavaScript与服务器之间的通信。在JavaScript中,由于同源策略的限制,通常不能直接访问不同源的资源。但是...
你是否遇到了想利用AJAX访问一些公网API,但是你又不想建立自己的代理服务,因为有时我根本就没打算涉及服务端任何代码,但是讨厌的浏览器的同源策略,阻止了我们的ajax调用。 比如我想访问一个天气的restfull api,...
在 Web 开发中,由于浏览器的同源策略限制,JavaScript 无法直接跨域访问数据。为了解决这个问题,开发者常常使用 JSONP(JSON with Padding) 技术。ASP.NET 和 jQuery 结合使用 JSONP 可以实现跨域数据交互。本示例...
### 使用JSONP完成HTTP和HTTPS之间的跨域访问 在现代Web开发中,跨域问题是一项常见挑战,尤其是在涉及不同协议(如HTTP与HTTPS)的数据交互时。本文将深入探讨如何利用JSONP(JSON with Padding)技术来实现HTTP与...
接下来,我们来看如何编写一个简单的原生JavaScript AJAX库,支持JSONP跨域。以下是一个基本的实现框架: ```javascript function Ajax(options) { var script = document.createElement('script'); var ...