分類: Javascript

respnoseXML與responseText的不同

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

然而, 若回傳的資料並為是 well-formed xml 時, 該屬性將會是 null 而無法使用. 而一般常用的 ajax 若只是用來做畫面更新, 而非資料傳遞時, 可以參考這篇: https://diary.tw/archives/274 的例子, 是直接使用 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

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

在HEMiDEMi看到的一個不分享不可的好網站:

http://www.miniajax.com/index.htm

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

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

有空自己去逛逛看囉.

動態寫入popup視窗內容

在利用瀏覽器發出提示訊息時, 可以利用 window.alert(‘message’); 的方式來進行, 但功能過於單調而能呈現的效果較少, 若是要呈現一些圖片或較多的訊息時, 可以利用 popup 視窗的方式(不過要注意快顯封鎖問題).

接下來我們來看一下如何利用 popup 視窗來動態產生訊息.

利用 window.open 開啟一個新的視窗, 利用傳回的視窗實體, 進行對該視窗的文件(document)開啟並進行寫入內文的動作. 整理測試的程式碼如下:

<script>
var popwin = window.open("", "", "top=10,left=10,width=250,height=250");
popwin.document.open();
popwin.document.write("this is a test text<br>");
popwin.document.write("this is second line<br>");
popwin.document.close();
</script>
閱讀全文 “動態寫入popup視窗內容”

全域form變數的取得

在寫網頁全域 javascript 的部分, 由於 ie 可以很容易的解析全域型變數, 也造成有些網站在實作 client javascript 時, 會發生一些問題.

基本上在網頁上存取頁面元件時, 可以利用 DOM 的方式進行, 以免發生跨瀏覽器的問題, 以下為一些常見的狀況. 例如頁面上有個唯一的 form, name為 f1 時, 通常會有人這麼寫:

f1.submit();

閱讀全文 “全域form變數的取得”

最近HEMiDEMi有點慢

由於在右側有引用了 HEMiDEMi 的最近書籤, 但因為在網路尖峰時間, HEMiDEMi 有點慢, 也會造成本網頁的負擔, 於是乾脆自行寫個快取機制來解決這個問題.

做法很單純, 我實作了一支小程式, 利用 php 去取得原來 javascript 內的網址內容:

http://www.hemidemi.com/digest/user/timhuang/bookmark/recent

再來就是存在本地檔, 利用了 filemtime 來取出檔案的修改時間, 並與現在時間比對, 若久於一定的時間(目前訂為 1200秒), 就重新再取, 否則就直接用快取檔案的內容, 如此一來便能大幅加速這個在尖峰時間的 javascript 下載慢速的問題.

所以原來的 <script type=”text/javascript” src=”http://www.hemidemi.com/digest/user/timhuang/bookmark/recent”></script> 就被改為引用實作好的 cache php 檔案: <script type=”text/javascript” src=”https://diary.tw/skin/customize/1/hemidemi.php”></script> 如此一來, 該 php 就會依上述工作方式來進行工作.

實作完成後, 覺得要多加個統計來找出 cache 的比例, 於是再利用了另一個檔案記錄 cache 和總使用次數, 並例在該 HEMiDEMi 區域, 如下:

其中前面的數字代表使用 cache 的, 後面為總使用次數, 這樣看起來蠻好的…

[2006/10/4 23:46]
再新增讓使用者知道是利用 cache 出來, 或是真實去 HEMiDEMi 取得內容的狀況, 會出現 Cached 及 Real 兩種說明:

[2006/10/9 16:46]
為了能讓 cache 效能更發揮, 調整 cache 時間為 6小時, 所以 Real 的機會更低囉..

 

SyntaxHighlighter – 語法高亮標記

在 “懶懶喵日記” 那裡看到一個不錯的 client 工具, dp.SyntaxHighlighter, 因為之前也想在網頁上呈現一些程式碼, 而看起來也希望能達到比較像程式碼的方法呈現, 所以就來試用了一下, 該網站連結:

http://www.dreamprojections.com/syntaxhighlighter/

使用這個 javascript library 的好處是對 server side 沒有負擔(因為都丟到 client side 去做了), 而且對於大部分的應用領域來說都非常足夠了, 功能很多, 支持的語法有:

1. C#
2. CSS
3. C++
4. Delphi
5. Java
6. JavaScript
7. PHP
8. Python
9. Ruby
10. SQL
11. Visual Basic
12. XML / HTML

而且還有指定行, 顯示行(line #), 顯示列(col #), 動態展開, 看原始內容(利用 textarea 新開視窗), 列印等不錯的功能, 但是還是有一些些缺點, 例如無法指定大小(預設是全部程式碼顯示的高度及所在區域的全部寬度, 所以寬度可以自行利用 html 語法再調節, 但高度沒辦法, 有篇類似的方法, 可以參考這篇文章: http://bbs.toseek.info/cgi-bin/topic.cgi?forum=3&topic=36 ), 但真的還是很好用的一組 Syntax Highlighter, 所以推薦給大家囉, 目前也已應用在 sample.diary.tw 網站上, 例如: http://sample.diary.tw/2/chart1.php , 未來應該會多利用這組程式碼來作為顯示程式碼的工具囉!
使用方式很簡單, 下載該組件後, 在要使用的頁面上加入:

css:

<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link>

javascript 函數:

<script language="javascript" src="Scripts/shCore.js"></script>
<script language="javascript" src="Scripts/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>

其中 css 可自行參考如何放置, 在 javascript 則是要含入 shCore.js 後, 再含入 shBrushXXX.js 其中 XXX 為要使用的程式語法, 如 Xml, Cpp 等. 接下來就是要一行起始指令:
dp.SyntaxHighlighter.HighlightAll(‘code’);
其中的 ‘code’ 為要 highlight 區域 (textarea) 的名稱, 所以要使用就用
<textarea name=code class=c>….</textarea>
其中的 name 就指定為 code 即可, 而 class 則為要 highlight 的程式語法名稱對應的 class 即可, 另外尚有幾個功能用參數如下:

1. Smart tabs
2. First line
3. Expand code
4. Show columns
5. No gutter

可以再參考說明, 例如希望顯示預設先不展開, 可以這樣下:
<textarea name=code class=c:collapse>….</textarea>

呈現結果很不錯哦, 如下:

請大家多多利用!
本篇文章的 sample 可以參考: http://sample.diary.tw/3/cpp.php

延伸閱讀: http://www.cnblogs.com/unruledboy/archive/2005/06/28/HTMLHightLightCS.html

 

再探AJAX – 簡單小範例

利用原來的文章: https://diary.tw/archives/274 撰寫了一個更容易測試的 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.

閱讀全文 “再探AJAX – 簡單小範例”
分類
blog服務

新增HEMiDEMi文章加入書籤功能

今天才發現 HEMiDEMi 有個將網頁加入HEMiDEMi書籤的功能, (其實是從這個網頁發現的: http://blog.yam.com/syshen/archives/1410294.html), 於是就著手加自己的文章, 利用 HEMiDEMi來加點人氣, 並方便用戶收藏.

連上HEMiDEMi選右上角的[工具], 再選[小貼紙產生器]後, 即可進行小貼紙的產生, 由於它沒有直接 support TT 的 blog 語法, 所以就選其他囉, 不過奇怪的是其他的 href link 最後是 void((URL))這樣的語法, 想說是不是什麼新東東, 自行先測試發現並不會發生連結的結果, 於是就先手動改一下, 並改為用 onmousedown方式(不用onclick原因如後), 產生放在 TT 上用的 HEMiDEMi 的語法, 如下:

<a href=# target=_blank  onmousedown="desc='';via='';if(document.referrer)via=document.referrer;
if(typeof(_ref)!='undefined')via=_ref;
if(window.getSelection)desc=window.getSelection();
if(document.getSelection)desc=document.getSelection();
if(document.selection)desc=document.selection.createRange().text;
this.href='http://www.hemidemi.com/user_bookmark/new?
title='+encodeURIComponent('[ ##_article_rep_title_## ]')+'&url='+
encodeURIComponent('https://diary.tw[ ##_article_rep_link_## ]')+
'&description=
'+encodeURIComponent(desc)+'&via='+encodeURIComponent(via);
return true;" ><img src="http://www.hemidemi.com/sticker/clipcolor_8015.gif" border="0"></a>

(以上的 onmousedown 的 javascript 皆無斷行, 因排版需要有略做調整, 另外TT為避免衝碼, 也將 [ ] 和 ## 間加上了空白, 另外 onclick 會有 selection focus 消失問題(在 IE 下不會), 而取不到 desc, 因為原來設計的引述功能只要反白就會自動帶出哦, 所以改用onmousedown來取得, 方便在產生 HEMiDEMi 標籤時, 帶出使用者反白的引述, 可參閱文章: http://www.quirksmode.org/js/selected.html)

其實重點在於最後的 http://www.hemidemi.com/user_bookmark/new 後面要帶一些東東, title, url, description, via, 分別是加入書籤的[標題](必填), [網址](必填), [引述](非必填), [referer](未出現在畫面上, 應是要做某種分析用), 上面的 javascript 對於 desc 及 via 兩個變數用了相當多的語法來產生, 尤其是 desc, 因為用 desc 所以code會比較大一些, 相對於client side也有一些code的下載負載.

另外採用 anchor + target=_blank 的語法就可以避開 browser 因 window.open 造成的阻擋.

javascript的除錯小幫手

在 javascript 除錯時, 雖然有好用的 firefox 配合 plugin – firebug 來進行 step by step 的除錯, 也可以即時看到變數內容, 也很容易進行除錯, 但在長篇大論的 javascript 裡除錯, 總是希望能更快地獲得變數的值, 方便在偵測這些變數, 尤其是只有 IE 或沒有 firebug 在手邊時, 怎麼辦呢?

我們常常就直接用 alert 來進行變數的顯示, 但又要一直點一直點, 也是有點累(其實是自己懶), 但變數多時, 就更顯得麻煩, 於是用一種容易一點的方法, 就是配合 DHTML直接做頁面輸出就好了, 雖然談不上什麼技術, 但也算是一種小技巧, 給各位參考:

1. 先放一個 div 進來, 如下:
<div id=output></div>

閱讀全文 “javascript的除錯小幫手”

模糊化你的javascript – Javascript Obfuscator

寫程式的過程中, 若不希望自己的程式碼給別人看, 最好的方法就是只提供編譯好的binary code, 而不提供原始碼(source code). 但 javascript 這種要給client side browser看的程式碼, 似乎沒有辦法將原始碼不提供出去. 但如此一來便會有程式碼外露的問題.

模糊化javascript並非是近期的技術, 早在沒有browser時, 單純的script也都希望被保護或難一眼望穿, 於是將程式碼加密或是混亂化(模糊化)就是這篇文章要探討的主題了.

隨著要讓 web 應用程式有更好的使用者經驗, RIA(Rich Internet Application)會是新一代web應用程式的主流應用技術, 無論是ajax或是單純的javascript, 都會隨著這類應用而使程式碼愈來愈多功能外露至client(再強調一下, 無論在client side做多少檢查, 在server side都要再做一次檢查, 以避免有安全性漏洞, server side的程式是最後把關的地方-當然, db端也能做不少防範事項), 於是無論是就安全性考量, 就程式碼保全考量, (還有另一個考量就是將程式碼壓縮以增進效能), 都應該要將 javascript 做某種程度的模糊化, 由於在模糊化的過程中, 通常會伴隨著體積縮小的效應, 所以 obfuscate 及 shrink 的作用是同時發生的. 基於這樣的好處, 適當地將 javascript 做模糊化是很有幫助的.

閱讀全文 “模糊化你的javascript – Javascript Obfuscator”