Colorful Life2010

AJAX在实际应用中的难题,目前还无法解决
Weather:阵雨,南风4-5级,最高气温26 ℃

  其实问题还是出在用户群最大的IE浏览器上,而对于MOZILLA系列的浏览器则没什么影响。

  我原来打算把BLOG的回复部分全部采用AJAX来实现,就是打开已回复内容,提交回复,刷新显示这三块都用AJAX来实现,但实行到第三步的时候,在IE下出了状况。

  首先,打开回复列表。这个在打开新的日志内容时用一个标识符来确定是否直接打开回复内容,因为回复内容太多的话,会对打开页面的速度造成一定的影响,特别是在文章内容本来就很多并且回复也很多的时候比较明显,那么就可以采用这样的方式,BLOG内容当然是直接显示,而回复内容则可以在进入内容后,再点击相应的链接再异步取出来,或是在打开的时候,异步把回复内容取出来,相当于打开页面时是双线程了,这样速度上也会有提高,这一点已经实现。

  第二步,提交回复,这个主要是用到了xmlhttprequest的post方法,用来模拟表单进行提交,甚至页面中都不需要有<form>标签的存在,由于我的页面是UTF-8的,所以在提交过程中也没什么问题,而如果采用的如GB2312,则要考虑一下是否会产生乱码问题了。服务器端接收send()的数据,再录入数据库,这一步也已经实现。

  第三步,刷新回复,提交了的内容总得即时的显示出来,当然我是指页面无刷新情况下,这个功能我在FireFox里面实现一点问题也没有,提交一个就会显示出来,再提交还会显示,而在IE里问题就出来了。在一篇日志里,只有第一个回复会即时的显示出来,而后来提交的,由于IE的缓存作用,不再即时显示了。所以留言者看不出到底有没有提交成功,这就会导致其多次不断地提交。但是同样的方法,在MSN SPACES上却实现了,不过其提交是采用的同步,而非异步,所以会导致页面会停滞,但不管停不停滞,至少能正常显示就行。于是去研究MSN SPACES上的BlogJs.js文件,发现其采用的是Microsoft.Xmlhttp,这个方法只有IE下有效,明显没有为Gecko内核的浏览器考虑。我这儿正研究着呢,结果这几天再去看MSN SPACES,竟然可以在FF下正常使用了,而这样成功的代价是他们放弃了无刷新提交回复,现在在MSN SPACES上提交一个回复就会刷新一下页面,并且打开回复内容也是采用的同步调用。

  问题说完了,微软也用了他们的解决方法,其实这个问题还是有解决方法的,就如原来微软的解决方法,只是其现在放弃了没用上而已。那就是直接用JS构造提交完成后的代码,这样的话,在确认服务器端已经提交成功后,再用innerHTML += strValue;的方法直接在客户端加上去。这样理论上是可以实现,但是在实际操作中有可能会引起JS错误,并且还要用JS取一些客户端信息,所以其实要实现起来还是非常麻烦的。就当是个小课题了,这个功能就暂时不加在本BLOG上了。

[AJAX在实际应用中的难题,目前还无法解决]的回复

keel 于 2005-09-02 15:49:55 发表 | IP:202.102.127.*

有一个问题想请教一下:

当我用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">的页头声明时,发现原定义的padding值会将对象的大小改变,如一个DIV,原来width为320,用过padding值,则宽度变大于320了,而直接用<html>的头就没有这个问题.

为什么padding会影响这个对象的整体大小呢?如何解决?

keel 于 2005-09-02 16:36:35 发表 | IP:202.102.127.*

还有一个不同看法想交流一下:

就是你的"第一步"中提到"异步把回复内容取出来,相当于打开页面时是双线程了,这样速度上也会有提高,",我觉得如果是回复内容并不是很多的情况下,用AJAX方式应该不会比在服务器端直接一次生成HTML发到浏览器快,原因:

1, 前者(AJAX)很明显是对服务器有两次请求,如果是查数据库,则需要两次建立数据库连接,关闭数据库连接(这里不考虑连接池)。这样比后者要多一次请求过程,多一次查数据库过程。

2. 从用户感觉来讲,页面打开后,前者一般会有一个“数据正在载入。。”的提示,做为用户来讲,当然看主题的速度是提高了,但是若要看回复,则还是要等待数据的回传。从整体页面上来讲,应该是一次比两次要快。而增加用户的操作量--(多点一次看回复),我想对用户来讲没有直接看全部好。

3.对于长页面还是用分页处理方式解决比较合适。

4.如果用户第二次刷新页面的话,前者方式还要去服务器取一次记录,而后者有可能从缓存中直接取.速度可想而知.

 

最后,我个人感觉现在评论的打开回复框按钮比原来直接显示要慢,可能是因为原来直接显示有缓存JS,而现在每次都要真的去服务器取数据???

keel 于 2005-09-02 16:47:46 发表 | IP:202.102.127.*

提交回复和显示用AJAX实现是比较合适的了,呵呵.    

 

4#   柠檬园主 于 2005-09-03 00:14:46 发表 | IP:60.20.208.*

padding的问题是因为用那个声明之后,下在的就会按照XHTML1.1来解释了,所以就可能会和不加声明的有些差异,要解决,你就得正确理解盒模型,这个在阿捷的站上有教程。

对于AJAX显示回复的问题,我也是一直心热去追求技术问题了,而没考虑那么多实际问题,感谢你的提醒和建议,其实要昼地减少数据库交互的话,还是生成静态文件来得实在,每个日记生成一个文件,这样就不存在太多的数据库交互了。嗯,以后会考虑生成文件的方式。

5#   skyphd 于 2005-10-14 20:45:52 发表 | IP:221.229.124.*

呵呵,可以把用xmlhttprequest无刷新添加数据的代码给我看看吗?我最近也在学ajax,可是经常出错,希望版主发一份到俺的邮箱里,不胜感激,

[email protected]

6#   柠檬园主 于 2005-10-14 22:34:48 发表 | IP:221.201.162.*
代码在公司的电脑上,周末了,在家是没办法了,等周一上班再给你发吧。
7#   Joe 于 2005-10-16 18:25:19 发表 | IP:221.201.165.*

檬檬,你可以参照我在摩力游(http://www.moliyo.com)里面采用的方法来达到让IE不缓存的目的(上次和你讨论过了,呵呵,我说你笨,呵呵,小笨笨柠檬):

<script>
<!--// 该函数用来加载用户登录表单,
// 如果用户已经登录,会加载个人信息,这取决于 index-login.aspx 页面。
function login() {
 var login = document.getElementById("login");
 if(window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
  // Gecko (Firefox, Moz), KHTML (Konqueror, Safari), Opera  
 } else if(window.ActiveXObject) {
  xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
  // Internet Explorer
 } else {
 return false;
}   
xmlhttp.open('GET', "index-login.aspx?now=" + new Date().getTime());
// url 后面带个 now 参数,是为了防止浏览器缓存,导致无法获取到最新的页面,这是一种折中的方法,不知道有没有更好的方法。 
xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4) {
 //alert(xmlhttp.getAllResponseHeaders());
  login.innerHTML = xmlhttp.responseText; 
  // 尝试聚焦,便于用户输入。
  var objUsername = document.getElementsByName("username")[0];
  var objPassword = document.getElementsByName("password")[0];
  if (objUsername != null) {
   // 用户名输入框中已经有值,那么聚焦到密码输入框 
   if (objUsername.value == "") { 
    objUsername.focus();
   } else {
    objPassword.focus();
   }
  }
 }
}
xmlhttp.send(null);
}
-->
</script>

8#   柠檬园主 于 2005-10-16 18:45:02 发表 | IP:221.201.165.*
你个猪你,我当然已经知道了。只是还在考虑要不要改之中。。。
9#   Joe 于 2005-10-16 18:47:41 发表 | IP:218.1.22.*
竟然编辑了我的回复,啊哈。哈哈。
10#   1223 于 2005-10-24 10:36:50 发表 | IP:220.201.32.*
31232321323
11#   柠檬园主 于 2005-10-24 19:00:08 发表 | IP:221.201.166.*
这位大哥,你还真是会玩哦~~
12#   skyblue 于 2005-11-23 20:28:15 发表 | IP:222.79.246.*

我测试看看

另外2SIMPLE这个blog 的回复就很帅

13#   柠檬园主 于 2005-11-23 21:01:01 发表 | IP:221.201.149.*

用JOE的方法已经解决了,呵呵,或是直接用一些已经封装好的框架的话,也不会存在这个问题了。

PS:你说的2SIMPLE是啥意思?

14#   某些人 于 2005-12-23 17:38:21 发表 | IP:210.22.166.*
hehehehe,
haha.
支持。
Post a Comment~