场景

在处理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下的页面里， 直接

<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跨域的要领完成， 虽然有些吃力不讨好， 但不失为一种思绪。