blog.Ring.idv.tw

Ajax

Comet - The Next Generation Ajax 2.0

Comet - The Next Generation Ajax 2.0」.這個標題看起來似乎很聳動!!! 嗯~ 筆者是從Comet and Reverse Ajax: The Next-Generation Ajax 2.0這本書籍借來的~ (感覺這本書我應該要帶回家了~ XD) ~ 那何謂Comet?

先回顧一下2005年2月18日的那天~ 在Web的領域上出現了一個新的名詞,它叫做「Ajax」,這個名詞是由「Jesse James Garrett」所發表的一篇「Ajax: A New Approach to Web Applications」所提出來的~ 它為整個Web Application帶來了「Asynchronous」的新體驗~ 從那時候學術上就多了很多篇Ajax相關的論文了~ 因為利用「Ajax」我們可以開發「幾乎接近」Desktop Application的操作模式~ 嗯~ 一切聽起來似乎很美妙~ 不過它和本文所提供的「Comet」有何關係?

這裡我們舉一個例子來說明~ 假設我們直接用「XHR」和「setInterval」這樣的「polling」機制來打造一個「Chat Web Application」~ 不過問題來了~ 大多數Web Server所實作的技術不是採用Thread就是Process來處理Client的請求~ 但這樣的「Polling」機制將會造成後端伺服器常常會忙碌於處理無謂的請求~(因為沒有人發言聊天,它還是會持續送請求給後端伺服器,以致於浪費資源),所以我們需要一個「Push」的技術來避免類似這樣無謂的請求~ 但「HTTP」終究是一種「Connectionless」的通訊協定~ 那該如何達成這樣的應用呢?用Flash中的Socket嗎?雖然Flash Player在目前的佔有率達到了99%(Flash Player Statistics),但終究不是百分之百~ 所以在2006年3月3日的這天~ 由領軍「Dojo - JavaScript Toolkiet」Project的「Alex Russell」在他的Blog發表了一篇「Comet: Low Latency Data for the Browser」,這個時候「Comet」就正式被提出來了~ 基本上「Comet」和「Ajax」這兩個名詞都不是代表某一項技術~ 而比較像是代表「某幾項」技術的集合而創造的~ 因為這樣比較好溝通~ 所以像GMail裡面所整合的GTalk功能~ 其實就是採用Comet來達成的~ 想當然這個名詞被提出來了~ 學術上又會開始產生這些相關的論文了~ 比較相關的有「2007 - A Comparison of Push and Pull Techniques for AJAX」、「2008 - XVSMPBayeux A Protocol for Scalable Space Based Computing in the Web」... 先寫到這~ 有空再介紹一個實例及詳細的細節~或者您對Comet有任何心動的話~ 請參考相關資源 :p

最後本文如果有任何謬誤的地方~ 請不吝給予指正,謝謝。

相關資源

HTTP Streaming - Ajax Patterns

Chunked transfer encoding

Comet Architecture

Asynchronous HTTP Architecture

Comet Daily (朝聖之地!!)

Cometd.org

java.net: Developing Applications Using Reverse Ajax

Asynchronous HTTP and Comet architectures - 很讚的資源!

How to implement COMET with PHP

Continuations - Jetty - Codehaus

Server Push and Server Sockets

Ajaxian: IFrame + Script Tags = Portable Comet

Hello Bayeux

Comet: Reverse Ajax for streaming data from the server

Jetty cometd(Continuation)学习笔记

Ajax Dojo Comet Tutorial

Write scalable Comet applications with Jetty and Direct Web Remoting - 詳解

2008-12-22 21:50:56 | Comments (1)

Python Server Pages - Fruit Suggest

今天處理了一台伺服器~ 整個給它重灌Debian 4.0r4~ 因為這台伺服器先前被SSH-Attack~ 所以連IP都被封鎖住~

所以千萬別認為裝了「SSH」就絕對安全~ 因為總是有「無聊」的人會利用工具來做「暴力字典攻擊法」想辦法入侵... 所以防火牆的設定是不可少的~ 真搞不懂為什麼有人那麼「無聊」..= ="(我時間都不夠用了~)

好了~ 這不是重點~ 這篇的重點在於測試一個「Python Web Application」~ 我給它的主題就叫做「Fruit Suggest」~ 從名稱來看就知道和「Google Suggest」脫離不了關係~

是的~ 這個範例會結合「Python Server Pages」、「SQLite3」、「YUI Ajax」、「Google Suggest」和「PSP Template」,並且在「Debian Linux」的環境下執行~

我想~ 用一個最實際的簡單案例就是最好的驗證!!

不過~ 一開始還遇到許多問題~ 由於「Debian 4.0r4」預設是安裝「Python 2.4.4」版本~ 但是~ 我想用最新的「Python2.5」來執行這樣的環境~ 畢竟它有整合了「SQLite」~

所以要處理解決「Python2.5」的環境~ 筆者採用自行編譯「mod_python」的方式來處理~ 所以捨棄apt安裝「libapache2-mod-python」的方式~

如果你也需要這樣的解決方案~ 請參考「Jason R Briggs · mod_python and python2.5」的說明~

Fruit Suggest

.htaccess

SetHandler mod_python
PythonHandler mod_python.publisher
PythonDebug On

<Files ~ "\.(gif|html|jpg|png|js|css)$">
   SetHandler default-handler
</Files>

index.html

<html>
<head>
<title>Fruit Suggest</title>
<script src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/event/event-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js"></script>
<style type="text/css" media="screen">
			body {
				font: 11px arial;
			}
			.suggest_link {
				background-color: #FFFFFF;
				padding: 2px 6px 2px 6px;
			}
			.suggest_link_over {
				background-color: #3366CC;
				padding: 2px 6px 2px 6px;
			}
			#search_suggest {
				position: absolute; 
				background-color: #FFFFFF; 
				text-align: left; 
				border: 1px solid #000000;			
			}		
</style>
<script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>
</head>
<body>
		<div style="width: 500px;">
		<h3>Fruit Suggest</h3>
			<form id="frmSearch">
				<input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest();" autocomplete="off" />
				<input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" /><br />
				<div id="search_suggest">
				</div>
			</form>
		</div>
</body>
</html>

ajax_search.js

function searchSuggest()
{
	var callback = {
		success: function(o)
		{
			var ss = document.getElementById('search_suggest')
			ss.innerHTML = '';
			var str = o.responseText.split("\n");
		
			for(i=0; i < str.length - 1; i++)
			{
                                if(str[i] != "")
                                {
                                        var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
                                        suggest += 'onmouseout="javascript:suggestOut(this);" ';
                                        suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
                                        suggest += 'class="suggest_link">' + str[i] + '</div>';
                                        ss.innerHTML += suggest;
                                }

			}
		},
		failure: function(o)
		{
			alert("Ajax failed!");
		}
	}
	var str = escape(document.getElementById('txtSearch').value);
	var transaction = YAHOO.util.Connect.asyncRequest('GET', '/ajax/ajax/index?search=' + str, callback, null);
}

//Mouse over function
function suggestOver(div_value) {
	div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
	div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
	document.getElementById('txtSearch').value = value;
	document.getElementById('search_suggest').innerHTML = '';
}

ajax.py

from mod_python import apache, psp
from cgi import escape
import sqlite3

def index(req):
	req.content_type = 'text/html'
	template = psp.PSP(req, filename='suggest.tmpl')
	_uid = req.form.getfirst('search')
	_uid = escape(_uid)+'%'
	conn = sqlite3.connect('/var/www/ajax/data.dat')
	c = conn.cursor()
	c.execute('select name from fruit where name like :who', {"who": _uid})
	res = c.fetchall()
	template.run({'search':res})

suggest.tmpl

<%
for f in search:
%>
<%=f[0]%>
<%
%>

data.dat (sqlite)

Fruit table的結構如下:

create table fruit(
	id int,
	name varchar
)

insert into fruit values (1,'apple')

Fruit Suggest 範例下載

Fruit Suggest.zip

參考資源

打造屬於你自己的Google Suggest!

2008-10-02 02:55:52 | Comments (2)

Submit, but No Page Refresh!!

自從2005年Jesse James Garrett提出了「Ajax: A New Approach to Web Applications」之後~ 使得網路應用程式蔚為風潮~

更完全巔覆「<form>...</form>」的操作模式~ 取而代之的則是一大堆「Document Object Model」~

重點來了~ 我們來考慮下述這一個情況:

<script>
function doSearch()
{
	var value = document.getElementById("keyword").value;
	alert(value);
}
</script>
<input type="input" id="keyword" size="15"/>
<input type="submit" value="search" onClick="doSearch();"/>

這個簡單的頁面測試,若是在IE上執行的話~ 當我們在文字輸入欄位填入一些關鍵字之後~ 接著直接按鍵盤上的「Enter」~ IE會為我們馬上提交送出!

然而~ 在Firefox卻不是那麼回事~ 你會發覺同樣的程式及語法在Firefox上按「Enter」之後~ 根本毫無作用~

這對於使用者的操作行為的確會造成大問題~ 因為使用者習慣在輸入文字之後~ 通常會直接按下「Enter」送出資料~

好了~ 或許有人會說那乾脆用「<form>...</form>」的方式來處理不就好了~ 的確~ 這能解決一部份的問題~ 但,如果你的網頁應用程式是採用「Ajax」技術的話~ 怎麼可以讓頁面Refresh呢!! 這不就又走回頭路了...

所以~ 我們需要一種方式來解決這樣的問題~

由於今天剛好在開發Ajax應用程式~ 未來的「Swiler」線上版應該也會用到~ 所以花了一點時間嘗試著解決這樣的問題~

Submit, but No Page Refresh!!

<script>
function doSearch()
{
	var value = document.getElementById("keyword").value;
	alert(value);
	return false;
}
</script>
<form onSubmit="return doSearch();">
<input type="input" id="keyword" size="15"/>
<input type="submit" name="dowiki" value="search"/>
</form>

我的解法只是用了個小技巧~ 仍然採用「<form>...</form>」的方式~ 重點就在於我加了個「onSubmit="return doSearch();"」,並且「doSearch()」這個Function是永遠回傳「false」,如此不就達到「Submit, but No Page Refresh!!」~ 開開心心地去用「Ajax」吧~ ^^v

2008-05-13 01:11:24 | Comments (2)

Google AJAX Search API

Google提供了一組Google AJAX Search API,可以將它整合到自己的Blog中~ 提供的功能還包含了Local Search、Multimedia Search,比先前的Google Search API所提供的功能多了不少~

如果你想客製化地整合到Web上~ Miro, Ajaxlets and the Google Custom Search API這篇文章有提供一些實用的範例~

2007-10-16 12:11:35 | Add Comment

Ajax加法驗證法

為了防止再被垃圾回應(CAPTCHA - 我的加法驗證法被破了~),趁著今天剛好有點空閒,我將加法驗證法簡單的改成Ajax來實作,簡單來說就是想防止它人直接剖析HTML來做自動化的回應,不過不曉得能不能有效的防禦~ 希望它經得起時間的考驗!

2007-09-29 09:08:43 | Comments (1)

Previous Posts
Copyright (C) Ching-Shen Chen. All rights reserved.

::: 搜尋 :::

::: 分類 :::

::: Ads :::

::: 最新文章 :::

::: 最新回應 :::

::: 訂閱 :::

Atom feed
Atom Comment