Archive

Posts Tagged ‘AJAX’

70个AJAX应用的演示和源码下载

August 10th, 2007

Ajallerix
: AJAX, simple, fast Web image gallery demo ; at Novell
AJAX - microlink pattern tutorial
: A microlink is a link that opens up content below it.
Ajax BBC News RSS Reader
: demo by Nigel Crawley Read more…

Docu~ , , ,

AJAX 用户注册即时检测

January 20th, 2007

AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示。

常见的用户注册是用户输入用户名,后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示(当用户注册重名时将返回重新注册),或者稍微人性化一点就是在用户名文本框后添加一个检测按钮,让用户检测后再做注册。

以上操作,对于用户体验方面来说是比较“差劲”的,一个很好的用户体验就是:当用户输入完注册用户名后,Web系统应能即时检查并即时显示,并在检查和显示的同时不影响当前页面的操作。这也就是“异步获取数据”的要求,而这正是AJAX的强项

功能展现

当输入已经存在的用户名(如cnbruce、cnrose)时页面将显示重名不能注册(false),否则将显示可以注册(true),这为用户的注册提供了快速的参考,用户体验至上。

那么下面就来说说是如何来实现这样的功能的。

其实通过如上的t1.htm的源代码,各位就可以看到AJAX的精髓

首先是定义XMLHttp对象

var xmlHttp = false;
try {
xmlHttp = new ActiveXObject(”Msxml2.XMLHTTP”);
} catch (e) {
try {
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != ‘undefined’) {
xmlHttp = new XMLHttpRequest();
}

关于这部分内容的说明 请看http://www.cnbruce.com/blog/showlog.asp?cat_id=34&log_id=987

接着是自定义函数

function callServer() {
var u_name = document.getElementById(”u_name”).value;
if ((u_name == null) || (u_name == “”)) return;
var url = “cu.asp?name=” + escape(u_name);
xmlHttp.open(”GET”, url, true);
xmlHttp.onreadystatechange = updatePage;
xmlHttp.send(null);
}

该函数的主要功能就是异步获得cu.asp的内容,在此前将先提取当前页表单元素“u_name”即用户名文本框zhogn 的值,通过cu.asp其后的参数及赋值而得到了不同的结果(true or false)。

那么这里要说的即是cu.asp,他的主要功能就是接受URL参数name的值做内容显示,该内容最终被t1.htm异步获取。


需要注意的是,从官方下载的包里,除了JS文件,还有一个很重要的文件,叫blank.html。这个文件在某些浏览器下是必须的,你必须放到你的应用程序的同一级目录下。
下面我给一个例子(注意看代码中的注释):
index.html

需要注意的是,从官方下载的包里,除了JS文件,还有一个很重要的文件,叫blank.html。这个文件在某些浏览器下是必须的,你必须放到你的应用程序的同一级目录下。

下面我给一个例子(注意看代码中的注释):
index.html




Docu~ , , ,

Lightbox

October 20th, 2006

转自http://www.joy100.com

最近很容易可以看到這個效果,也就是當您點選網頁中的圖片或連結時,背景會立即變暗並且出現 Loading… 然後跳出一個美美的方框顯示圖片或網頁,這種效果就叫做 Lightbox,底下收集了一些許多人開發或修改的 Lightbox,通常都會有 Demo,看個人喜好選擇囉。

http://www.huddletogether.com/projects/lightbox2/



Lightbox JS

典型也是最常見的一個,目前也出了 2.0 版,不過似乎只能顯示圖片而已。


ThickBox

這個也是很常見,可以顯示圖片、網頁,並且可指定方框的大小,推薦。


Greased Lightbox

提供裝在瀏覽器的擴充套件,平常看圖片時就會有 Lightbox 效果。


GreyBox

這個就厲害了,除了可以用於圖片和網頁外、連 flash、影片都可以顯示在 Lightbox 彈出的方框裡面。


Lightbox Gone Wild!

也是可以顯示網頁、圖片,效果還不錯。

Docu~ , ,