一看就懂：jsonp详解

深入理解JSONP：从原理到实践

你是否曾在实践中遇到过JSONP？今天，让我们一起揭开JSONP的神秘面纱，从原理到实践，一步步搞清楚JSONP到底是什么。

我们要明白什么是同源策略。基于安全原因，浏览器实施了同源策略，该策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。换句话说，如果你的网页试图访问不同源的另一个网页上的资源，浏览器会出于安全考虑阻止这种操作。

接下来，我们来看看JSONP是如何解决这个问题的。通过利用HTML的script标签的跨域能力，JSONP打破了同源策略的限制。你是否知道CDN（内容分发网络）是如何工作的？当我们使用CDN来引入jQuery时，就是通过script标签来实现的，这样的标签可以跨域请求资源。

JSONP是一种利用HTML的script标签的跨域能力来突破同源策略限制的技术。通过构造一个script标签，并将其src属性设置为目标json数据的URL，我们可以轻松地从不同源的网页上获取json数据。希望这篇文章能帮助你更好地理解JSONP，并在实践中应用它。深入了解JSONP跨域请求的实现方式

在Web开发中，跨域请求是一个常见的需求，但由于同源策略的限制，直接发送跨域请求是受限的。通过JSONP（JSON with Padding）技术，我们可以巧妙地绕过这一限制。本文将详细阐述如何使用script标签和jQuery来实现JSONP跨域请求。

一、使用script标签实现JSONP跨域请求

在原始的JavaScript代码中，通过script标签加载外部脚本后，会立即执行响应中的JavaScript代码。为了使跨域请求合法，我们可以将JSON数据包装在一个函数调用中，这个函数名由请求方提供。例如：

```javascript

//假设服务器返回的数据为：jsonpcallback({"Email":"","Remark":"我来自遥远的东方"})

function jsonpcallback(json) {

console.log(json); //打印获取到的JSON数据

}

```

在实际请求中，我们需要告诉服务器我们期望的回调方法名。我们通过QueryString传递一个参数，这个参数的key值通常为“callback”，由服务端约定。例如：

```javascript

$("getJsonpByHand").click(function () {

var script = document.createElement('script');

script.src = "

document.body.appendChild(script);

});

```

当服务器收到请求并处理完毕后，会返回形如`jsonpcallback({"Email":"","Remark":"我来自遥远的东方"})`的响应，此时浏览器会执行这段响应中的JavaScript代码，从而获取到我们想要的JSON数据。

二、使用jQuery实现JSONP跨域请求

使用jQuery可以简化上述过程，直接通过$.ajax方法发送跨域请求，无需手动创建script标签。例如：

```javascript

$("getJsonpByJquery").click(function () {

$.ajax({

url: '

dataType: "jsonp", //指定返回的数据类型为jsonp

jsonp: "callback", //告诉服务器我们期望的回调方法名

success: function (data) { //成功获取数据后的回调函数

console.log(data); //打印获取到的JSON数据

}

});

});

```

使用jQuery的方式更加简洁，得到的结果与手动创建script标签的方式类似。

JSONP技术利用script标签绕过同源策略限制，实现跨域请求。我们通过定义一个回调方法，并在请求中带有一个callback参数告诉服务器我们的回调方法名。服务器返回的数据会被包装在函数调用中，浏览器执行这段代码，从而获取到我们想要的JSON数据。使用jQuery可以简化这一过程。