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

场景

假如有两个域名不同的服务器， a.com和b.com,在b.com/b_return_js.PHP这个接口里，可以获取一些数据。当然，假如是b.com的页面里，可以使用ajax,直接请求这个接口，但如果在a.com的页面里如果请求呢。

b_return_js.PHP的接口代码：

'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 页面下有一个按钮

PHP接口获取数据，类似ajax的实现代码：

代码如下:

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

js 跨域

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

相关文章