js部分
(function(window, document) {
'use strict';
var jsonp = function(url, data, callback) {
//1、挂载回调函数
var fnsuffix = Math.random().toString().replace('.', '');
var cbFuncName = 'my_json_cb' + fnsuffix;
window[cbFuncName] = callback;
//2、将data转换成url字符串的形式
//{id=1,count=
JSONP（JSON with Padding）是一种常见的跨域数据交互协议，主要应用于JavaScript中，用来解决同源策略限制下浏览器无法直接发起跨域HTTP请求的问题。在本文中，我们将深入理解JSONP的工作原理，并通过实例来演示如何使用JSONP来获取跨域数据。
1. 同源策略：同源策略是浏览器为了安全考虑而设置的一项机制，它限制了脚本只能访问与当前页面具有相同协议（如HTTP或HTTPS）、主机名和端口的资源。这一策略使得跨域请求变得困难，但JSONP提供了一种绕过这一限制的方式。
2. JSONP的核心思想：JSONP利用的是浏览器允许`<script>`标签可以从不同源加载 JavaScript 代码的特性。因为`<script>`标签不受同源策略的约束，所以可以通过动态创建`<script>`标签并设置其`src`属性为跨域服务器返回的JavaScript代码的URL，从而实现数据的传递。
3. 实现步骤：
- **挂载回调函数**：在JavaScript中，我们首先定义一个全局函数作为回调函数，这个函数用于处理服务器返回的数据。例如，`var cbFuncName = 'my_json_cb' + fnsuffix;`创建了一个随机命名的函数名，并将其赋值给全局变量。
- **构建查询参数**：将需要传递的数据转换为URL查询字符串，如`id=1&count=4`，并添加回调函数名作为参数，如`callback=my_json_cb1234`。
- **创建`<script>`标签**：动态创建一个`<script>`元素，设置其`src`属性为包含回调函数名的完整URL，这样当浏览器加载这个URL时，服务器将返回一个包裹着数据的JavaScript函数调用，形如`my_json_cb1234({/*data*/})`。
- **插入到文档**：将`<script>`标签添加到HTML文档中，浏览器开始执行返回的JavaScript，从而调用我们之前定义的全局回调函数，并传入数据。
4. 示例代码分析：
- `jsonp`函数接收三个参数：`url`（目标服务器地址）、`data`（要传递的数据）和`callback`（处理数据的回调函数）。
- 在页面中，我们调用`$jsonp`（已将`jsonp`函数挂载到全局`window`对象上）来获取数据，传入豆瓣电影API的URL、空数据对象和一个处理数据的回调函数。
- 当服务器响应时，它会返回一个包裹着数据的JavaScript语句，如`my_json_cb1234({"subjects":[]...})`，浏览器执行这个语句，调用`my_json_cb1234`并将数据传入，从而更新页面上的内容。
5. 注意事项：
- JSONP只支持GET请求，因为它依赖于`<script>`标签的特性，而`<script>`标签不支持POST等其他HTTP方法。
- 由于服务器必须返回预设格式的JavaScript代码，因此服务器端需要对JSONP请求进行特殊处理，这可能限制了服务端的灵活性。
- JSONP存在安全风险，因为它允许任何来源的JavaScript代码在你的页面中执行，这可能导致XSS（跨站脚本攻击）。
总结，JSONP是一种有效的跨域数据获取手段，尤其适用于只需要GET请求且对安全性要求不高的场景。然而，随着CORS（跨源资源共享）的普及，现代浏览器提供了更安全、更灵活的跨域解决方案，JSONP在某些情况下已经被CORS取代。但鉴于兼容性和简单性，JSONP仍然是许多项目中跨域获取数据的首选方案。
