信息网站开发,湖北可以做网站方案的公司,管家网站,做视频网站审核编辑有假么jsonp的原理与简单实现
原理
由于同源策略的限制#xff0c;XmlHttpRequest只允许请求当前源#xff08;域名、协议、端口#xff09;的资源#xff0c;为了实现跨域请求#xff0c;可以通过script标签实现跨域请求#xff0c;然后在服务端输出JSON数据并执行回调函数XmlHttpRequest只允许请求当前源域名、协议、端口的资源为了实现跨域请求可以通过script标签实现跨域请求然后在服务端输出JSON数据并执行回调函数从而解决了跨域的数据请求。
其本质是利用了 script src”” / script 标签具有可跨域的特性由服务端返回一个预先定义好的Javascript函数的调用并且将服务器数据以该函数参数的形式传递过来此方法需要前后端配合完成。 它只能以GET方式请求 一般将传递的 key 命名为 callback
php服务器示例
header(Content-Type: text/javascript; charsetutf-8);
// 假设从数据库里取数据了
$arr array(namejs,age20
);
// 编码处理
$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的原理与简单实现》
