Tarotoast’s Stuff

The green button doesn’t actually maximize your window to the fullest estate of your desktop, but instead it maximized to the content in the page. To get the Firefox like maximize back, drag this link Max to your bookmark toolbar to make it into a bookmarklet.

過去幾天一直在摸 AJAX 的相關東西，而跟以前不同的是，這次有下去實作。實作的內容是寶貝哈泥的作業，我想應該是不會拿去交啦，有點類似國小在教小畫家但是拿 Photoshop 的作品去交件。趁還記得把一些心得記下來：

Prototype.js:

• $( ) 是超級好朋友，省了好多字
• $( ) 不能用在 radiobutton 上
• 超省時 XMLHttpRequest Syntax:

  ob = new Ajax.Request(
      URL,
      {
          method: 'get/post',
          parameters:'a=1&b=2',
          onComplete:funcOb
      });

• onComplete 或者其他 onXxxxx 的 funcOb 要用 var funcOb = function(param) { … } 下去定義
• 除了丟 funcOb 以外，也可以直接丟 anonymous function 像是 onComplete: function(param) { … } 這樣
• $( ).visible() 和 $( ).hide() + $( ).show() 真是省了好多 browser hack 的工作

Scriptaculous.js:

• Effect.toggle(‘ID’) 是美觀大方又實用到爆的開關
• Effect.Fade(‘ID1′, {queue:’end’}) 然後 Effect.Fade(‘ID2′, {queue:’end’}) 會先 Fade 完 ID1 後才會 Fade ID2

XML:

• <?xml version="1.0" encoding="big5" standalone="yes" ?>

  順序很重要，嗯哼，亂掉就不給 parse \囧/

• IE 真的很討厭，只要 XML 有一咪咪問題 responseXML 就變成空的，所以最好用 Microsoft XML Notepad 2007 之類的先 validate
• PHP 在丟 XML 時候記得要丟 header，像是

  header('Content-Type:text/xml;charset=Big5')

DOM:

• Mozilla DOM 是個好地方，多看多嘗試就會了
• element.value 才是取得 input 物件裡面的值，element.innerHTML 是拿來塞東西到 <div id=”mydiv”></div> 之間的

這些是實作的不同版本：

• ajaxbmi1: 超級基本的版本，直接用 responseText 來丟進 innerHTML
• ajaxbmi2: 開始會丟 XML 來生成 responseXML 了
• ajaxbmi3: 開始使用 prototype/scriptaculous 來簡化許多東西
  這個版本有個用 behavior 生的 syntax highlighter (star-light)，而原因是因為林餅幹家的 lighty 沒設好 phps 的輸出所以一時起興掛上去的

剛剛在實驗 element.innerHTML = AJAX.responseText 時候碰到了中文亂碼問題，稍微找了一下，以下是最簡單的解法。

假設 AJAX.open('POST', 'cgi.php', true), 然後 cgi.php 要輸出中文的內容，那記得在輸出前先丟個 header：

header('Content-Type:text/html;charset=big5');

問題解決。

對付 responseXML 時候把 text/html 改成 text/xml 就好了。