什么是JSONP
JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用 html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。
对于上面的解释,我们可以简单这样理解:JSONP就是可以通过JavaScript文件进行跨域通讯的方式,例如:现在各大网站风靡的搜索提示,搜狗云输入法
注意:JSONP服务器端代码需要充分做好安全措施。
最简单的JSONP
var JSONP = document.createElement("script") ;
//FF:onload IE:onreadystatechange
JSONP.onload = JSONP.onreadystatechange = function(){
//onreadystatechange,仅IE
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
alert($("#demo").html());
JSONP.onload = JSONP.onreadystatechange = null//请内存,防止IE memory leaks
}
}
JSONP.type = "text/javascript";
JSONP.src = "http://a.pojaaimg.cn/2010/js/jquery.js";
//在head之后添加js文件
document.getElementsByTagName("head")[0].appendChild(JSONP);
简单解释:我们通过创建script,然后指定它的src等属性,然后插入到head执行
建议:onload、onreadystatechange 写在src赋值之前,防止载入js太快而没有给onload、onreadystatechange 赋值(Image对象在IE下具有此类现象)
JSONP实例
我们可以首先定义一个函数来执行JSONP返回的数据,然后通过JSONP的src传此函数给后台,进行处理,返回可执行的函数。例如下面代码:
function jsonpHandle(a){
alert(a);
}
var JSONP = document.createElement("script") ;
JSONP.type = "text/javascript";
JSONP.src = "http://www.js8.in/jsonp.php?callback=jsonpHandle";
//在head之后添加js文件
document.getElementsByTagName("head")[0].appendChild(JSONP);
后台jsonp.php的代码:
echo $_GET["callback"]."('hello,world')";
分享到:
相关推荐
这个和安全机制有关,默认不允许跨域调用 处理手段:使用jsonp格式, ajax请求参数dataType:’JSONP’。 代码如下: $.ajax({ url: “http://…….”, type: ‘GET’, dataType: ‘JSONP’,//here success:...
本文将深入探讨如何“完美解决iframe跨域问题”,并介绍其底层的`window.name`转换代理实现。 **一、iframe跨域的基本概念** 1. **什么是iframe**:iframe是一种HTML元素,允许在单个网页中嵌入另一个网页。它通过...
文章总结了个人在项目中尝试解决JSONP跨域POST请求问题的过程,最终发现JSONP由于其设计的限制,无法完美支持POST请求。作者建议可以继续研究这一领域,但同时指出现有的解决方案在效率上并不理想。 通过这篇文章,...
JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了HTML中`<script>`标签可以跨域加载JavaScript资源的特性,来绕过浏览器的同源策略限制,从而实现Ajax跨域请求。同源策略是浏览器为了保障安全,限制...
本文将重点讨论如何通过面向对象编程(Object-Oriented Programming, OOP)来实现脚本跨域,同时参考百度和腾讯的API实现方式。面向对象编程是程序设计的一种结构化方法,它将数据和操作数据的方法封装在一起,形成...
Extjs 原始的treeloader无法通过跨域读取jsonp数据,非常恼人,查了网上一些资料后自己写了一个。能够实现跨域的jsonp读取加载节点。没有太多时间调试,可能不完美。
Tomcat可以通过配置`web.xml`文件,添加过滤器来实现CORS支持: ```xml <filter-name>CorsFilter <filter-class>org.apache.catalina.filters.CorsFilter <param-name>cors.allowed.origins * <!-- 更多...
JSONP(JSON with Padding)是一种通过动态创建标签实现跨域请求的方法。由于标签不受同源策略限制,因此可以跨域加载JS文件。JSONP的基本思想是在客户端定义一个回调函数,然后将这个函数名作为URL参数传递给服务端...
JSONP通过在返回的JSON数据前加上一个自定义的回调函数名,使得前端可以解析并执行这个函数,从而实现数据的传递。 **2. 后台Java代码实现** 在Java后台,我们需要接收前端传递的回调函数名,并在返回JSON数据时,...
公司要做一个活动页面,在其过程... JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问; 实现方式 1) [removed] $.ajax({
ajax请求报parsererror错误是很宽泛的概念,很多情况下都报这个错, 在很多时候,即使ajax提交、返回都正常 XMLHttpRequest.status=200 (正常响应) XMLHttpRequest.readyState=4 (正常接收) ajax也会提示一个parse...
文章中提到的jQuery.getScript方法是一个简单的例子,展示了如何使用jQuery的getScript方法来实现JSONP跨域请求。在使用时,jQuery会自动为请求的URL添加一个随机的查询参数,比如`_=***`,这是为了避免浏览器缓存...
在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,...无论是使用代理、JSONP、CORS,还是其他技术,关键是理解浏览器的同源策略,并学会利用这些机制来实现安全、有效的跨域数据交换。
1.jsonp跨域方法:jsonp跨域方法提供一个script标签,请求页面中的数据,同时传入一个回调函数的名字。服务器端得到名字后,拼接函数执行格式的字符串。发送回浏览器。script在下载代码以后并执行,执行的就是这个...
然而,为了实现跨域数据交换,开发者们发展出了两种常见方法:JSONP(JSON with Padding)和CORS(Cross-Origin Resource Sharing,跨域资源共享)。下面我们将深入探讨这两种技术的原理及其应用。 ### JSONP原理 ...