什么是JSONP？

JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。--来源百度

从它的定义中不难看出jsonp是一种以json格式的数据作为填充的一种实现跨域的方法！

为什么需要使用JSONP?

首先我们都知道，浏览器为了安全设置了同源策略对跨域页面之间的访问进行了限制。

同源策略规定： 两个页面必须协议、域名和端口号都一致才视为同源。

同源策略对不同源页面的限制：

1.存储在浏览器中的数据，如localStorage、cookie等不能跨域访问

2.不能通过跨域操作DOM

3.不能通过ajax请求不同域的数据

而作为前端开发，在日常工作中经常会遇到需要进行跨域页面间进行数据交互的情况，那么这个时候就可以使用jsonp进行跨域数据交互了！

JSONP的原理是什么？为什么JSONP可以跨域？

我们先来说一下jsonp的原理是什么，首先jsonp其实就是在前台定义一个函数，然后通过script标签发送请求（由于script标签发送的请求是不受同源策略限制的），然后后台处理并输出之前定义的函数名，并把数据以json的格式填充到参数中，这样在请求返回时就会调用我们之前定义的函数，并获得想要的数据！

jsonp就是利用了script标签请求是不受同源策略限制的特性进行跨域的。

JSONP的具体实现

我们来看一段例子：

function callback(a){
    alert(a.name);
}
<script src="http://.....com/..php?JSONP='21'"></script>

上面是一个最简单的一个带参数的函数，假设我们现在需要跨越获取一些数据,如获取当前用户的名字name，参数a就是我们需要从后台获取的数据，但是在上面我们并没有调用他！而是通过script标签向服务器发送请求，下面我们在来看看php文件怎么写：

if(!empty($_GET['JSONP'])){
    $id = $_GET['JSONP'];
    $query = mysql_query("select * from user where id=$id");
    $res = mysql_fetch_array($query);
    echo "callback({‘name’:$res['name'])";
}

上面就是php文件的内容了，首先获取请求的url参数，在这里我传的是用户id，然后根据id去数据库查询对应的数据，然后输出js文件定义的方法名，并把用户的名字当成参数放进去！

这里我们对于参数的补充，就是我们上面所说的填充，顾名思义，就是把我们要取的数据填充到参数里！

看了上面的例子就不难理解了，就不难理解什么是jsonp了，说的直白点就是在前台定义函数，然后后台输出函数名和参数完成函数的调用和数据的填充！当然，它最主要的作用在于解决js跨域的问题！

以上就是jsonp相关的内容，相信大家看到现在基本都能对jsonp有个简单了解了！

本文允许全文转载，转载请注明来源： 平凡公子 - 浅析JSONP