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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了使用script的src实现跨域和类似ajax效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2396字，纯文字阅读大概需要4分钟。

内容图文

场景

假如有两个域名不同的服务器， 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跨域的方法实现， 虽然有些吃力不讨好， 但不失为一种思路。

内容总结

以上是互联网集市为您收集整理的使用script的src实现跨域和类似ajax效果全部内容，希望文章能够帮你解决使用script的src实现跨域和类似ajax效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---