JerryQu的小站

先来句题外话，最开始Ajax应该是用来特指用XMLHttpRequest传输数据这门技术，但就像最近大家把一切web新技术都归到html5名下一样，现在一切异步获取数据的手段都被人称之为Ajax。

由于JavaScript同源策略的存在，跨域数据交互是个老生常谈的话题了。网上相关文章很多，不过随着时间的推移和浏览器的更新，一部分解决方案已经不适用了，同时也出现了一些更好的方法。抛开纯服务器Proxy这种跟前端没什么关系的方案不说，这里简单总结下常见的其他几种方式。

JSONP

JSONP是最常见的跨域数据交互的方式，原理是html的script标签可以加载并执行其他域JS文件。站点B把要提供的数据作为参数传给一个站点A定义的全局函数，站点A引用这个文件就可以跨域获取数据了，A站还可以把少量参数放在script标签的src里提交给B站。外链JS这种方案只支持GET，受IE下url长度不能超过2083个字节的限制和出于安全考虑，一般不用来提交数据。

有人通过后端Proxy使得这种方式可以获取任意页面内容，还增加了对POST的支持，如：

<script type="text/javascript" src="http://www.ajax-cross-domain.com/cgi-bin/ACD/ACD.js?uri=(http://www.google.com)"></script>
<script type="text/javascript">
	alert(ACD.responseText);
</script>
<script type="text/javascript" src="http://www.ajax-cross-domain.com/cgi-bin/ACD/ACD.js?uri=(http://216.92.131.147/dotserv/ACD/runit/post.cgi)&method=post&postdata=(name=fred&email=fred@fred.com)"></script>
<script type="text/javascript">
	alert(ACD.responseText);
</script>

实际上这个方案是借助后端把任意页面输出为JS变量，后端根据url中相关标识来决定请求方式和参数，并不能解决大数据提交问题。

原生表单+Redirect＋Callback

原生的form表单支持提交数据到其他域，我们只需要把form的target指向页面上的隐藏iframe，那就实现了无刷新提交，剩下的问题就是怎么获取提交后的结果。例如站点A表单提交数据到站点B，通常我们会在站点B处理完请求，重定向到站点A下某个Proxy页面，并在url带上参数标识处理结果。接着，A站下的Proxy页面就可以解析url参数，传给父页面的Callback函数来处理了。

Read the rest of this entry »