使用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 相关文章推荐
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
浅析Node.js查找字符串功能
Sep 03 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 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 冲泡冲煮
MVC模式的PHP实现
2006/10/09 PHP
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
基于jquery的表格排序
2010/09/11 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
python中base64加密解密方法实例分析
2015/05/16 Python
python中的编码知识整理汇总
2016/01/26 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
介绍一下游标
2012/01/10 面试题
经典促销广告词大全
2014/03/19 职场文书
卖车协议书范例
2014/09/16 职场文书
农村党支部承诺书
2015/04/30 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
Win11开始菜单添加休眠选项
2022/04/19 数码科技