我知道JSONP是JSON填充。
我明白JSON是什么，以及如何使用它jQuery.getJSON()。但是，我不明白callback什么时候引入JSONP 的概念。
谁可以向我解释这是如何工作的？
回答 2
假设服务端有数据 "foobar" 需要传给客户端。在客户端定义如下函数用来对数据进行打印、警告等操作：function print(e){
console.log(e)}function warn(e){ alert(e)}假如说服务端用来获取数据的URL是：http://server.com/jsonp.php
然后我使用 <script> 标签或者 jQuery 发起如下请求：http://server.com/jsonp.php?callback=print
当这个 php 页面检测到 callback 参数（随便叫啥都行）的值时，会把要发给客户端的数据包裹在 print 的函数调用里，变成这种样子返回给客户端：print("foobar");
这样对这个请求的结果就是一个函数调用，于是 "foobar" 会被打印出来。当我想弹出对话框时，只需要把 callback 的值换成 warn 就行了。这个过程就是 jsonp。
什么是JSONP
首先提一下JSON这个概念，JSON是一种轻量级的数据传输格式，被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现，所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。
那么JSONP是什么呢？
首先抛出浏览器同源策略这个概念，为了保证用户访问的安全，现代浏览器使用了同源策略，即不允许访问非同源的页面，详细的概念大家可以自行百度。这里大家只要知道，在ajax中，不允许请求非同源的URL就可以了，比如www.a.com下的一个页面，其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的。
JSONP就是用来解决跨域请求问题的，那么具体是怎么实现的呢？
JSONP原理
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
JSONP具体实现
1.首先看下ajax中如果进行跨域请求会如何。
前端代码在域www.practice.com下面，使用ajax发送了一个跨域的get请求
<!DOCTYPE html><html><head> <title>GoJSONP</title></head><body><script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); }</script><script type="text/javascript" src="jquery-1.8.3.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $.ajax({ type : "get", async: false, url : "http://www.practice-zhao.com/student.php?id=1", type: "json", success : function(data) { jsonhandle(data); } }); });</script></body></html>后端PHP代码放在域www.practice-zhao.com下，简单的输出一段json格式的数据
jsonhandle({ "age" : 15, "name": "John",})2.下面使用JSONP，将前端代码中的ajax请求去掉，添加了一个script标签，标签的src指向了另一个域www.practice-zhao.com下的remote.js脚本
<!DOCTYPE html><html><head> <title>GoJSONP</title></head><body><script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); }</script><script type="text/javascript" src="jquery-1.8.3.min.js"></script><script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script></body></html>这里调用了跨域的remote.js脚本，remote.js代码如下：
jsonhandle({ "age" : 15, "name": "John",})也就是这段远程的js代码执行了上面定义的函数，弹出了提示框
3.将前端代码再进行修改，代码如下：
<!DOCTYPE html><html><head> <title>GoJSONP</title></head><body><script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); }</script><script type="text/javascript" src="jquery-1.8.3.min.js"></script><script type="text/javascript"> $(document).ready(function(){ var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle"; var obj = $('<script><\/script>'); obj.attr("src",url); $("body").append(obj); });</script></body></html>这里动态的添加了一个script标签，src指向跨域的一个php脚本，并且将上面的js函数名作为callback参数传入，那么我们看下PHP代码怎么写的：
<?php$data = array( 'age' => 20, 'name' => '张三',);$callback = $_GET['callback'];echo $callback."(".json_encode($data).")";return;PHP代码返回了一段JS语句，即
jsonhandle({ "age" : 15, "name": "张三",此时访问页面时，动态添加了一个script标签，src指向PHP脚本，执行返回的JS代码，成功弹出提示框。
所以JSONP将访问跨域请求变成了执行远程JS代码，服务端不再返回JSON格式的数据，而是返回了一段将JSON数据作为传入参数的函数执行代码。
4.最后jQuery提供了方便使用JSONP的方式，代码如下：
<!DOCTYPE html><html><head> <title>GoJSONP</title></head><body><script type="text/javascript" src="jquery-1.8.3.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $.ajax({ type : "get", async: false, url : "http://www.practice-zhao.com/student.php?id=1", dataType: "jsonp", jsonp:"callback", //请求php的参数名 jsonpCallback: "jsonhandle",//要执行的回调函数 success : function(data) { alert("age:" + data.age + "name:" + data.name); } }); });</script></body></html>
腾讯云开发者
