你的无刷新技术是用的Ajax还是iframe?
|
admin
2011年1月22日 21:37
本文热度 3074
|
|
|
|
15.38% (2) |
|
|
|
23.08% (3) |
|
|
|
61.54% (8) |
您所在的用户组没有投票权限 |
本帖最后由 我为ぁ琴狂 于 2010-8-22 11:44 编辑
现在我碰到一些问题很纠结: 1,全都用Ajax,文件上传可以用flash上传,但是Ajax提交表单总感觉挺麻烦的 2,全都用iframe,似乎不能符合W3C文档标准(不知道怎样去符合) 3,一般用Ajax,文件上传用iframe,这个discuz就是这样做的
iframe替代ajax方案: 1.html
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>无标题文档</title>
- <script type="text/javascript">
- function ajax(settings) {
- var div = document.createElement("div"), successed = false, iframeId = "i" + new Date().getTime();
- div.style.display = 'none';
- div.innerHTML = '<iframe id="' + iframeId + '" name="' + iframeId + '"></iframe>';
- document.body.appendChild(div);
-
- var hiddenIframe = document.getElementById(iframeId);
- if(settings.form) {
- settings.form.action = settings.url;
- settings.form.target = iframeId;
- settings.form.submit();
- } else {
- hiddenIframe.src = settings.url;
- }
-
- var fetchData = function() {
- var doc = document.all ? window.frames[iframeId].document : hiddenIframe.contentDocument;
- settings.callback(doc.body.innerHTML);
- successed = true;
- }
-
- settings.loader();
- setTimeout(function() {
- if(!successed) {
- alert('Resquest timeout!');
- fetchData = new Function();
- }
- }, settings.timeout);
- if (document.all){
- hiddenIframe.attachEvent("onload", fetchData);
- } else {
- hiddenIframe.onload = fetchData;
- }
- }
- function A() {
- ajax({
- form: document.getElementById('f'),
- url: '1.php',
- loader: function() {},
- timeout: 3000,
- callback: function(data) {
- alert(data);
- }
- })
- return false;
- }
- function B() {
- ajax({
- url: '1.php',
- loader: function() {},
- timeout: 3000,
- callback: function(data) {
- alert(data);
- }
- })
- return false;
- }
- </script>
- </head>
- <body>
- <form id="f" method="post" onsubmit="return A()">
- <input type="text" name="word" value="123" />
- <input type="submit"/>
- </form>
- <button onclick="B()">get_send</button>
- </body>
- </html>
复制代码 1.php
- <?php
- echo json_encode(array($_POST))
- ?>
复制代码 |
该文章在 2011/1/22 21:37:11 编辑过
| |
全部评论3 |
|
admin
2011年1月22日 21:37
搜到的一些高手的见解
到现在ajax碰到的两个比较大的问题是
1)中文乱码,这个貌似是编码的问题,基本上能够解决,但是在某些比较低版本的浏览器中还是会出现一些问题
2)跨域post提交数据,这个貌似没有办法直接实现,只能通过代理或其他方式来实现
而这两个问题iframe基本都不会碰到,但是iframe的问题在于
1)你想同时进行多少个请求,就必须建立多少个iframe~否则无法同时进行
2)iframe的方式处理的是iframe页面的内容,交互成功的触发方式主要靠a)页面定时读取页面加载状态;b)iframe触发父页面的事件。a)方式必然导致对客户端资源的较多占用,b)方式导致返回数据的增加,而且必须保证父页和框架页的变量和方法的统一。而这点上面,ajax交互过程中仅仅返回所需要的数据(xml或者text),这个是ajax相比iframe的最大优势之一。
当然,有些简单的交互过程,或许用iframe解决会简单一些,例如我的站点有多个频道,采用二级域名布局,这时候如果在a域名下要将数据post到b域名下,如果用ajax处理起来可能会很麻烦,但是iframe很简单就能实现了
至于实际应用中,用iframe还是ajax,看实际需求和个人喜好吧~~
在有的地方比如点击出现一个浮动操作窗口,用iframe比用ajax方便的多。个人感觉用户体验比ajax还要好,ajax总有顿一下的感觉,iframe的方式响应非常快。但是一点击浏览器的后退按钮就露马脚了,用iframe会把每次操作当作一次点击链接记录到历史记录中。ajax还能做很多其它iframe做不了的事 该评论在 2011/1/22 21:37:46 编辑过
|
|
admin
2011年1月22日 21:39
哥用ajax用的很少,几乎不怎么用,适当用用还是有益的,用多了就有些过度依赖了 该评论在 2011/1/22 21:39:04 编辑过
|
|
admin
2011年1月22日 21:39
什么方便就用什么 该评论在 2011/1/22 21:39:21 编辑过
|