jsonp 实现原理与jquery实例

前端实现

为了实现跨域请求，jsonp使用script标签进行请求。后台返回的数据并不是一个纯粹的json数据，实际上是一个函数调用。

以jquery为例，

jquery把jsonp封装到ajax中，实际上并不是真正的ajax请求，只是方便调用。

增加两个属性jsonp, jsonpCallback，这两个属性jquery会设置默认值

jsonp默认值为callback, jsonpCallback默认值是一个动态的随机字符串。再下发请求时，会把这两个值追加到url的后面，比如你的ajax代码如下：

$.ajax({

url: "http://yourdomain/jsonp/data.json",

dataType:'jsonp',

jsonp: 'callback',

jsonpCallback: 'onGetJsonpData'

}

浏览器发送请求的实际url为：http://yourdomain/jsonp/data.json？callback=onGetJsonpData。其中callback是jsonp后面的值，onGetJsonpData是jsonpCallback的值

后台实现

后台代码的处理与普通的json数据也是有区别的，需要获取这两个参数，返回如下格式的数据：

onGetJsonpData({data:'test'});

其中onGetJsonpData是从URL参数中获取的callback的值

实际上就是调用一个JS函数，把取到的数据传给这个函数，所以说，这里的数据可以是任意格式的数据，但一般使用json数据更灵活，更易被接受

详细的例子网上有很多，就不在这里列举了