用iframe设置代理解决ajax跨域请求问题
更新时间：2013年11月18日 15:58:28 作者：
面对ajax跨域请求的问题，想用代理的方式来解决这个跨域问题。在服务器端创建一个静态的代理页面，在客户端用iframe调用这个代理
今天在项目中需要做远程数据加载并渲染页面，直到开发阶段才意识到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不一样。
什么是跨域？
简单的来说，出于安全方面的考虑，页面中的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不一样。
相关文章
AJAX中同时发送多个请求XMLHttpRequest对象处理方法
AJAX中同时发送多个请求XMLHttpRequest对象处理方法...2007-04-04
这篇文章主要介绍了Ajax上传文件进度条Codular的相关资料,需要的朋友可以参考下2017-05-05
跨域这个词应用非常频繁，主要是因为安全限制(同源策略， 即JavaScript或Cookie只能访问同域下的内容)。本文给大家介绍jQuery使用ajax跨域请求获取数据，需要的朋友可以参考下2015-10-10
初步了解JavaScript，Ajax，jQuery，并比较三者关系
这篇文章主要介绍了初步了解JavaScript，Ajax，jQuery，并比较三者关系的相关资料,需要的朋友可以参考下2015-10-10
众所周知，用服务器控件做页面的登录窗体时很简单的，但是页面的多次回传让我们感觉到头痛，一直刷新页面的感觉非常之不好，其实用ajax的局部刷新功能可以完全解决这个问题，制作出来的页面有很好的交互性，而且是局部刷新，节省网络资源。2009-10-10
ajax默认是异步请求，如果要在$.ajax({里面给全局变量赋值，需要改为同步操作，即加上async : false，就可以了2014-01-01
下面小编就为大家带来一篇Ajax解决缓存的5种方法总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。接下来通过本文给大家讲解ajax的工作原理及优缺点，感兴趣的朋友一起看看吧2016-11-11
这篇文章主要介绍了ajax异步传值及后端接收参数的多种方式小结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
运用Ajax做了一个名字检验，第一次是有效的，但是提交过后，再检验一次，结果就不对了，是由于IE的cache的原因，接下来介绍下详细的解决方法，感性的朋友可以参考下哈2013-04-04
最新评论