使用script的src实现跨域和类似ajax效果


Posted in Javascript onNovember 10, 2014

场景

假如有两个域名不同的服务器, a.com和b.com, 在b.com/b_return_js.php这个接口里, 可以获取一些数据。 当然,假如是b.com的页面里, 可以使用ajax, 直接请求这个接口, 但如果在a.com的页面里如果请求呢。

b_return_js.php的接口代码:

$a = array(

    array('username'=>'tony', 'age'=>25),

    array('username'=>'yimeng', 'age'=>23),

    array('username'=>'ermeng', 'age'=>22),

    array('username'=>'sanmeng', 'age'=>21),

);

shuffle($a);
echo 'var userdata = '.json_encode($a).';'; //一般如果是b.com的站内请求就直接返回json_encode($a)了, 但如果要用src属性实现跨域, 这里我们需要将该值赋给一个js变量, 保证在script标签加载后的页面里能获取到这个数据并使用。

简单实现

有一种简单的方法就是在a.com下的页面里, 直接

<script src="http://b.com/b_return_js.php"></script>

这样在a.com的页面里就能直接获取到这个接口里返回的数据了。
但这里有一个缺陷,这个数据只能在页面加载的时候获取到, 假如我们想要使用ajax那种可以随时获取新的接口数据的方式就不太适用了, 例如点击一个按钮, 从这个接口获取数据局部刷新, 这种方式就有一些不合适了。

类ajax实现

其实实现上面说的类ajax的思路就是在ajax条件触发的时候, 重新生成一遍上面的那个标签, 从而再次从接口获取数据, 但实际上实现起来还是略有难度(至少对我来说费了不少功夫)。

上代码:

假如a.com/scriptSrc.php页面下有一个按钮

<input type="button" id="ajax_request_from_b" value="来自B.com的请求"/>
每次点击都会从b.com/b_return_js.php接口获取数据, 类似ajax的实现代码:

function createScript()

{

    //console.log(ele);

    ele.src = 'http://b.com/b_return_js.php';

    ele.type = 'text/javascript';

    ele.language = 'javascript';

}
function getData()

{

    console.log(userdata);

}
$('#ajax_request_from_b').click(function(){
    //每次都需要重新加载这个script标签, 因此每次都要重新生成一个新的script标          签保证能从跨域服务器获取数据

    if(ele && ele.parentNode)

    {

        //ele.parentNode.removeChild(ele);  //这种删除不能将ele彻底从内存删除,只是移除了在dom中的位置

        for (var property in ele) {            

            delete ele[property];        //彻底删除

         } 

    }

    ele = document.createElement('script'); //这是一个新的ele

    createScript();

    document.getElementsByTagName("head")[0].appendChild(ele);

    ele.onload = function(){getData()};  //script元素加载后方可获取userdata, 每次获取的都是随机顺序的用户信息

});

这样你每次点击按钮, 都会重新从接口获取一遍数据, 效果就类似于ajax, 但这是一种js跨域的方法实现, 虽然有些吃力不讨好, 但不失为一种思路。

Javascript 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
Angular短信模板校验代码
Sep 23 Javascript
jquery插件推荐 jquery.cookie
Nov 09 #Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 #Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 #Javascript
js闭包的用途详解
Nov 09 #Javascript
js闭包实例汇总
Nov 09 #Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 #Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 #Javascript
You might like
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
php简单统计在线人数的方法
2016/05/10 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
Python缓存技术实现过程详解
2019/09/25 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
python中的测试框架
2020/11/13 Python
努比亚手机官网:nubia
2016/10/06 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
电子技术专业中专生的自我评价
2013/12/17 职场文书
技术总监个人的自我评价范文
2013/12/18 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
公司请假条范文
2014/04/11 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
导游词之崇武古城
2019/10/07 职场文书
深入理解 Golang 的字符串
2022/05/04 Golang
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技