JSONP

在一个head标签中我们可以这么写

<script>
var callback = function(data){
      console.log(data);
  }
callback({name:'王柯智',age:'18'})
// 在控制台打印出 {name:'王柯智',age:'18'}
</script>

我们定义了一个函数，然后我们又调用了这个函数，接下来我们把调用函数这句话(callback({name:'王柯智',age:'18'}))放在同级目录下的另外一个JS文件叫做jsonp.js文件中，接下来我们的head标签就可以这么写

<script>
var callback = function(data){
      console.log(data);
  }
</script>
<script src='./jsop.js'>
</script>

以上代码跟第一次我们写的代码效果一模一样。但是我们是从引入外部的JS来调用我们自己定义的函数。
如果把这个外部js放在服务器上的话，我们的script标签可以会变成这种形式：

<script src='http://xxx.com/jsonp.js'>
</script>

然后我们在服务器的jsonp.js文件里可以把服务器的数据拿到JS当中，也就是说这里的JS是这么写的

callback({key1:'value',key2:'value2'})

由于我们可能会多次调用callback函数，为了把每次调用的函数和函数调用后得到的结果对应起来，通常我们会为这个函数取一个随机的名字，代码实现如下:

var num = Math.floor(Math.random() * 100000) // num是一个1到10万随机数 
window.callbackName = 'callback_' + num;  //给windou添加一个全局属性callbackName
window[callbackName] = function(data){ 
    console.log(data);
  }

此时我们定义便有了一个callback便有了一个随机的名字，但是问题来了，由于我们定义的函数名是随机的，我们自己都不知道如何调用，我们怎么使服务器上的那个函数名变成我们的函数名呢？
JSONP给出了一个方法，即在你需要加载的js文件后面加上'？callback="你的函数名"'，所以我们的script标签便需要这样写:

<script src='http://xxx.com/jsopn.js?callback='+callbackName>

这样我们就能把服务器上的函数名callback改成我们这里定义的函数名了。

可是还有个问题，我们使用了2个script标签，一般来说，第二个script我们需要他动态加载，所以我们只需要使用一个scirpt标签:

<script>

var num = Math.floor(Math.random() * 100000) // num是一个1到10万随机数 
window.callbackName = 'callback_' + num;  //给windou添加一个全局属性callbackName
window[callbackName] = function(data){ 
    console.log(data);
  }
//定义我们自己的函数，并给他赋予一个随机的名字
var sc = document.create('script')
sc.src = 'http://xxx.com/jsopn.js?callback=' + callbackName;
sc.id = 'script_' + callbackName;
document.body.appendChild(sc);
// script标签只有添加到文档当中才会去请求资源。
document.getElementById(sc.id).remove();
//当函数被调用以后得到了服务器端的数据便把script标签从文档中移除.
</script>
以上便是JSONP的用法。

当然，我们可以给callback不同的功能，比如上述代码中我们callback的功能是打印出data，你也可以再写一个callback，比如里面的代码是console.log('xxx')也是可以的，但是这样的话你可能会重写一次上面的代码，会显得很麻烦，所以我们把JSONP封装一下，变成下面这个样子:

function jsonp(url,fn){
    var num = Math.floor(Math.random() * 100000);
    var callbackName = 'callback_' + num;
    window[callbackName] = fn;
    var sc = document.createElement('script');
    sc.src = url + '?callback=' + callbackName;
    sc.id = 'script_' + num;
    document.body.appendChild(sc);
    document.getElementById(sc.id).remove()
}

这样，当我们想用jsonp的方式获取数据并且对数据进行处理的话就可以直接运行
jsonp('http://www.xxx.com/jsop.js',function(data){
console.log(data);
})

当然，我们也推荐使用JQuery的封装好的JSONP语法：

$.ajax({
  url:'http://www.xxx.com/jsonp.js',
  datatype:'jsonp',
  success:function(data){
      console.log(data);
  }
}
)

不过需要注意的是，虽然JQ这里写的是$.ajax，但是JSONP并不是Ajax，这样写只是为了方便而把Ajax和JSONP的功能封装在了一起，你在浏览器下打开开发者工具可以看到jsop的请求类型不是xhr。