Jsonp 方式跨域获取 json 数据原理
http://galaxystar.iteye.com/blog/169765
关键字: json javascript
一直没时间玩js，看到douban网的开放api后，查了些文档，了解了一下 jsonp 跨域请求方式.跟大家分享一下。
其实 jsonp 是个很简单的一个东西。
主要是利用了 <script/> 标签对 javascript 文档的动态解析来实现。（其实也可以用eval函数）
来个超简单的例子：
首先是准备客户端的代码，
Html代码
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" >
3. <head>
4. <title>Test Jsonp</title>
5. <script type="text/javascript">
6. function jsonpCallback(result)
7. {
8. alert(result.msg);
9. }
10. </script>
11. <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
12. </head>
13. <body>
14. </body>
15. </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Jsonp</title>
<script type="text/javascript">
function jsonpCallback(result)
{
alert(result.msg);
}
</script>
<script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
</head>
<body>
</body>
</html>
其中 jsonCallback 是客户端注册的，获取跨域服务器上的json数据后，回调的函数。
http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback
这个 url 是跨域服务器取 json 数据的接口，参数为回调函数的名字，返回的格式为
Js代码
1. jsonpCallback({msg:'this is json data'})
jsonpCallback({msg:'this is json data'})
Jsonp原理：
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）
分享到：
相关推荐
JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了`<script>`标签可以跨域请求资源的特性来实现数据的交换。在Web开发中，由于浏览器的同源策略限制，JavaScript通常无法直接访问不同源的资源，但JSONP...
但为了实现数据交互，开发者常使用JSONP（JSON with Padding）这一技术来规避同源策略，实现在客户端跨域获取JSON数据。本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求，以及如何在服务器端使用.Net...
2. **JSONP跨域**: JSONP的工作方式不同，它不依赖于XMLHttpRequest对象。首先，客户端在HTML页面中定义一个全局函数，如`handleData(data)`。然后，创建一个`<script>`标签，将`src`属性设置为服务器的URL，URL中...
JSONP是一种非标准的跨域方法，通过动态插入`<script>`标签，从服务器端获取JSON数据。服务器需要将数据包装在一个函数调用中，客户端定义该函数来接收数据。而CORS则是一种更为现代和安全的跨域方式，需要服务器端...
2. **JSONP（JSON with Padding）**：JSONP是早期解决跨域问题的一种方式，它利用了`<script>`标签可以跨域加载资源的特性。服务器返回的不再是JSON数据，而是包含一个JavaScript函数调用，函数名由客户端指定，参数...
JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了`<script>`标签可以跨域请求资源的特性，为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中，前端使用...
jQuery库提供了一个方便的方式来处理跨域请求，特别是对于获取JSON数据。在jQuery中，我们可以使用`$.ajax()`或`$.getJSON()`方法。当设置`dataType`为'jsonp'时，jQuery会自动处理JSONP请求。JSONP是一种绕过同源...
JsonP 的核心原理是：JavaScript 使用 Ajax 无法跨域调用数据（如 XML、JSON 等），但是可以跨域调用 JavaScript 数据。JsonP 的工作原理是通过动态添加一个 script 标签，src 属性指向请求的 URL，返回的数据是一个...
跨域_jsonp_原理，了解json的原理，等于我们掌握json的技术有帮助
1.3.3 jQuery-JSONP跨域 jQuery提供了JSONP的支持，通过$.ajax方法的dataType参数设置为"jsonp"，可以轻松发起JSONP请求。jQuery会自动生成一个唯一的回调函数名，并将其作为参数传递给服务器，服务器返回的数据应以...
在描述中提到的JSONP方式实现跨域访问示例，我们可以创建一个服务端接口，接收回调函数名作为参数，然后返回封装好的JSON数据。在客户端，我们需要定义这个回调函数并处理返回的数据。 总结起来，跨域访问是一个...
本文将详细介绍使用jQuery实现JSONP跨域获取数据的三种方法。 ### 第一种方法：$.ajax()函数 $.ajax()是jQuery中最为通用的Ajax实现方式。要使用JSONP方法，我们需要在$.ajax()函数中设置`dataType`为'jsonp'。...
本文将详细探讨JSONP的工作原理以及如何在实际项目中使用它来跨域获取JSON数据。 ### JSONP简介 JSONP全称为"JSON Padding"，它并不是JSON的一种新格式，而是一种利用动态创建`<script>`标签来绕过同源策略的技巧...
1、地址...演示跨域问题以及跨子域名解决方法 2、地址http://a.test.com:8888/testAjaxCross/public/jsonp.do 演示jsonp解决跨域问题的三种方案jsonp、$getJSON、$ajax等
- **JSON**是一种数据格式，用于描述和传输数据，而**JSONP**则是一种技术手段，用于解决跨域问题。 - **JSON**可以直接被JavaScript解析，而**JSONP**实际上是一个JavaScript函数调用。 - **JSON**主要用于同域内的...
**jQuery跨域获取JSON数据详解** 在Web开发中，由于浏览器的安全策略，JavaScript通常不能直接进行跨域请求，但jQuery提供了$.ajax和$.getJSON方法...只要正确配置服务端和客户端，就可以轻松实现跨域JSON数据的获取。
标题中的“利用jsonp解决js读取本地json跨域的问题”是指在JavaScript中，由于同源策略的限制，AJAX无法直接从本地文件系统获取JSON数据。然而，JSONP（JSON with Padding）是一种绕过同源策略的技术，尤其适用于GET...
JSONP（JSON with Padding）是一种解决跨域请求的方法，即在客户端通过 script 标签请求服务器端的数据，然后服务器端将数据以 JSON 格式返回，并在返回数据中包含一个回调函数，以便客户端可以将数据处理。...
Ajax的jsonp方式跨域获取数据的简单实例中，涉及到了Web开发中常见的跨域问题以及解决这一问题的方法之一——JSONP（JSON with Padding）。为了深入理解，让我们从以下几个方面探讨这些知识点： 1. 跨域问题 在Web...
Ajax JSONP跨域处理是Web开发中的重要技术，通过JSONP，开发者可以在不违反同源策略的前提下实现跨域数据交互。虽然JSONP存在一些限制和安全隐患，但在许多场景下，它仍然是一个实用且有效的解决方案。随着技术的...