zepto,kissy前端框架实现跨域
三、jsonp的原理:带有src属性标签的跨域资源获取能力,在jsonp中通常使用<script>标签,因为<script>标签获取的跨域资源可以使用回调函数直接处理
jsonp的实现:
前端代码:
<script>
function callback(data){
console.log(data);
}
</script>
<script type="text/javascript" src="//www.remote.com/remote.php?callback=callback"></script>
后台代码 <www.remote.com/remote.php>
if(isset($_GET["callback"])){
$server_name = $_SERVER["SERVER_NAME"];
$path = $_SERVER["PHP_SELF"];
$query_string = $_SERVER["QUERY_STRING"];
if($query_string!=""&&$query_string!=null){
$query_paras = explode("&", $query_string);
$query_array = array();
$query_length = count($query_paras);
for($i=0;$i<$query_length;$i++){
$paras = explode("=", $query_paras[$i]);
$query_array[$paras[0]]=$paras[1];
}
$data = array("server_name"=>$server_name,"path"=>$path,"query_paras"=>$query_array);
}else{
$data = array("server_name"=>$server_name,"path"=>$path);
}
$callback = $_GET["callback"];
echo $callback . "(" . json_encode($data) . ")";
后台服务器将需要返回的json数据进行封装,然后并不直接返回json,而是返回一句js代码,
echo $callback . "(" . json_encode($data) . ")";
这句代码将返回的json数据调用回调函数直接进行处理
四、zepto实现jsonp
function getData(){
$.ajax({
type: 'GET',
url: '//www.homeworksong.sinaapp.com/getUrlInfo.php?callback=?',
timeout: 300,
context: $('tbody'),
data: { name: 'Zepto',type:"JSONP" },
success: function(data){
console.log(data);
},
error: function(xhr, type){
alert('Ajax error!')
}
});
}
五、kissy实现jsonp
require(["io","node","util"],function(IO,$,Util){
IO.jsonp("http://www.homeworksong.sinaapp.com/getUrlInfo.php",{type:"JSONP",name:"Kissy" },function(data){
console.log(data);
});
});
});
zepto,kissy前端框架实现跨域的更多相关文章
- Django框架 之 跨域请求伪造
Django框架 之 跨域请求伪造 浏览目录 同源策略与Jsonp 同源策略 Jsonp jQuery对JSONP的实现 CORS 简介 两种请求 同源策略与Jsonp 同源策略 同源策略(Same ...
- 解决使用elementUI框架el-upload跨域上传时session丢失问题
解决方法一: 1.使用elementUI框架el-upload跨域上传时,后端获取不到cookie,后端接口显示未登录,在添加了 with-credentials="true"后依 ...
- SSM框架处理跨域问题
什么是跨域 跨域是指从一个域名的网页去请求另一个域名的资源.比如从www.baidu.com 页面去请求 www.google.com 的资源.跨域的严格一点的定义是:只要 协议,域名,端口有任何一个 ...
- 前端JavaScript实现跨域的方式(转)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- Vue 本地代理 纯前端技术解决跨域
vue-axios获取数据很多小伙伴都会使用,但如果前后端分离且后台没设置跨域许可,那要怎样才能解决跨域问题? 常用方法有几种: 通过jsonp跨域 通过修改document.domain来跨子域 使 ...
- 前端JSONPJIE解决跨域问题
解决同源策略的两个方法 1 . JSONP jsonp (将 JSON 数据填充进回调函数,这就是JSONP的JSON+Padding 的含义) jsonp是json用来跨域的一个东西,原理是通过sc ...
- 前端-关于CORS跨域的解决方案,面向服务端
最近自己在写后台管理系统的时候,并没有采用jsp.freemaker.叶子等模板技术,而是由后端提供数据api,前端通过AJAX和JQuery来动态操作页面上的一些div.table元素,从而实现报表 ...
- 关于laravel框架的跨域请求/jsonp请求的理解
最近刚接触laravel框架,首先要写一个跨域的单点登录.被跨域的问题卡了两三天,主要是因为对跨域这快不了解,就在刚才有点茅塞顿开的感觉,我做一下大概整理,主要给一些刚接触摸不着头脑的看,哪里写得不对 ...
- 微信授权、获取用户openid-纯前端实现——jsonp跨域访问返回json数据会报错的纯前端解决办法
近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活. 首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url https ...
随机推荐
- 关于Android架构那些事
刚开始,因为业务比较赶,我们也没有进行比较好的顶层设计,对代码的要求也是最低要求——完成功能开发就行了.这种短期设计也就造成了我们代码的扩展性几乎为零,稍微添加一点新功能,都要大动干戈.在后台系统架构 ...
- 事务内执行sql修复的简易模板
-- ============================================= -- Script Template -- ============================= ...
- web前端入坑第二篇:web前端到底怎么学?干货资料! 【转】
http://blog.csdn.net/xllily_11/article/details/52145172 版权声明:本文为博主[小北]原创文章,如要转载请评论回复.个人前端公众号:前端你别闹,J ...
- stderr重定向
在测试alljoyn时开启了内部日志,输出太多想重定向到文件中,使用如下命令: ./chat -s aaa >.txt 居然还是打印到屏幕上而不是输出到文件中. 查看alljoyn写日志的代码, ...
- attributes vs properties --记于jquery attr不能正确更新input的value值后
最近做的前端页面是个单页面应用,需要经常给个input赋值什么的. 我常用的方式是$('#id').attr('value','XXXX'),一直可以正常使用.今天突然发现一个问题,某个要赋值的inp ...
- ORA-12519, TNS:no appropriate service handler found(数据库上当前的连接数目已经超过最大值)
报错: ORA-12519, TNS:no appropriate service handler foundThe Connection descriptor used by the client ...
- Android获取前台进程的方法
概述 项目中很多场景交互非常依赖于客户端的前后景状态以及其他一些辅助信息上传,譬如当前新闻在前台(看到的是新闻界面)播放时,语音开启音乐应用,此时我们希望能看到音乐界面,并且音乐在播;而在导航应用在前 ...
- struts 防止重复提交表单
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC &qu ...
- Hadoop系统通信协议介绍(转)
转载自 ---- http://weilaiyxj.iteye.com/blog/913166 本文约定: DN: DataNode TT: TaskTracker NN: NameNode SNN: ...
- 英特尔 Android* 开发者指南上的对等应用
简单介绍 当没有 Wi-Fi 訪问点或互联网訪问时,Android* 应用可能须要对等连接在两台或多台 Android* 设备之间建立连接. 比方,文件共享应用和多人游戏. 该功能可使用 NFC.蓝牙 ...