时间:2021-05-02
场景
假如有两个域名不同的服务器, 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页面下有一个按钮
<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跨域的方法实现, 虽然有些吃力不讨好, 但不失为一种思路。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
最近在学ajax和跨域,于是就自己封装了一个,虽然有点粗糙但还是可以用的。其实jsonp的本质就是:动态创建script标签,然后通过src属性发送跨域请求,然
Nginx实现AJAX跨域请求AJAX从一个域请求另一个域会有跨域的问题。那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加a
如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascr
这里采用了JSONP(JSONwithPadding-填充json数据也就是常用的json跨域方式):利用script标签,通过特定的src地址的调用,来执行一
JSONP实现跨域常用的jquery实现跨域调用$.ajax({url:"http://127.0.0.1/~chenjiebin/mycode/php/cro