剑锋博客

通常，我们说Ajax程序，是借助dom文档+JavaScript来做客户端界面，后台借助其他可用的服务器端脚本生成数据源，既可以是asp，也可以是php，当然，普通html和xml也可以胜任。

而到了flash，客户端就变成flash独有的swf文件及其脚本ActionScript了。服务器端的数据源还是一样没有变。

从这个角度看，flash程序做成的动态网站，当属最早的Ajax程序了。

这两天在调试、修改Ajax网站，愈发觉得JavaScript大有可为，ActionScript大有可为。顺便记录一下零碎的知识点：

1、C#中生成GUID的方法：Guid.NewGuid()，不能直接New Guid，这样生成的字符串将全部为零。

2、显示JavaScript中catch到的错误：e.description，这是因为Error对象具备number属性和description属性。想生成一个新Error对象，可以这样：

new Error(number,description)

参数可节省。参考：http://www.wang48.com/jishubaodianview/?jsd_id=12775

ajax网站，其实核心就是JavaScript程序。

潮汕风情网有一个博客程序，是asp+ajax写成。在2006年的时候，写出这样的作品，我对程序的作者甚感佩服。

随着时间的推移，微软推出了IE7、IE8，使这个在IE6上面运行良好的网站，有些水土不服。为了调试这个程序，破费心思。后来想出了一个方法：

在页面底部加一个固定的容器，把程序的debug信息次第输出到这个容器里面。定义一个全局性debug开关，在完成调试后，把开关关闭，又能恢复正常运行。

顺便记录一下XMLHttpRequest对象的文档地址：http://msdn.microsoft.com/en-us/library/ms535874(VS.85).aspx

网站使用了XMLHttpRequest的onload事件，导致在IE8中执行出错。改为onreadystatechange事件后可以正常使用。

现在剩下图片上传问题了。

asp的图片上传漏洞飞铲难搞，正在考虑是否用asp.net的来改掉这一部分中能。反正，服务器也支持asp.net。

今早开通了腾讯微博，发现集成在QQ面板中的微博，居然用上了跟Google Reader一样的随滚动条滚动加载效果。加上近期在做人物辞条时，一些人物的资料超级长，导致页面加载缓慢，也许也是一种不错的解决方法。

Google阅读器上 有一个AJAX效果很不错，就是阅读项目时不需要翻页，浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来，一直到所有项目加载完为止。对于我来说 再好不过了，因为我很不喜欢翻页，尤其是输入页码再定位到页。要知道，数据量增加很频繁时，要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户 体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据，尤其是浏览最新的数据，利用浏览器滚动条来加载，是很好的尝试……

我试着用jquery来实现这个功能。先要得到滚动条的总长属性值：scrollHeight，还有滚动条当前位置属性 值：scrollTop。然后通过计算，若当前值位于总长值三分之二时加载新数据。假设DOM上有一个元素为<div id=”mypage”></div>，该元素overflow样式为scroll，也就是元素中的内容溢出元素指定高度时启用滚动 条。利用jquery的load方法为元素加载一个已经存在的文件，我假设它是table.html。这个文件的内容可以是足以使浏览器滚屏的一张数据表。

网页太长，一般需要设置页内锚点，方便阅读。最原始的锚点是跳跃式的，速度太快，有时反而不友好。运用JavaScript，可以做出更友好、更让人喜欢用的锚点跳转效果。

"Page Scroll" 指的是整個網頁長度的滾動, 方法有 html, javascript, jQuery.

1. 首先說到 html 的方式, 它是頁面滾動的老祖宗, 所有的後續程序開發都是以它為基礎.
說它是 "滾動", 還不如說是 "跳躍", 因為它只在錨點 (Anchor) 之間跳躍.
做法: 在頁首定位點的標簽上標明 id="top", 然後在頁腳放個 <a href="#top">goTop</a> 這就完成了.
當鼠標點擊 goTop, 頁面就會直接跳到 #top 的位置.
當然你也可以隨意多放幾個 id 和 # 鏈接, 做較多的跳躍.

2. 拜完了老祖宗, 現在進入正題, 其實 javacript 才是滾動的好手.
scrollTo() 可把内容滾動到指定的座標. 語法是 scrollTo(x,y);
左右移動用得少, 所以 x 可以直接等於 0, 我們主要是用到 y.
全部頁面的總高度: pageY=document.body.offsetHeight;
跳到頁腳是: self.scrollTo(0, pageY);
跳到頁首當然就是: self.scrollTo(0, 0);
跳到某個 id, 要先將 id 轉為座標: idY=document.getElementById('id').offsetTop; self.scrollTo(0, idY);
其中的 self = window = 當前窗口
如果有框架, 還可以用:
frame[i] = self.frame[i] = 當前窗口的框架
parent = self.parent = 當前窗口的父窗口
top = self.top = 當前窗口的頂層窗口
但別急, 現在只是和 html 的效果一模一樣, 是用跳的.
如果把 y 值設入變量, 就可以滾動了:
滾到頁腳是: for (i=0; i<=document.body.offsetHeight; i+=10) { self.scrollTo(0, i) }
滾到頁首是: for (i=document.body.offsetHeight; i>=0; i-=10) { self.scrollTo(0, i) }
滾到某個 id 就要多一個判斷, 要向上還是向下, 主要用當前座標和目標座標的差值, 這可以留給你當練習.
這樣的滾動已經相當順暢了, 但有個缺點: Chrome 是用跳的不是用滾的.
天啊! 如果 Chrome 能支援, 我們就可不用 jQuery 了.

3. jQuery 有自己的程式庫, 運行 Scroll 是輕而易舉.
jQuery(document).ready(function($) {
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // opera fix
});
上面這行是 Opera 的補丁, 少了它 Opera 是直接用跳的而且畫面閃爍.
我知道有很多人教你用 $('body') 或是 $('html') 或是 $('html,body'), 但上面那一行補丁可以通殺.
滾到頁腳是: $body.animate({scrollTop: $('#bottom').offset().top}, 1000);
滾到頁首是: $body.animate({scrollTop: $('#top').offset().top}, 1000);
有沒發現都是直接抓 id, 所以滾到某個 id 就不用計算座標了, 這是 jQuery 一大優勢, 難怪 jQuery 會這麼流行.
專心看你會發現, 這動作和上一個 javascript 的效果一模一樣啊!
沒錯, 直線速度沒什麼不同, 如果只須要滾到 #top 或 #bottom 反而用 javascript 會簡單些.
如果還嫌效果不好, 網路上有很多 jQuery 插件是改善 Scroll 效果的, 你也可以下載來試試.
最後發現有個缺點不能不說, Chrome 對座標計算還有誤差...

4. 我發現有個變速的 javascript 值得推荐.
我的主題從 A8 - A9 都是用這個 js, 我主題右邊小三角就是了.
作者: Marco Rosella URI: http://lab.centralscrutinizer.it/the-tiny-scrollings/
它主要是使用減速效果, 越接近目標速度越慢, 就像車子慢慢減速再停止, 這看起來很舒服.
感覺效果比 jQuery 好, 未壓縮 js 才 3.04k, 比 jQuery 小太多了.

上面所有的 Scroll 示例在此, 可將 html copy 回去玩玩.
注意示例要用 jQ 1.2.x 才行, 因為我是用 input 直接叫取 jQ, 所以 1.3+ 不適用.

资料来源：http://kan.willin.org/?p=1311

在开发人物词条的时候，碰到这个问题。某些领导，因为活动众多，介绍相应也多，一个页面将加载很多图片。这样一来，导致整个页面加载很慢。

有什么方法可以避免加载慢呢？

JQuery为我们提供了两种方案：预加载和惰性加载。

预加载：JQuery应用：图片依次加载代码。

$(window).bind('load', function() {
    var preload = new Array();
    $(".hover").each(function() {
        s = $(this).attr("src").replace(/\.(.+)$/i, "_on.$1");
        preload.push(s)
    });
    var img = document.createElement('img');
    $(img).bind('load', function() {
        if(preload[0]) {
            this.src = preload.shift();
        }
    }).trigger('load');
});

惰性加载：JQuery插件：LazyLoad，插件使用方式：

 <script src="jquery.js" type="text/javascript"></script>
 <script src="jquery.lazyload.js" type="text/javascript"></script>

调用：

$("img").lazyload();

两种相反的处理思想，孰优孰劣，看具体需要吧。