My Program ::

FireBug更新功能-Network Monitoring

好用軟體 2007/04/25 23:24

views: 101587 times
之前介紹過了一個在 FireFox 下非常好用的除錯及觀察工具, FireBug (http://diary.tw/tim/7), 前一次更新後, 發現它多了不少功能, 其中有一項特別值得提出來給大家參考的就是 Net 標籤下的 Network Monitoring 功能.

這個功能十分強大, 用看得就覺得不得了了, 之前也有介紹一個超好用的 Fiddler (http://diary.tw/tim/24), 這個強大的功能和 fiddler 不相上下, 它可以觀察整個 http request 的過程及網頁的 download 狀態, 而 fiddler 僅能用在 ie, firebug 新增的這個功能, 讓在 firefox 的用戶也有對應的工具可以做 network 傳輸上的除錯, 真的十分有用.

more..

FAV

::

::

::

TAG AJAX, FireBug, Firefox, javascript, monitoring, net, network, request, response

Trackback 0 : Comment 0

respnoseXML與responseText的不同

程式技術/Javascript 2007/04/17 10:02

views: 65729 times
幾天前, 好友問了一個問題, responseXML 沒有資料, 要怎麼解決, 我沒仔細思考, 完全沒注意到, responseXML就是一個非文字的物件, 於是寫了個程式試了一下, 發現原來 Request 回傳的內容, 若為 xml 的話, 取得 responseXML 屬性, 將會是一個 xml document 物件.

然而, 若回傳的資料並為是 well-formed xml 時, 該屬性將會是 null 而無法使用. 而一般常用的 ajax 若只是用來做畫面更新, 而非資料傳遞時, 可以參考這篇: http://diary.tw/tim/18 的例子, 是直接使用 responseText 來取回回傳的一般文字內容.

這樣應該可以清楚地解釋這兩者間的不同, 還有許多技術文章可以參考:
http://java.chinaitlab.com/server/366657.html
http://javascript.about.com/library/blajax08.htm
http://www.informit.com/articles/article.asp?p=443580&seqNum=4&rl=1

這篇的技巧也相當有用, 利用回傳的文字, 傳回 javascript, 再利用 eval 方式將變數賦值, 的確還蠻有意思的:
http://www.128kj.com/article/article6/9467334B1D15AAC57AA5F0F25D0008FF.htm?id=1343

FAV

::

TAG AJAX, javascript, response, XML

Trackback 0 : Comment 4

分享整理好的ajax套件的網站

程式技術/Javascript 2007/04/10 10:03

views: 49171 times
在HEMiDEMi看到的一個不分享不可的好網站: http://www.miniajax.com/index.htm
這個網站收集了大量ajax based的套件, 一般常見的投票, 圖表, 評分, 相簿, 特效, 上傳等, 應有盡有, 基本上他收集的幾乎都已經是可以使用的完整套件了, 而且還在一直在持續增加中, 對於各位在寫程式的程式人員來說, 真的是不分享太說不過去了.

無論是要馬上使用, 觀摩程式技巧, 組合網站或套件, 相信都會是很值得參考的網站!!

有空自己去逛逛看囉.

FAV

::

TAG AJAX, javascript

Trackback 0 : Comment 1

完成LoadAddComment插件

程式技術/TatterTools 2007/03/15 00:06

views: 80576 times
在 tattertools 中, 留言或回覆評論時, 有時候會因為網路速度較慢, 而 tt 又是使用 ajax 的方式回應, 而造成似乎沒有反應的狀況, 利用了 dynamic html 中的 div 及一個 loading 的小圖示, 開發了一個插件, 在留言或回覆評論時提示了等待的狀況, 目前尚為一個測試版本, 先給大家測試看看, 下個版本將會加入自訂訊息, 顏色邊框, 等待時間等功能, 敬請期待!

目前功能為出現在畫面正中央會有提示, 畫面如下:

more..

FAV

::

TAG AJAX, LoadAddComment, plugin, Tattertools

Trackback 0 : Comment 11

偉 2007/03/15 15:03 MODIFY/DELETE REPLY
耶~~來測試看看

Chieh 2007/03/15 21:01 MODIFY/DELETE REPLY
@@我沒看錯吧！剛剛在Google Reader看到這篇文章的訊息！第一時間就趕緊過來看！又是一次感動...Thx!!

Chieh 2007/03/15 21:15 MODIFY/DELETE REPLY
糗了...最不想遇到的情況來了！插件安裝成功...可是不知道是哪裡出問題..
當「wait」跑完之後...它還是停留在原地耶...是哪裡出了問題呢？tt不會自動重新整理...Tim兄...Help me..怎麼會這樣子..
- Timothy 2007/03/16 00:53 MODIFY/DELETE
  是指沒有成功留言嗎? 還是 waiting 後還要等一陣子才會出現? 另外請問你的 tt 是單人安裝還是多人安裝?
  剛去你網站看了一下, 你若是關閉該 plugin 的狀況下, 留言會成功後顯示嗎? 在 waiting 的更新部分仍是原來 tt 的 addComment 的程式碼耶!

Chieh 2007/03/16 13:06 MODIFY/DELETE REPLY
我的TT是單人版，留言是成功了，WAIT也會正常顯事，問題是出現在..當WAIT跑完之後...就好像訊息已經送出去了，可是...TT卻沒有自動整理畫面，要自己F5才會看到留言...不曉得是怎麼了..安裝前也是這樣子，以為使用插件之後可以解決此問題，沒想到老問題還是一樣存在..＝（
- Timothy 2007/03/16 23:11 MODIFY/DELETE
  原來是沒裝前就已經是這樣了啊, 了解. 這個插件並不會解決這個問題. 你先試著換簡單的 skin 確認一下你的 tt 沒問題(記得要備好你原來的skin哦), 再看是 skin 造成問題或某些插件 enable 起來造成的問題!!

Chieh 2007/03/17 06:02 MODIFY/DELETE REPLY
聽Tim兄這麼一說，我猜想也許是插件的可能性還滿大的，因為我昨天測試Skin還是一樣...至於插件的話...呼...那我可就有得試囉...=(

air 2007/03/17 14:27 MODIFY/DELETE REPLY
曾經在在http://i.joyep.net看過通過js的效果，點擊確定后
按鈕變為loading的圖片，無法點圖片的，這樣防止多次回復效果蠻好的哦

在提交按钮下面加个隐藏的 Loading 层,默认设置为 display:none.
在提交的时候触发一个 JS Function,让其设置提交按钮为 display:none, 设置 Loading 层为 display:block 即可.

模板：http://blog.lapland.com.cn/skin/lapland/skin.html
js：http://blog.lapland.com.cn/skin/lapland/js/ncloud_function.js

有興趣的話把這個做成插件的效果更好點

Chieh 2007/03/19 16:15 MODIFY/DELETE REPLY
Hello ! Tim兄！＝）
我終於把回覆的問題搞定了...可是花了我好幾個終於才把毛病抓出來！
原來是顯示留言者ip的插件跟111版本不合，把它拿掉後就正常了
後來又看到官方發佈112.1版，我就順便更新了，感覺還不錯喔！
後台的訊息面板現在改的比較清楚！有時間不彷升級看看喔＝）
- Timothy 2007/03/20 02:15 MODIFY/DELETE
  呼, 終於解決你的問題了, 真不錯耶, 加油, 我再找時間更新好了, 謝謝你的提醒!!

A-mao 2007/03/24 16:58 MODIFY/DELETE REPLY
GOOd

Write a comment

: 暱稱

: 密碼

: 首頁僅管理員可見

再探AJAX - 簡單小範例

程式技術/Javascript 2006/08/29 04:22

views: 73711 times
利用原來的文章: http://diary.tw/tim/18 撰寫了一個更容易測試的 html 範例, 一則以測試同步及非同步, 另一則了解在IE及FF的 AJAX Callback 的差異.

幾件事情要特別小心:

1. browser cache:
在做 AJAX Callback 時, 若是 server side 程式不強迫 client side browser 不 cache 時, IE 會發生 callback response cache 的行為, 這個會讓 AJAX 取得的回應發生問題, 當然有多重方法可以解決, 在 FF 就沒有這種現象. 比較單純而又通用解決方法就是在 callback url 上動手腳, 和一般解決 cache 的方法相同, 這裡利用了 javascript 的時間戳記來將 url 變成每次都不同. 一般的實作方法有兩個, 一個是用 Date.parse(new Date()) 方法, 但時間比較不精確(每次取回的值最後三位皆為 000, IE, FF皆同), 另一則是 (new Date()).getTime() 似乎比較精確, 這兩個方法都是傳回從 January 1, 1970, 00:00:00, local time 開始的 milliseconds. 當然, server side 加不加上 cache control 的 header 就比較不影響了, 因為每次 browser 就會乖乖地來 request.

more..

FAV

::

TAG AJAX, callback, Firefox, IE, javascript

Trackback 0 : Comment 2

alice 2006/09/04 17:09 MODIFY/DELETE REPLY
關於重覆操作行為
我發現初始時改寫成這樣就不會有問題了說
if (window.XMLHttpRequest) // if Mozilla, Safari etc
xmlhttp = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
- Timothy 2006/09/05 00:33 MODIFY/DELETE
  重新調整了一下 initial 的結構, 發現確實有效:
  
  // initial xmlhttp start..
  if (window.ActiveXObject){ // if IE
  try{
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch(e){
  try{
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  catch(e){ xmlhttp = false; }
  }
  }
  else{
  if (window.XMLHttpRequest){ // if Mozilla, Safari etc
  try{
  xmlhttp = new XMLHttpRequest();
  }
  catch (e){ xmlhttp = false; }
  }
  else{
  if (window.createRequest){
  try {
  xmlhttp = window.createRequest();
  } catch (e) { xmlhttp=false; }
  }
  }
  }
  
  if(!xmlhttp) return false;
  
  // initial xmlhttp end..
  
  於是再做一個 sample 來進行測試:
  http://sample.diary.tw/1/ajax2.htm
  
  真的在 FF 下就不會有 exception 發生了, 更好玩的是, 多次操作在 FireBug 下的 response 都會有回應, 但是在顯示的時候仍只有第二次呼的回傳結果. 推測應該是 handler 第二次被設定掉的關係(和第一次的 instance 不同).

Write a comment

: 暱稱

: 密碼

: 首頁僅管理員可見

ASP.NET的Callback實作

程式技術/.NET 2006/08/04 18:31

views: 61095 times
在ASP.NET 2.0內支援了最令人感興趣的內容, Callback功能, 雖然實務上, 可以利用多種自訂的 server side 程式實作 AJAX 功能, 但是在 ASP.NET 2.0內建的 Callback 功能還是令人激賞, 接下來我們看看如何在 ASP.NET 2.0 下實作這個 Callback 的功能. (本篇文章以 c# 為範例語言)

要實作 Callback 功能, 首先要先了解 ICallbackEventHandler 這個 interface, 該 interface 有兩個方法:

string GetCallbackResult ()
void RaiseCallbackEvent (string EventArgument)

所以要達成 callback 的物件必需繼承 ICallbackEventHandler 這個 interface 並且實作這兩個方法, 一般是寫在 Page 下, 以下為一個範例:

more..

FAV

::

TAG .net, AJAX, callback, javascript

Trackback 0 : Comment 7

子豪 2007/04/18 16:13 MODIFY/DELETE REPLY
你好:
在網路上查詢 callback ，看到你的文章，我試了一下你的寫法，
有個疑問想請教一下。

程式的跑法算是正常，但最後把 "arg 時間 222" 秀出之後，
馬上又會被清掉了。
另外，當我觸發這個 callback Event 時，它還是會跑 Page_Load 進去，
AJAX 的寫法也會如此嗎? (抱歉，我也許應該先試一下的，但我剛開始接觸 ASP.Net)

感謝你

子豪 2007/04/18 16:14 MODIFY/DELETE REPLY
Sorry ，問題沒有問清楚~~
它秀出之後，又被清掉了，這樣是正常的嗎?
- Timothy 2007/04/18 23:41 MODIFY/DELETE
  你好, 應該不會自動再被清掉耶, 請問你使用的環境及 .net 的版本?

路過的貓 2008/10/02 17:55 MODIFY/DELETE REPLY
可能晚了，不過會被清掉是因為
Button1這個按鈕必須是input 而不能是asp:button
後者會讓頁面強制刷新
- Timothy 2008/10/02 18:22 MODIFY/DELETE
  對哦. 也有這個狀況. 謝謝你的幫忙解決. 不知對子豪有沒有幫助.

庫洛洛 2009/02/14 09:20 MODIFY/DELETE REPLY
請問可不可在單頁面坐多個項目的callback
- Timothy 2009/02/14 22:06 MODIFY/DELETE
  基本上應該是沒問題的.

Write a comment

: 暱稱

: 密碼

: 首頁僅管理員可見

有趣的JSON技術

程式技術/Javascript 2006/07/30 17:46

views: 76138 times

寫 javascript 對一般的網頁程式設計人員來說, 應該是家常便飯, 舉凡一些需要在 client side 完成的事, 大多會利用 javascript 來操作, 例如滑鼠經過換色, 或是檢查 form (表單)在送出前的一些資料正確性檢查(ps. 一定要記得在 server side 也要再次檢查, 以確保資料的正確性)或方便使用者輸入的自動更正等功能.

javascript 的功能強大, 又加上高階, 物件化等特性, 使得撰寫 javascript 的程式設計人員十分愛用, 也方便許多在 client side 就可以先完成的一些動作, 再加上最近的 Ajax 風行, javascript 無疑變成十分熱門的語言.

JSON (Javascript Object Notation)相信很多人有聽過, 但也有很多人不知道這個東西, 他是附屬在 javascript 下的一組物件描述方法, 這個網站介紹十分詳細: http://www.json.org/, 有很容易了解的圖示幫助使用者了解 JSON 物件的描述方式.

JSON 是利用了成對的 {} 來包住各物件(object), 用成對的 [] 來包任各陣列(array), 用成對的 "" 來包住各字串, 用逗號來區隔各變數, 而資料型態有 string, number, array, object, 另外有三個常數, true, false, null. 下面描述了一個 object obj1 擁有兩個成員變數, 而另一個為 array 擁有 5 個 number 的範例:

{ 'obj1': {
'child1':'value1',
'child2':'value2'
},
'array1': [1, 2, 3, 4, 5]
};

more..

這裡實作一個小程式介紹兩種產生 JSON 物件的方法:
<html>
<body>
<script>
function test()
{
// test1:
var myJsonObj = {'obj1': {'child1':'value1', 'child2':'value2'}, 'array1': [1,2,3,4,5]};
alert(myJsonObj.obj1.child2); // alert value2
alert(myJsonObj.array1[1]); // alert 2

// test2:
var strMyJsonObj = "{'obj2': {'child1':'value1', 'child2':'value2'}, 'array2':[1,2,3,4,5]}";
var myJsonObj2 = eval('(' + strMyJsonObj + ')');
alert(myJsonObj2.obj2.child2); // alert value2
alert(myJsonObj2.array2[2]); // alert 3

}
</script>
<a href=# onclick=" test()">test</a><br />
</body>
</html>

上面的 test1 在 javascript 中, 直接生成了一個 obj1 物件, 並擁有兩個 member data, 分別為 child1 及 child2, 其值又分別為 value1 及 value2, 在 test1 中, 另一個 array1 陣列, 則是擁有5個數字, 直接將 JSON 描述的資料指定給 myJsonObj, 於是 myJsonObj 就可以直接取用 myJsonObj.obj1.child2 來取得 value2 的值, 用 myJsonObj.array1[1] 就能取到 2.

上面的 test2 則是利用了 eval 將字串型態的 JSON 描述資料轉為實體的物件, 要注意的地方是在 eval 的 JSON 描述字串前後要加上 () , 如此一來便能將字串描述的 JSON 物件轉為實體的物件, 所以轉好的 myJsonObj2 也可以利用 test1 的方法來取得成員變數.

利用這種描述字串的方式, 可以應用在 AJAX 的回傳物件及變數上, 可以不用 xml 的解析器, 減低在解析上的資源消耗, 在實務上也許多人推薦使用 JSON 方法來取代 xml , 當然直接取得 html code 的方式對於 web ui 的呈現上可以直接應用, 但在資料傳遞上, html 就遠不如 xml 或是 JSON 來得方便囉.

參考資料:
http://www.json.org/
http://www.json.org/js.html
http://jengdarho.googlepages.com/ajax%2Cjsonandjson-rpc
http://developer.yahoo.com/common/json.html

[2006/8/7 01:33]
另外第三種方式亦可動態評估出 JSON 物件, 是利用 function 方法, 範例如下:

// test3:
var strMyJsonObj2 = "{'obj3': {'child1':'value1', 'child2':'value2'}, 'array3':[1,2,3,4,5]}";
var myfunc = new Function ( 'return ' + strMyJsonObj2 );
var myJsonObj3 = myfunc();
alert(myJsonObj3.obj3.child2); // alert value2
alert(myJsonObj3.array3[2]); // alert 3

利用 new Function return 的方式, 將一個 function 定義出來後, 回傳該 JSON 字串內容, 並執行該 function 後, 即可取得該 JSON 描述的物件.

new Function 的參考資料:
http://www.devguru.com/Technologies/ecmascript/quickref/function_object.html
http://www.permadi.com/tutorial/jsFunc/

[2007/7/11 17:22]
JSON和.net 結合: http://msdn2.microsoft.com/en-us/library/bb299886.aspx

FAV

::

TAG AJAX, javascript, JSON, XML

Trackback 1 : Comment 1

xmlRequest更換網頁內容

程式技術/Javascript 2006/07/15 00:22

views: 52812 times
AJAX?

不就是這樣子嗎? 利用一種方法, 在不換頁的狀況下, request web 的 content 後, 進行訊息的顯示或是畫面的更新(dhtml), 這不就是 AJAX? 是的, 其實很容易也很簡單實現, 要做到不換頁更新畫面的方法就是這麼簡單.

more..

FAV

::

TAG AJAX, encodeURIComponent, javascript, XMLHTTPRequest

Trackback 0 : Comment 4

kyle 2006/07/15 02:20 MODIFY/DELETE REPLY
Hello, Tim...還有一個叫FJAX的方式,感覺可以讓js更輕鬆化....你可以參考看看..^^

http://kyle.jolin.info/tt/index.php?pl=395&ct1=4
- Timothy 2006/07/15 17:53 MODIFY/DELETE
  感謝提供參考資料, 事實上, 如你所言, ajax 的這個部分, 無論使用 javascript 或是透過 flash 做為該 request 的 provider 都是很好的應用實例, 目的就是做到不換頁就能更新資訊, 其實 flash 早期在沒有 ajax 概念時, 就是做這件事的重要工具了, 只是後來到 dynamic html 後, 變成在 client side code 可以做更多功能的時候, flash 在這個部分就比較沒有這麼效果顯著了. 不過整理好的 fjax 工具的確也是很方便的哦..

jocosn 2006/10/22 02:23 MODIFY/DELETE REPLY
‧IE 7 版後提供 XMLHttpRequest 類別建立 native object。
var request = new XMLHttpRequest();

另外 IE 好像有個 MSXML2.XMLHTTP.3.0 可以這樣建立物件：
new ActiveXObject("MSXML2.XMLHTTP.3.0")
但沒找不什麼詳細的說明。
- Timothy 2006/10/22 11:28 MODIFY/DELETE
  謝謝您的通知, 我將再試試看. IE7好像是這兩天才 release 出來的, 看來是 Vista 要上市囉, IE7 趕緊推出囉.