使用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 隔行换色函数代码
Oct 24 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
简单了解常用的JavaScript 库
Jul 16 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
详解python3中socket套接字的编码问题解决
2017/07/01 Python
Django 实现图片上传和下载功能
2020/12/31 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
.NET概念性的面试题
2012/02/29 面试题
库房管理员岗位职责
2014/03/09 职场文书
给校长的建议书
2014/03/12 职场文书
活动总结格式范文
2014/04/26 职场文书
党员对照检查材料
2014/09/22 职场文书
2015年少先队活动总结
2015/03/25 职场文书
禁毒主题班会教案
2015/08/14 职场文书
Python面向对象编程之类的概念
2021/11/01 Python
React自定义hook的方法
2022/06/25 Javascript