用iframe设置代理解决ajax跨域请求问题

发布时间:2022-04-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了用iframe设置代理解决ajax跨域请求问题脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题。于是想用代理的方式来解决这个跨域问题。

什么是跨域?

简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果。

方案在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理,然后通过iframe的document.getElementById("Proxy").contentWindow对象来请求ajax。

服务器端的代理页面:
复制代码 代码如下:

<!DOCTYPE htML PubLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html XMlns="http://www.w3.org/1999/xhtml">
<head>
<;meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<tITle>Ajax跨域</title>
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
document.domain = 'xxx.COM';
</script>
</head>
<body>
</body>
</html>

客户端ajax的调用代码示例:
复制代码 代码如下:

<iframe src="http://weixin.goumin.com/PRoxy.html" id="proxy" style="display:none;" onload="loadDefaultData();"></iframe>
<script type="text/javascript">
document.domain = "xxx.com";
function loadDefaultData(){
VAR iframe_jquery = document.getElementById("proxy").contentWindow.$;
iframe_jquery.ajax({
type: "POST",
url:""+Math.random(),
data:{},
async:false,
dataType:'json',
success:function(data){
alert(data);
}
});
}
</script>

url:""+Math.random(),

请注意加红的url这行,用一个随机函数来解决浏览器缓存的问题。让每一次请求的url不一样。

脚本宝典总结

以上是脚本宝典为你收集整理的用iframe设置代理解决ajax跨域请求问题全部内容,希望文章能够帮你解决用iframe设置代理解决ajax跨域请求问题所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。