什么是JSONP的呢？
在Web前端开发中，我们通常需要从外部服务器获取数据。由于浏览器的同源策略限制，不同源的页面不能直接访问对方的数据。为了解决这个问题，我们可以使用JSONP技术。
JSONP（JSON with Padding）是一种跨域数据交互的技术，利用<script>标签没有跨域限制的特性，通过动态创建<script>标签来实现跨域访问数据。JSONP 的原理是利用 <script> 标签的 src 属性不受同源策略限制的特点，通过将需要获取的数据作为 JavaScript 函数的参数传递给服务器，然后服务器返回包含该数据的 JavaScript 函数调用，并在客户端执行该函数，从而完成数据获取的过程。</p> <p>下面是 JSONP 的一个简单示例：</p> <pre class="prettyprint login javascript">function handleResponse(data) { // 处理返回的数据 } var script = document.createElement('script'); script.src = 'http://example.com/api/data?callback=handleResponse'; document.body.appendChild(script);</pre><p>在上面的代码中，我们定义了一个叫做 <code>handleResponse</code> 的函数来处理返回的数据，然后创建了一个 <code><script></code> 标签，设置其 <code>src</code> 属性为远程 API 的地址并指定回调函数名为 <code>handleResponse</code>。当该 <code><script></code> 标签被加载时，会自动执行返回的 JavaScript 代码，从而触发 <code>handleResponse</code> 函数，并将数据作为参数传入。</p> <p>需要注意的是，在服务器端，必须将返回结果封装在指定的回调函数中。例如，如果请求的 URL 为 <code>http://example.com/api/data?callback=handleResponse</code>，那么服务器返回的数据应该类似于：</p> <pre class="prettyprint login ">handleResponse({"name": "John", "age": 30})</pre><p>这样客户端才能正确解析数据并调用对应的回调函数。</p> <h2>JSONP 的优缺点</h2> <p>JSONP 技术虽然可以实现跨域数据交互，但也存在一些缺点：</p> <h3>优点</h3> <ol> <li>能够跨域获取数据，突破浏览器的同源限制</li> <li>兼容性良好，支持绝大多数浏览器</li> <li>简单易用，只需要创建一个 <script> 标签并设置回调函数即可</li> </ol> <h3>缺点</h3> <ol> <li>安全性问题，因为 JSONP 的原理是动态创建 <script> 标签，如果被注入恶意代码，可能会引发安全问题</li> <li>只支持 GET 请求，无法使用 POST 等其他 HTTP 方法</li> <li>不支持错误处理机制，无法捕获和处理服务端的异常情况</li> </ol> <h2>总结</h2> <p>JSONP 技术是一种比较古老但仍然有用的跨域数据交互技术。虽然它存在一些缺点，但在某些场景下仍然是一种有效的解决方案。在实际开发中，我们应该根据具体情况选择适合自己的跨域方案，并且注意安全问题。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/7206">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/7206">https://www.javascriptcn.com/post/7206</a></p> </blockquote>