在 Web 开发中，跨域发起 AJAX 请求是一个非常常见的需求。然而，由于同源策略的限制，当请求不同源的数据时，浏览器会阻止这样的请求。因此，我们需要使用一些方法来解决这个问题。其中， CORS 和 JSONP 是两种解决方案。本文主要介绍 JSONP 的实现方法，并演示如何跨域发送 JSON 数据。
JSONP 是一种利用 <script> 标签进行跨域请求的技术。它通过在请求 URL 中添加一个回调函数名的参数，让服务器端返回形如 callbackFunctionName({...}) 的 JavaScript 代码。浏览器发现返回的是 JavaScript 代码，因此会将其当作脚本执行。这时，我们就可以在页面中使用这个函数，获取服务器端返回的数据了。
function handleData(data) {
console.log(data);
}
var scriptElement = document.createElement("script");
scriptElement.src = "http://example.com/data.js?callback=handleData";
document.body.appendChild(scriptElement);
在上面的代码中，我们使用 document.createElement() 创建了一个 <script> 元素，并指定了请求的 URL，其中包含了回调函数名。然后，我们将这个元素添加到了页面中，浏览器会立即发起请求。当服务器返回数据时，它会将数据以 JavaScript 代码的形式包裹在回调函数中返回。浏览器执行这段代码后，我们定义的回调函数会被调用，从而获取到数据。
另一种方法是通过 jQuery 的 $.getJSON() 函数跨域发送 JSON 数据。该函数会自动将请求 URL 中添加一个回调函数名的参数，并发送一个 JSONP 请求。当服务器返回数据时，它会以 JSONP 的方式包裹在回调函数中返回，我们可以在 success 回调函数中获取数据。
$.getJSON("http://example.com/data.json",function(data) {
console.log(data);
});
总结来说，通过 JSONP 和 jQuery 的 $.getJSON() 函数，我们可以轻松地跨域发送和获取数据。这在开发中非常常见，尤其是后端服务与前端页面分离的情况下。不过要注意，JSONP 只支持 GET 请求，且存在一定的安全问题，请慎重使用。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
