Posts Tagged ‘scriptaculous’

Ajax 筆記

Monday, April 2nd, 2007

過去幾天一直在摸 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 的輸出所以一時起興掛上去的
All Rights Reserved Copyright © 2008 Design by StyleShout and Clazh