php json 原理,jsonp的原理与简单实现 - PHP 面试问答

原理

由于同源策略的限制，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的原理与简单实现》