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);
                    });
                });
            });
时间: 2024-10-10 18:28:43

zepto,kissy前端框架实现跨域的相关文章

解决使用elementUI框架el-upload跨域上传时session丢失问题

解决方法一: 1.使用elementUI框架el-upload跨域上传时,后端获取不到cookie,后端接口显示未登录,在添加了 with-credentials="true"后依然不生效 前端会报上面的错误,解决方式:后端把把*号改成httpServletRequest.getHeader("Origin") 解决方法二: 1.把config目录下的index.js文件打开,修改proxyTable属性的设置: 考虑到这个这个目标路径可能需要修改,所以打包后需要单

前端-关于CORS跨域的解决方案,面向服务端

最近自己在写后台管理系统的时候,并没有采用jsp.freemaker.叶子等模板技术,而是由后端提供数据api,前端通过AJAX和JQuery来动态操作页面上的一些div.table元素,从而实现报表的动态加载. 因为本人并非专业前端,所以采用的技术比较古老,对于最近的前端框架,vue,angular,react等等,暂且按下不表. 说说遇到的几个坑: 1.AJAX发送请求的时候,默认是异步的,而不是同步的. 基于低耦合的编码,我在写ajax时,数据请求和数据处理是分开的,没加同步执行就导致了我

Django 【第十九篇】JS实现的ajax、同源策略和前端jsonp解决跨域问题

一.回顾jQuery实现的ajax 首先说一下ajax的优缺点 优点: AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高: jquery 实现的ajax index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

Django框架 之 跨域请求伪造

浏览目录 同源策略与Jsonp 同源策略 Jsonp jQuery对JSONP的实现 CORS 简介 两种请求 同源策略与Jsonp 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现. 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是

【前端学习笔记】原生Javascript中通过JSONP(前端常用方法)进行跨域

Ajax跨域-------------------------- 跨域: 跨域名 一个域名下的文件去请求了和他不一样的域名下的资源文件,那么就会产生跨域请求 这是ajax的跨域限制问题 跨域的解决 : jsonp: json width padding 核心: 1.script标签 2.用script标签加载资源是没有跨域问题的 3.script只认文件的实际内容,而不是后缀.只要内容是合法的js就能用 流程: 1.在资源加载进来之前定义好一个函数,这个函数接受一个参数(要取的数据) ,而将要加

关于laravel框架的跨域请求/jsonp请求的理解

最近刚接触laravel框架,首先要写一个跨域的单点登录.被跨域的问题卡了两三天,主要是因为对跨域这快不了解,就在刚才有点茅塞顿开的感觉,我做一下大概整理,主要给一些刚接触摸不着头脑的看,哪里写得不对的,也请大神指点,言归正传: 1.先用通俗易懂的话说下原理和几种跨域的方式,因为网上一搜都是追对某一种方式的专业性解答,我是消化不了多少. 第一种:jsonp 方式,这是什么方式呢,先要说一说JavaScript,在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin P

前端如何去做跨域解决方案

前言 那些你,你常用的跨域解决方案除了jsonp 之外,还有其他的吗?今日早读文章可以告诉你,本文由 金蝶 @scq000授权分享. 正文从这开始~ 浏览器在请求不同域的资源时,会因为同源策略的影响请求不成功,这就是通常被提到的"跨域问题".作为前端开发,解决跨域问题应该是一个被熟练掌握的技能.而随着技术不断的更迭,针对跨域问题的解决也衍生出了多种解决方案.我们通常会根据项目的不同需要,而采取不同的方式.这篇文章,将详细总结跨域问题的相关知识点,以便在遇到相同问题的时候,能有一个清晰的

前端通信、跨域

首先了解什么是同源策略: 限制一个源加载的文档或脚本与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的关键的安全机制.(来自MDN的解释) 源包括三个部分:协议.域名.端口(HTTP协议的默认端口是80).如果其中有任何一个部分不同,则源不同.即为跨域. 限制:这个源的文档没有权利去操作另一个源的文档.这个限制体现在: Cookie.LlocalStorage和IndexDB无法获取: 无法获取和操作DOM: 不能发送Ajax请求.(Ajax只适合同源的通信). 前后端的通信方式: A

vue-cli3以上框架解决跨域问题

事实上,3以上的版本安装好以后没有主配置文件,它不像2的版本有专门的config文件夹可以处理配置,所以我们需要新建vue.config.js  [默认情况下,3以上的版本可以直接识别这个js文件,把它当做自己的配置文件] 步骤如下: 1.在项目框架的根目录下新建文件:vue.config.js 2.重启项目,这样的话新建的文件就可以被识别了 3.给新建的文件内添加解决跨域的代码部分 module.exports = { outputDir: 'serve', //build输出目录 asset