jsonp跨域解决源代码

JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了HTML的`<script>`标签可以不受同源策略限制的特性，实现JavaScript从不同源获取数据。在本例中，我们将探讨如何通过JSONP来解决JavaScript的跨域问题，以及PHP作为服务器端语言如何配合JSONP工作。 一、理解JSONP 1. 同源策略：浏览器默认实施的一种安全策略，只允许JavaScript访问与当前页面同源（协议、域名和端口都相同）的资源。 2. JSONP原理：JSONP的基本思想是，服务器提供一个可以接受参数的JavaScript函数名，客户端在请求时传递这个函数名，服务器返回一个调用该函数并带有JSON数据的脚本，`<script>`标签加载这个脚本，从而实现跨域数据交互。 二、JSONP的使用步骤 1. 客户端（JavaScript）： - 创建`<script>`标签，设置`src`属性为服务端接口URL，并添加一个查询参数，如`callback`，值为预定义的回调函数名。 - 在全局作用域定义回调函数，用于处理返回的JSON数据。 - 将`<script>`标签插入到DOM中，触发请求。 2. 服务器端（PHP）： - 接收到请求后，获取查询参数`callback`的值，这就是客户端预定义的回调函数名。 - 生成JSON数据，将其包裹在回调函数名内，形成类似`callback({ "key": "value" })`的格式。 - 返回包裹后的字符串，而不是纯JSON。 三、示例代码 1. 客户端JavaScript： ```javascript // 定义回调函数 function handleResponse(data) { console.log(data.key); // 假设返回的数据是 { "key": "value" } } // 创建并插入<script>标签 var script = document.createElement('script'); script.src = 'http://example.com/data.php?callback=handleResponse'; document.head.appendChild(script); ``` 2. 服务器端PHP（data.php）： ```php <?php // 获取回调函数名 $callback = $_GET['callback']; // 假设这是要返回的JSON数据 $data = array('key' => 'value'); $jsonData = json_encode($data); // 包裹回调函数 $response = $callback . '(' . $jsonData . ')'; // 输出响应 header('Content-Type: application/javascript'); echo $response; ?> ``` 四、注意事项 - JSONP只适用于GET请求，因为`<script>`标签只能发起GET请求。 - 安全性问题：由于服务器返回的代码会在客户端执行，因此必须确保服务器是可信任的，避免注入攻击。 - JSONP没有错误处理机制，如果服务器返回的不是合法的JavaScript，浏览器将不会报错，但代码无法正常执行。 总结，JSONP是一种有效的跨域解决方案，尤其适用于API接口的数据获取。通过客户端定义回调函数和服务器端动态生成包裹JSON数据的JavaScript代码，可以绕过同源策略的限制。然而，考虑到其局限性和安全性，对于更复杂或安全性要求较高的场景，可能需要考虑其他跨域技术，如CORS（跨源资源共享）。