Tarotoast’s Stuff

過去幾天一直在摸 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 就好了。