使用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 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
第七节 类的静态成员 [7]
2006/10/09 PHP
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
基于python plotly交互式图表大全
2019/12/07 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
美国眼镜网站:LensCrafters
2020/01/19 全球购物
师范应届生语文教师求职信
2013/10/29 职场文书
高中自我鉴定范文
2013/11/03 职场文书
医学专业毕业生推荐信
2013/11/14 职场文书
毕业生就业自荐信
2013/12/04 职场文书
回门宴父母答谢词
2014/01/26 职场文书
小学安全教育材料
2014/02/17 职场文书
学校端午节活动方案
2014/08/23 职场文书
2014年维修工作总结
2014/11/22 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python