通过jsonp获取json数据实现AJAX跨域请求-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，AJAX 是一种常见的技术手段，可以通过异步请求获取服务器上动态生成的数据，而不必刷新整个页面。然而，由于同源策略的限制，AJAX 请求通常只能向与当前网页具有相同原点的服务器发送请求。为了解决这个问题，我们可以使用 JSONP 技术来实现跨域请求。

JSONP 的原理

JSONP 全称是 JSON with Padding，它是一种利用 <script> 标签实现跨域请求的技术。与 AJAX 不同，JSONP 并不是通过 XMLHttpRequest 对象发送请求，而是通过动态创建 <script> 标签的方式来获取数据。具体来说，JSONP 在客户端创建一个新的 <script> 标签，该标签的 src 属性指向一个服务器上的 URL，同时在该 URL 后面添加一个回调函数的名称作为参数。服务器在处理请求时，会将需要返回的数据包装在这个回调函数中，最后将整个结果以字符串的形式返回给客户端。当客户端接收到响应时，浏览器会自动执行这个回调函数，从而实现对返回数据的处理。

由于 JSONP 请求是通过 <script> 标签实现的，因此不受同源策略的限制，可以从任何域名下获取数据。但是，JSONP 只支持 GET 请求，因为浏览器在动态添加 <script> 标签时只能使用 GET 方法。

JSONP 的示例

下面是一个简单的 JSONP 示例代码：

function handleResponse(response) {
  console.log(response);
}

var script = document.createElement('script');
script.src = 'https://example.com/api/data?callback=handleResponse';
document.body.appendChild(script);

在这个示例中，我们通过创建一个新的 <script> 标签来获取 https://example.com/api/data 这个 URL 返回的数据。其中，回调函数名称为 handleResponse，将作为参数传递给服务器。当服务器返回数据时，它会以以下形式的 JavaScript 代码的形式返回：

handleResponse({
  "name": "John",
  "age": 30,
  "city": "New York"
});

浏览器会直接将这段代码插入到页面中，并自动执行其中的 handleResponse 函数，从而将返回数据打印到控制台上。

JSONP 的注意事项

回调函数名必须是合法的 JavaScript 标识符，并且不能与全局变量重名；
回调函数必须在发送请求之前就定义好，以便服务器能正确地将数据包装在其中；
使用 JSONP 请求时，请务必确保服务器返回的数据不会引起安全问题，不要轻易地信任第三方网站返回的数据；
如果服务器返回的数据格式不是预期的 JSON 格式，浏览器会抛出异常并导致代码无法执行。

结语

JSONP 技术虽然已经有些过时，但在某些情况下仍然非常有用。通过了解 JSONP 的原理和注意事项，我们可以更好地使用它来实现 AJAX 跨域请求，并避免一些常见的问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/870