现今许多项目为实现专业、快速、高效开发，均采用前后端分离的方式，该方式首要问题是解决跨域问题（端口号不同即属于跨域）。下面是本人对jsonp实现跨域的认识。

因为浏览器的同源策略机制，即阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。浏览器会阻止端口号或IP不同的请求，根本不会发起这样的请求（not allowed by Access-Control-Allow-Origin），使用jsonp可以解决这个问题。

JSONP的基础：

不知道大家知不知道CDN这个东西，例如微软的CDN，使用它，我们的网页可以不提供jQuery，由微软的网站帮我们提供：

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>

当我们使用script标签访问跨域的请求，如：

<script type="text/javascript" src="http://localhost:2701/Scripts/jquery-1.8.0.min.js"></scrip>

放在script里设置scr属性是没有问题的，利用script的跨域能力，这就是jsonp的基础。

JSONP的原理：

既然它叫jsonp，很明显目的还是json，而且是跨域获取。根据上面的分析，很容易想到：利用js构造一个script标签，把json的url赋给script的scr属性，把这个script插入到dom里，让浏览器去获取。实践：

function CreateScript(src) {
    $("<script><//script>").attr("src", src).appendTo("body")
}

添加一个按钮事件来测试一下：

$("#getJsonByHand").click(function () {
    CreateScript("http://localhost:2701/home/somejson")
})

首先，第一个浏览器，http://localhost:2701/home/somejson这个Url的确是存在一个json的，而且在2698网页上用script标签来请求这个2701这个Url也是200OK的，但是最下面报js语法错误了。原来用script标签加载完后，会立即把响应当js去执行，很明显{"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"}不是合法的js语句。

利用script获取异域的jsonp：

显然，把上面的json放到一个回调方法里是最简单的方法。例如，变成这样：

如果存在jsonpcallback这个方法，那么jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})就是合法的js语句。

由于服务器不知道客户端的回调是什么，不可能hard code成jsonpcallback，所以就带一个QueryString让客户端告诉服务端，回调方法是什么，当然，QueryString的key要遵从服务端的约定，上面的是”callback“。

添加回调函数：

function jsonpcallback(json) {
    console.log(json)
}

把前面的方法稍微改改参数：

$("#getJsonpByHand").click(function () {
    CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")
})

200OK，服务器返回jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})，我们也写了jsonpcallback方法，当然会执行。OK顺利获得了json。没错，到这里就是jsonp的全部。

利用jQuery获取jsonp：

上面的方式中，又要插入script标签，又要定义一个回调，略显麻烦，利用jQuery可以直接得到想要的json数据，同样是上面的jsonp：

$("#getJsonpByJquery").click(function () {
    $.ajax({
        url: 'http://localhost:2701/home/somejsonp',
        dataType: "jsonp",
        jsonp: "callback",
        success: function (data) {
            console.log(data)
        }
    })
})

得到的结果跟上面类似。

总结：

一句话就是利用script标签绕过同源策略，获得一个类似这样的数据，jsonpcallback是页面存在的回调方法，参数就是想得到的json。

jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})