LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

你的无刷新技术是用的Ajax还是iframe？
admin
2011年1月22日 21:37 本文热度 3065

























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



  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. <html xmlns="http://www.w3.org/1999/xhtml">

  3. <head>

  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  5. <title>无标题文档</title>

  6. <script type="text/javascript">

  7. function ajax(settings) {

  8.     var div = document.createElement("div"), successed = false, iframeId = "i" + new Date().getTime();

  9.         div.style.display = 'none';

  10.     div.innerHTML = '<iframe id="' + iframeId + '" name="' + iframeId + '"></iframe>';   

  11.         document.body.appendChild(div);

  12.         

  13.         var hiddenIframe = document.getElementById(iframeId);



  15.         if(settings.form) {

  16.             settings.form.action = settings.url;

  17.             settings.form.target = iframeId;

  18.             settings.form.submit();

  19.         } else {

  20.             hiddenIframe.src = settings.url;

  21.         }

  22.         

  23.         var fetchData = function() {

  24.             var doc = document.all ? window.frames[iframeId].document : hiddenIframe.contentDocument;

  25.             settings.callback(doc.body.innerHTML);

  26.                 successed = true;

  27.         }

  28.    

  29.         settings.loader();



  31.     setTimeout(function() {

  32.         if(!successed) {

  33.             alert('Resquest timeout!');

  34.             fetchData = new Function();

  35.         }

  36.     }, settings.timeout);



  38.         if (document.all){

  39.                 hiddenIframe.attachEvent("onload", fetchData);

  40.         } else {

  41.                 hiddenIframe.onload = fetchData;

  42.         }

  43. }



  45. function A() {

  46.         ajax({

  47.             form: document.getElementById('f'),

  48.                 url: '1.php',

  49.                 loader: function() {},

  50.                 timeout: 3000,

  51.                 callback: function(data) {

  52.                         alert(data);

  53.                 }

  54.         })

  55.         return false;

  56. }

  57. function B() {

  58.         ajax({

  59.                 url: '1.php',

  60.                 loader: function() {},

  61.                 timeout: 3000,

  62.                 callback: function(data) {

  63.                         alert(data);

  64.                 }

  65.         })

  66.         return false;

  67. }

  68. </script>

  69. </head>

  70. <body>

  71. <form id="f" method="post" onsubmit="return A()">

  72. <input type="text" name="word" value="123" />

  73. <input type="submit"/>

  74. </form>

  75. <button onclick="B()">get_send</button>

  76. </body>

  77. </html>
复制代码
1.php



  1. <?php

  2. echo json_encode(array($_POST))

  3. ?>
复制代码

该文章在 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 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved