jCT与AJAX七宗罪

achun

浏览: 306079 次
性别:
来自: 河南郑州

最近访客更多访客>>

u012363178

Nicksxs

Dreamall

adoijay

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

我的资讯 ( 13)
我的论坛 ( 408)
我的问答 ( 123)

存档分类

博客分类：

Ajax Chrome JavaScript 搜索引擎编程

jCT的更多信息请看我博客里的jCT专题，或者jCT开源主页示例里面有最简单的例子

=======================================================

jCT 3完成后。基本上jCT短期内就稳定了。
剩下的就是应用问题。
虽然使用jCT不一定要使用Ajax.
不过在我的应用当中，jCT配合Ajax是能的到最大发挥的。
不过大家都知道的AJAX的使用会有一些”罪“。”AJAX 的 七宗罪 “这词出现的比较早，我引用这个词，不过在叙述”罪“的时候从新进行了一些词汇变更，至于是七宗罪还是八宗罪只是个列表问题了。
我现在并没有完全的把握和信心 在jCT与Ajax的配合上完全解决 "Ajax的罪孽 ".
有些罪已经被”赦免 "了，有些还在。
先占个位置，此贴会随着思路不断更新。
首先我认同这N宗罪确实存在（不评论是否够的上罪，应该称作麻烦更好）

其次我剔除了一些明显由代码是否优良，是否会熟练使用其他工具或者根本就和ajax根本无关的

虚妄之罪 ：有些就不发表个人意见了

编写复杂、容易出错
不容易调试
冗余代码更多
XML是个幌子
ajax不一定要用XML，这个和ajax关系不大.
破坏了Web的原有标准
可以不破坏的，破坏不破坏有技术水平问题，有时候找不到符号标准的时候就要破坏了。其实就算不用ajax,破坏也照样进行着。
世界这么大却找不到自己的家，AJAX适用于什么？能干什么？能带来什么？
ajax不是万能的，至少目前文件上传是不支持的。这个罪明显是个问句，而大家都知道有问题不一定要有答案的。

"罪孽"列表 ：

对搜索引擎的支持不好
(2008.10.18注:此方法已经通过了实践的验证)
这个是两个问题，首先是要让SE搜的到，其次是能正确链接过来，并且得到的结构要好SE的内容相符合
搜的到首先要解决的是数据SE优化的问题，这个超出了我们的话题了，
要搜的到其实很简单，初始页面上输出的body里面是有内容的，这些内容就是让SE看的，然后ajax刷新页面掉入让浏览器看的页面就行了。
能正确链接过来比较麻烦，根本还是要对给SE的body里面的A的href的url参数进行合理的设计，这个要看业务逻辑了。
重点：如果采用唯一入口 的ajax方式的话，那就有了解决的基础，SE看到的链接永远都是来自与这个唯一入口地址的，仅仅是参数不同而已，
那剩下的就是要在浏览器上从新分析这个url参数使之调出相应的数据了.
原理基本如此，实作还要看业务逻辑，我的应用目前还没有动手做这个，不过很快就会开始的。希望我能解决
今天(2008.9.28上午)终于有时间做搜索引擎的输出了 .很容易的仅仅用了两个小时就完成了,道理很简单.只要浏览器打开网站,最第一页中始终都有一个没有样式的输出结果,但是由于这个结果会在js执行的时候被替换掉,所以可能浏览器上根本没有来得及看到结果,但是如果你把js屏蔽掉就看到了,这就是给搜索引擎看的东西.
现在就可以屏蔽掉js看看 www.xxx.xxx(很遗憾，由于人事变动，我不再参与这个项目了，项目负责人又回到了古老的编程方法，回头有新的站我再给出新的地址吧) 的输出吧.其实对于搜索引擎的输出很多东西都不必要显示的,所以在xxx这个站上仅仅需要输出类表和详细信息两种行为就行了.剩下的就是如何把由搜索引擎过来的地址转换到正确的页面就行了.因为在xxx的设计中所有参数的名称和结构,ajax的方法和对搜索引擎输出的方法完全一致因此做起来相对容易,就算不一致也只不过的费点代码翻译一下就OK了.这个工作就留到下午做吧

没有back和history
最近发现通过锚点的方法似乎是最佳的方案了2011.08.05
这个也有解决方案的搜一下'Ajax 前进后退',这个用的是iframe的方法
还有dhtmlhistory.js这个开源的库
不过这些方法我都不想照搬，综合一下和jCT配套的方案:
写了一个hisStory的对象,专门用来管理hisstory,先看代码

//ajax历史控制
var hisStory={
	init:function(){//初始化iframe对象通过更改iframe的src中的参数,也就是说主要技术还是用iframe的方法
		var id='#hisStoryFrame';
		$(id).remove();
		this.at=0;
		this.his=[];
		$('body').append('<iframe id="hisStoryFrame" src="/hisstory.html?0" height="0px" frameborder="no"></iframe>');
		this.elm=$(id);
	},
	same:function(argsn,his){//判断是否是同一个刷新,同一个刷新不加历史
		var args=his||[];
		var arg=argsn[2]||[];
		var argi=args[2]||[];
		var same=true;
		if(argsn[0]==args[0] && argsn[1]==args[1] && arg.length==argi.length)
			for (var i=0;i<arg.length ;i++) {
				if(arg[i]!=argi[i]){
					same=false;
					break;
				}
			}
		else
			same=false;
		return same;
	},
	add:function(){//增加历史,其参数是第一参数是要回调的函数的this,第二参数是要回调的函数,第三参数是要回调的参数数组,
		if(this.same(arguments,this.his[this.at])) return;
		this.his=this.his.slice(0,this.at+1);
		this.at=this.his.length;
		this.his.push(arguments);
		this.elm.attr('src','/hisstory.html?'+(this.at));
	},
	go:function(url){//前进或后退
		var pos=url.indexOf('?');
		this.at=parseInt(url.slice(pos+1));
		if(!this.his[this.at]) return;


		var p=this.his[this.at][0];
		var fun=this.his[this.at][1];
		var arg=this.his[this.at][2]||[];
		if(typeof fun=='function') fun.apply(p,arg);
	},
	his:[]//历史记录数组
}

相应的hisstory.html

<!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"  xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script>
var url=window.location.href;
if(parent && parent.hisStory) parent.hisStory.go(url);
</script>
</head>
<body></body></html>

这种方法的原理就是:虽然ajax的页面是无刷新的,但是如果里面有嵌入的iframe,而iframe所指定的url变化的话,浏览器的历史后退前进就会生效,并且直接对应
iframe里的变化.hisstory.html里的javascript就是调用上级页面里hisStory对象的go方法进行对应的处理.
关键在于使用时,再什么时候调用hisStory.add方法?这个要看应用和业务逻辑了.
hisStory.init的调用就简单了,当页面上的body被更新后就调用,而且要保证以后iframe不会被覆盖掉,这是个简单DOM组织问题了.

用户刷新当前页面，如何保证刷新后的页面与刷新前保持一致
找到了思路，现在还没有实现，这个方法就是利用window.name属性具有长生命周期的特点。看了这个属性还应该有很多的其他可利用价值，比如说当数据缓存用。要好好考虑一下
任由内存溢出
这个虽然根源来自javascript实现，不过确实不容易解决，这应该是个专题
多个异步XHR完成不同的任务，如何保证当前context中的数据的独占或者lock
引用JE上的回答：

醒来写道

包含业务逻辑，自然是要自己编程解决。

dlee 写道

对每个需要保护的内容，设置一个 flag，实现排它锁的机制。
对于我来说也有一个解决办法就是降低前后台业务逻辑上的耦合度,前后台细粒度数据通讯的方法

分享到：

jCT 3正则版测试,正则就是慢 | nicEdit 的使用问题

2008-09-08 20:33
浏览 2484
评论(21)
论坛回复 / 浏览 (21 / 8499)
分类:Web前端
查看更多

21 楼 achun 2008-10-26

用户刷新当前页面，如何保证刷新后的页面与刷新前保持一致
找到了思路，现在还没有实现，这个方法就是利用window.name属性具有长生命周期的特点。看了这个属性还应该有很多的其他可利用价值，比如说当数据缓存用。
这个想法来自
使用window.name解决跨域问题

如何更好的利用这个属性真要好好考虑一下。

20 楼 achun 2008-10-18

我的ajax下的搜索引擎支持方案得到了时间的验证.
此段文字被删去了，原因：
很遗憾，由于人事变动，我不再参与www.xxx.xxx这个项目了，项目负责人又回到了古老的编程方法，这个网站已经不采用我的技术了，回头有新的站我再给出新的地址吧。

19 楼 achun 2008-10-06

<div class='quote_title'>walkman 写道</div>
<div class='quote_div'>如果ajax要兼容se只能是：首先开发出无ajax的可用页面，然后在这个基础上加ajax，屏蔽所有参与了ajax的<a>的原有功能，也就是点击的时候 return false;<br/><br/>我以为。。。</div>
<p> </p>
<p>我的方法和你说的类似,不过更极端.</p>
<p>鉴于se不执行js.</p>
<p>所以,页面上不执行js的时候是有内容的,这些内容就是优化后让se爬的.而在浏览器上,因为js执行了,所以那些让se爬的内容全部都丢弃了.也就是说,se看的内容和浏览器执行js看到的内容是不一样的,se和浏览器的数据分离了.</p>
<p>貌似我的方法到处都在解耦.</p>

18 楼 walkman 2008-10-06

如果ajax要兼容se只能是：首先开发出无ajax的可用页面，然后在这个基础上加ajax，屏蔽所有参与了ajax的<a>的原有功能，也就是点击的时候 return false;

我以为。。。

17 楼 achun 2008-09-28

搜索引擎的输出问题已经解决一半,已经编辑了首贴,请细看相关部分

16 楼 biubiu 2008-09-22

3和4其实是同一个问题，看看gmail怎么解决的：使用#让每个链接都有唯一的地址。

15 楼 achun 2008-09-21

<p>chrome历史后退问题解决了，方法很简单。hisstory.html的内容.</p>
<pre name='code' class='html'><!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" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script>
var url=window.location.href;
if(url.indexOf('?') && parent && parent.hisStory) parent.hisStory.go(url);
var at='';
function reload(by){
at=by;
setTimeout(function(){
window.location.href='/hisstory.html?at='+at;
},0);
}
</script>
</head>
<body>
</body>
</html></pre>
<p> 看见上面的reload中的setTimeout了么！</p>
<p>我在上级页面调用这个就行了。如果不用setTimeout,由上级直接改写href的话，会被认为是unsafe的。欺骗浏览器真是容易呀！</p>

14 楼 achun 2008-09-21

<div class='quote_title'>hax 写道</div>
<div class='quote_div'>
<div class='quote_title'>achun 写道</div>
<div class='quote_div'>刚刚发现现在的chrome不支持ajax用iframe方法解决历史后退的方法，<br/>不知道正式版会不会解决这问题。</div>
<br/><br/>chrome有可能支持了html5的history支持，可以尝试看看。</div>
<p> </p>
<p>我刚才又仔细debug了一下，发现可能是代码写的有问题，和chrome不兼容</p>
<p>我估计是iframe的写法问题。我改改试试。</p>
<p>ps:果然，经过测试发现，iframe的src如果通过js改变的话,hisstory是不生效的，这个问题safari上也有。暂时没有想出解决的办法！</p>
<p>难道让我在建立一个a标签，模拟a的点击行为？</p>

13 楼 achun 2008-09-21

<div class='quote_title'>xxpniu 写道</div>
<div class='quote_div'>在用户体验上你不能不说ajax很好.<br/>但是如果一个新事物(暂且说是新的)不能去遵循老规矩.不能用老规矩的理论来约束新的事物.<br/>如果你做管理系统,后台之类的.ajax在操作方面帮助很大. 从最简单的autocomplete看起我想这个就是一个很大的进步. <br/>确实在seo方面数据的分层加载的话不能搜索到. 不过目前没有碰到咨询类的网站使用ajax的异步显示.<br/>ajax的核心是xhr但是ajax的具体体现可不是这样一个简单的东西.<br/>强大的前台js库能达到您想不到的效果.<br/>我们现在的公司后台大量使用ext框架.数据传输全是json,或许的话我是这样去实现ajax.<br/>楼主的理解可能和我有出入.<br/>既然是异步的话我们就没有必要去处理后退的问题. 上一步的操作可能更加好?<br/>如果楼主真的有使用ajax编写的b/s管理系统的经验或许感言方面不会这么片面(容许我这样描述)<br/>呵呵,ajax提供的一个全新的理念,不只是简单的一个异步,是一种全新b/s 编程. 对程序员来说是一种挑战</div>
<p> </p>
<p>没有看明白你要表达什么。</p>
<p>上面列出的问题，就目前的环境来说，是实实在在的问题，在新的技术没有出来前，我们还是自己想办法解决吧。不能等呀！</p>
<p>seo在ajax下是可以解决的，这个以前我就做过实验，事实上google完全可以搜的到，baidu不行，那就是说策略是没有问题的，关键是细节处理上问题了。关于是如何解决的。具体方法就是我上面说的，现在正在做的站点还没有完成，我还要做flash 编程........苦呀！从来没有做过flash耽搁时间了。等seo支持出来了，我会详细解释的。</p>
<p>我后台传输的当然也全都是json了。</p>
<p>我确实没有做过b/s管理系统的经验。</p>
<p>从个人意愿来说，我不喜欢做b/s管理系统，因为做这个多数是给别人做的，不能想怎么做就怎么做，而我做的网站都是自己做，自己运营的，想怎么做就怎么做。我目前的着眼点仅仅是普通的网站。所以当下对于AJAX的运用完全是围绕普通网站进行的。</p>
<p>c/s的管理系统以前倒是做过几个。什么非在线医保管理，市场税费管理，医院门诊收费等2层结构的应用。</p>
<p>从我的认识来说，这些都能b/s化，而且会更灵活，灵活的原因不是做起来方便，而是b/s的东西可以团队来做，相对c/s的团队做起来就牵扯比较多，</p>
<p>所以这才是c/s->b/s最大的优势，人多力量大，而不是什么ajax之类的能带来多少好处。</p>
<p>另外管理系统主要复杂在业务逻辑上，不是UI。UI的问题总是能模式化解决的。业务逻辑不行，必须具体对待。</p>
<p> </p>
<p>另外后退和上一步是不同的，上一步可能很深，可是后退不一定了。而且后退也不是ctrl+z,对于浏览器行为来说。后退才是符合用户习惯的，上一步不是。你仔细看看浏览器后退的逻辑就明白了。</p>
<p> </p>

12 楼 hax 2008-09-21

achun 写道

刚刚发现现在的chrome不支持ajax用iframe方法解决历史后退的方法，
不知道正式版会不会解决这问题。

chrome有可能支持了html5的history支持，可以尝试看看。

11 楼 xxpniu 2008-09-20

在用户体验上你不能不说ajax很好.
但是如果一个新事物(暂且说是新的)不能去遵循老规矩.不能用老规矩的理论来约束新的事物.
如果你做管理系统,后台之类的.ajax在操作方面帮助很大. 从最简单的autocomplete看起我想这个就是一个很大的进步.
确实在seo方面数据的分层加载的话不能搜索到. 不过目前没有碰到咨询类的网站使用ajax的异步显示.
ajax的核心是xhr但是ajax的具体体现可不是这样一个简单的东西.
强大的前台js库能达到您想不到的效果.
我们现在的公司后台大量使用ext框架.数据传输全是json,或许的话我是这样去实现ajax.
楼主的理解可能和我有出入.
既然是异步的话我们就没有必要去处理后退的问题. 上一步的操作可能更加好?
如果楼主真的有使用ajax编写的b/s管理系统的经验或许感言方面不会这么片面(容许我这样描述)
呵呵,ajax提供的一个全新的理念,不只是简单的一个异步,是一种全新b/s 编程. 对程序员来说是一种挑战

10 楼 achun 2008-09-14

刚刚发现现在的chrome不支持ajax用iframe方法解决历史后退的方法，
不知道正式版会不会解决这问题。

9 楼 achun 2008-09-10

ajax下的历史前进后退方案出台,具体内容见首贴

8 楼 achun 2008-09-09

<div class='quote_title'>xiaocon 写道</div>
<div class='quote_div'>现在明白了，不过我觉得你可能因为是自己写的代码，很多东西可能会想当然地觉得别人会明白．建议写个全面点的例子来解释下jct的运行过程，使用方法，这样才会使大家更放心，明白地去使用它，否则造成了别人的学习成本，别人还不一定愿意花这个时间．</div>
<p><br/>恩!接受,重新编辑了这个<br/><a href='../../../../../../topic/235645'>jCT 使用教程之[嵌入模板]</a></p>
<p> </p>

7 楼 xiaocon 2008-09-09

现在明白了，不过我觉得你可能因为是自己写的代码，很多东西可能会想当然地觉得别人会明白．建议写个全面点的例子来解释下jct的运行过程，使用方法，这样才会使大家更放心，明白地去使用它，否则造成了别人的学习成本，别人还不一定愿意花这个时间．

6 楼 achun 2008-09-08

<div class='quote_title'>xiaocon 写道</div>
<div class='quote_div'>数据变化了啊，所以表格一类的要重新画一下再给客户使用,所以这里数据变化了，你的jct是如何处理的?</div>
<p><br/>原来你说的是这个意思呀！</p>
<p> </p>
<p>数据变化根本就不需要重新Build呀！</p>
<p> </p>
<p>再阐述一下，</p>
<p>var instance=new jCT(txt);//构建jCT对象,仅仅准备基础数据，txt就是模板源文件
，这时候的instance根本就是个空壳，还是一堆原材料<br/>instance.Build();//这才是真正的自构建，这时候instance才有血有肉，模板里的代码才成为了javascript的函数和数据对象。</p>
<p> </p>
<p>而要运行出设计时候所期望的结果，一般来说是要付给数据的。<span style='font-size: small;'><span><strong/></span></span></p>
<p><span style='font-size: small;'><span><strong>GetView</strong>
</span>
</span>
<span style='font-size: small;'><span style='font-weight: bold;'>保留方法</span>
</span>
<span>,获取装配数据后的表现代码</span></p>
<p>靠的就是这个GetView,给他数据很简单</p>
<p> </p>
<p>instance.GetView(tabledat);</p>
<p> </p>
<p>就行了，不过要注意的是tabledat这是个变量的名字如何被模板里的代码引用呢？</p>
<p> </p>
<p>让我把上面你的例子的代码写完整。</p>
<p> </p>
<pre name='code' class='html'><table>

<tr>


<td class="aa">+-其他数据-+</td>

<td class="bb">+-row[j]-+</td>


</tr>

<tr><td>sum:+-sum-+</td></tr>
</table></pre>
<p>instance.GetView(tabledat)得到的结果当然是一段html代码了，比如你要把这段代码打入到<div id='ele'>里</p>
<p> </p>
<p>那就是</p>
<pre name='code' class='html'>getElementById('ele').innerHTML=instance.GetView(tabledat);</pre>
<p>了，如果数据发生了变化当然不需要重新Build了。再次</p>
<pre name='code' class='html'>getElementById('ele').innerHTML=instance.GetView(tabledat);</pre>
<p> </p>
<p>就行了。</p>
<p> </p>

5 楼 xiaocon 2008-09-08

数据变化了啊，所以表格一类的要重新画一下再给客户使用,所以这里数据变化了，你的jct是如何处理的?

4 楼 achun 2008-09-08

xiaocon 写道

如果我要rebuild,该如何处理？

jCT3采取的策略是：
jCT生成jCT实例的时候根本就不去Build他，什么时候需要Build，使用者自己决定,
并且，jCT生成jCT实例的时候把模板源代码存入了jCT实例的Fn.Src内。
使用这什么时候需要ReBuild，就什么时候执行Build好了，想Build几次就Build几次。

不过你说的Rebuild，是这个意思嘛？还是某种需求？

3 楼 xiaocon 2008-09-08

如果我要rebuild,该如何处理？

2 楼 achun 2008-09-08

<div class='quote_title'>xiaocon 写道</div>
<div class='quote_div'>我还没明白到底是前台的模板还是javascript的模板，不好意思，我可能太笨了．<br/><br/>我给个例子，一个表格，若干条记录，表格某列的数据根据记录中的某字段动态变化，内容和ＣＳＳ(或者ClassName)也动态变化,最后生成一例合计，最后最底下也生成一行合计，可能是内容的concat,也有数值的合计，也有行数的统计，这样的要求JCT怎么来写这个模板和相关的javascript来供调用呢？</div>
<p><br/>我说的前台的模板就是用javascript写的程序来解析执行的模板，也就是javascript模板或者javascript前台模板（因为别人有后台的实现，不过还是在前台运行）。</p>
<p>你说的求和统计类似这样</p>
<p> </p>
<pre name='code' class='html'><table>

<tr>


<td class="aa">+-其他数据-+</td>

<td class="bb">+-row[j]-+</td>


</tr>

<tr><td>sum:+-sum-+</td></tr>
</table></pre>
<p> </p>
<p>动态变化变化的事情，要看细节了。不过从上面的代码可以看出，这根本就是全javascript的变种嘛！</p>
<p>你没有给出数据的对应关系，不过我估计也就是几条if语句罢了</p>

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论