- 读自：http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/ 以及 jq的帮助文档
- 具体用户大全，请移步：http://justcoding.iteye.com/blog/1366102
- 模仿jsonp: http://www.biuman.com/2013/01/jsonp-example-html/
-
如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。
注意，JSONP是JSON格式的扩展。他要求一些服务器端的代码来检测并处理查询字符串参数。更多信息可以参阅 最初的文章。
如果指定了script或者jsonp类型，那么当从服务器接收到数据时，实际上是用了<script>标签而不是XMLHttpRequest对象。这种情况下，$.ajax()不再返回一个XMLHttpRequest对象，并且也不会传递事件处理函数，比如beforeSend。
-
上一个小的案例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %> <html> <head> <title>JSONP调用</title> <script type="text/javascript" src="/js/jquery-1.8.3.js" ></script> <script type="text/javascript"> function search() { $("#images").html(""); var _content = document.getElementById("J-input").value; var _zhang = $("#J-zhang").val()==""?3:$("#J-zhang").val(); console.info("_zhang="+_zhang); /** * 构建JSONP去从flickr上面搜索图片 */ $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags="+_content+"&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ console.info(item.media.m); $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == (_zhang-1) ) return false; }); }); } </script> </head> <body> <h1>关于JSONP的简单调用DEMO</h1> <hr> 关键字: <input type="text" id="J-input" value="科比" /> 显示几张: <input type="text" id="J-zhang" value="4" /> <input onclick="search();" type="button" value="search" /> <div id="images"></div> </body> </html>
hebad90
- 浏览: 68947 次
- 性别:
- 来自: 杭州
-
相关推荐
总结，JSONP是一种简单且广泛使用的跨域解决方案，尤其适用于那些不支持CORS的旧版本浏览器。然而，考虑到安全性和灵活性，CORS在现代Web开发中已成为更推荐的选择。理解JSONP的工作原理和使用方法对于任何Web开发者...
JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了`<script>`标签可以跨域请求资源的特性来实现浏览器与服务器之间的通信。在jQuery中，JSONP是一个非常实用的功能，尤其对于那些需要从不同源获取数据的...
标题“jsonpDemo:jsonp解决浏览器跨域问题--样例工程代码”表明这是一个关于JSONP的示例项目，可能包含了一个演示如何使用JSONP进行跨域数据请求的工程代码。在这个项目中，我们可能可以看到服务器端如何生成合适的...
5. **fetch-jsonp的介绍**：fetch-jsonp是针对fetch API的JSONP实现，用于解决跨域问题。它允许你向其他域发送GET请求，并接收JSON数据。 6. **fetch-jsonp的使用**： - **安装**：同样通过npm或yarn安装，`npm ...
### 跨域请求资源——JSONP与CORS的区别 #### 一、跨域的基本概念 在Web开发中，“跨域”是指从一个域名发起请求到另一个域名。这主要是因为浏览器出于安全考虑实施了**同源策略**（Same-Origin Policy）。同源...
在Web开发中，由于浏览器的同源策略限制，JavaScript无法直接发起对不同源（协议、域名或端口）的HTTP请求。然而，Ajax技术在实现动态...然而，对于兼容老版本浏览器或者简单的跨域需求，JSONP仍然是一种有效的选择。
在Web开发中，跨域（Cross-Origin）是一个常见的问题，由于浏览器的安全策略限制，JavaScript通常不能直接访问不同源（协议+域名+端口）的资源。然而，为了实现某些功能，比如用户登录、数据获取等，我们需要打破这...
"chrome 浏览器跨域插件下载"这个主题正是针对这一问题，提供了能够帮助开发者解决跨域问题的工具。 Moesif Origin .crx 是一个Chrome浏览器的扩展插件，它主要用于调试和分析API请求，尤其是处理跨域问题时非常...
`jquery-jsonp-master.zip`这个压缩包文件包含了一个专门用于jQuery的JSONP插件，旨在简化和优化JSONP请求的过程。通过这个插件，开发者能够更方便地在他们的应用中集成跨域数据请求，从而获取远程服务器上的JSON...
2. JSONP原理：JSONP的基本思想是，服务器提供一个可以接受参数的JavaScript函数名，客户端在请求时传递这个函数名，服务器返回一个调用该函数并带有JSON数据的脚本，`<script>`标签加载这个脚本，从而实现跨域数据...
JSONP（JSON with Padding）是一种常见的解决浏览器同源策略限制的跨域数据交互方式，尤其在JavaScript中广泛使用。在本项目"JSONP跨域实现百度搜索功能(v1.0.0)"中，我们将深入探讨如何利用JSONP技术来实现在网页上...
在JavaScript的世界里，由于同源策略的限制，浏览器禁止了不同源之间进行AJAX通信，但JSONP（JSON with Padding）作为一种巧妙的方式，允许我们绕过这个限制，实现在jQuery中进行跨域请求。本篇文章将深入探讨JSONP...
**Ajax JSONP 跨域处理详解** 在Web开发中，由于浏览器的安全策略限制，JavaScript通常不能直接访问不同源（协议、域名或端口不同）的资源，这就是所谓的“同源策略”。然而，随着Web应用的发展，跨域数据交互的...
跨域限制是浏览器为了安全原因而设置的一种机制，防止恶意网站通过脚本访问其他站点的数据。本文将深入探讨两种主要的跨域解决方案：CORS（Cross-Origin Resource Sharing）和JSONP（JSON with Padding）。 ### ...
- **跨域限制**：浏览器的安全策略之一，限制了从一个源加载的脚本获取或设置另一个源上的资源的能力。这一策略通常被称为同源策略。 - **HTTP与HTTPS**：分别代表超文本传输协议和超文本传输安全协议，HTTPS是在...
浏览器跨域问题是一个常见的Web开发中的挑战，尤其在进行AJAX请求时，它涉及到Web应用的安全性和通信限制。跨域是由于浏览器实施的同源策略（Same-origin Policy），这是一种安全机制，防止恶意网站通过JavaScript...
JSONP（JSON with Padding）和AJAX是两种常见的在JavaScript中实现跨域数据请求的技术。在Web开发中，由于浏览器的同源策略限制，JavaScript不能直接向其他域名发送请求，但JSONP和AJAX通过特定的方式绕过了这个限制...
总结来说，JSONP是一种适用于简单跨域请求的解决方案，尤其在不支持CORS的旧版本浏览器中，它是实现跨域通信的重要手段。然而，随着CORS的普及，JSONP的使用逐渐减少，但在某些场景下仍然具有其独特的价值。理解和...
JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了`<script>`标签可以跨域请求资源的特性，为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中，前端使用...
在这个"跨域jsonp资料包.zip"中，我们可以深入探讨JSONP的工作原理、应用场景、优缺点以及相关的实现方法。 ### JSONP 的工作原理 1. **同源策略**：浏览器的同源策略限制了JavaScript只能访问与当前页面同源...