原理
由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。
其本质是利用了< script src=”” > script >标签具有可跨域的特性,由服务端返回一个预先定义好的Javascript函数的调用,并且将服务器数据以该函数参数的形式传递过来,此方法需要前后端配合完成。
它只能以GET方式请求
一般将传递的 key 命名为 callback
php服务器示例
header('Content-Type: text/javascript; charset=utf-8');
// 假设从数据库里取数据了
$arr = array(
"name"=>"js",
"age"=>20
);
// 编码处理
$json = json_encode($arr);
//获取客户端的callback函数
$callback = $_GET['callback'];
//给接收到的函数传输入据$json作为参数, 输出到html页面运行该函数
echo $callback . '(' . $json . ')';
客户端示例
var jsonp = (function(){
var count = 0;
return function (url, callback) {
//1. 创建一个script标签
var scriptElem = document.createElement('script');
//2. 把地址传进去
var callbackName = "__callback__" + count++;
var jsonpUrl = url + "?callback=" + callbackName;
scriptElem.src = jsonpUrl;
//3. 创建一个fn函数,用于接收返回的数据
window[callbackName] = function(data){
//把数据传给想要用的人
callback(data);
//把我们创建的script标签删掉
window.document.body.removeChild(scriptElem);
};
//4.把标签放到body,把请求发出去
window.document.body.appendChild(scriptElem);
}
})();
jsonp('./js.php',function cs(data){
data = JSON.stringify(data);
console.log(data);
});
控制台输出:{“name”:”js”,”age”:20}
注: 请在php服务器下运行
本文转载自 HeartWalker’s Blog,《jsonp的原理与简单实现》