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

Batkid 发布于2019-08-21 10:21 / 542人阅读

摘要：的接口代码一般如果是的站内请求就直接返回了，但如果要用属性实现跨域，这里我们需要将该值赋给一个变量，保证在标签加载后的页面里能获取到这个数据并使用。

场景

在解决js的跨域问题的时候，有多种方式，其中有一种是利用script标签的src属性，因为这个属性是不受域名限制的，我们可以直接让src的这个链接指向跨域网站的一个接口，这个接口返回的是js代码或者json格式数据，从而实现跨域获取数据。

假如有两个域名不同的服务器， 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下的页面里，直接

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

类ajax实现

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

上代码：

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

每次点击都会从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跨域的方法实现，虽然有些吃力不讨好，但不失为一种思路。

混合云专线服务 ajax跨域 js实现f11的效果使用效果的数据分析 jquery ajax 跨域

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85375.html

ajax之面试必问跨域问题

摘要：可以说是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。只能设置为主域名，不可以在中将设置为。问题安全性，当一个站点被攻击后，另一个站点会引起安全漏洞。在此处执行利用和这个办法比较绕，但是可以解决完全跨域情况下的脚步置换问题。 ajax之面试必问跨域问题，如果你知道jsonp就弱爆了，往深处稍微问那么一丢丢，你就会被虐的万劫不复...个人总结ajax： 1、什么是跨域2、d...

wind3110991 2019-08-19 17:53 评论0 收藏0
ajax之面试必问跨域问题

摘要：可以说是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。只能设置为主域名，不可以在中将设置为。问题安全性，当一个站点被攻击后，另一个站点会引起安全漏洞。在此处执行利用和这个办法比较绕，但是可以解决完全跨域情况下的脚步置换问题。 ajax之面试必问跨域问题，如果你知道jsonp就弱爆了，往深处稍微问那么一丢丢，你就会被虐的万劫不复...个人总结ajax： 1、什么是跨域2、d...

alaege 2019-08-30 12:51 评论0 收藏0
ajax之面试必问跨域问题

摘要：可以说是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。只能设置为主域名，不可以在中将设置为。问题安全性，当一个站点被攻击后，另一个站点会引起安全漏洞。在此处执行利用和这个办法比较绕，但是可以解决完全跨域情况下的脚步置换问题。 ajax之面试必问跨域问题，如果你知道jsonp就弱爆了，往深处稍微问那么一丢丢，你就会被虐的万劫不复...个人总结ajax： 1、什么是跨域2、d...

everfight 2019-08-02 18:33 评论0 收藏0
ajax之面试必问跨域问题

摘要：可以说是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。只能设置为主域名，不可以在中将设置为。问题安全性，当一个站点被攻击后，另一个站点会引起安全漏洞。在此处执行利用和这个办法比较绕，但是可以解决完全跨域情况下的脚步置换问题。 ajax之面试必问跨域问题，如果你知道jsonp就弱爆了，往深处稍微问那么一丢丢，你就会被虐的万劫不复...个人总结ajax： 1、什么是跨域2、d...

Lyux 2019-08-01 15:08 评论0 收藏0
iframe,我们来谈一谈

摘要：通常我们可以在后配置各种指定资源路径，有如果你未指定的话，则是使用规定的加载策略默认配置就是同域这里和有一点瓜葛的就是和就是用来指定的有效加载路径。某大咖说: iframe是能耗最高的一个元素，请尽量减少使用某大牛说: iframe安全性太差，请尽量减少使用...wtf, 你们知不知道你们这样浇灭了多少孩纸学习iframe的热情和决心。虽然，你们这样说的我竟无法反驳，但是ifram...

awesome23 2019-08-21 13:29 评论0 收藏0