Ajax入門

Ajaxの初歩的なまとめ。

1. XMLHttpRequest
   ・JavaScriptのオブジェクト。
   　ページ遷移なしでHTTPリクエストを送る事が出来る。
   　Ajaxの根幹となる部分。
   ・ドメインが違うサイトのデータは取得できない。
   　このためPHPやJavaなどのサーバサイドのプログラムを
   　間にかます必要がある。
   

   <script type="text/javascript">
   httpRequest = false;
   if(window.XMLHttpRequest) {
       // Firefox, Opera など
       httpRequest = new XMLHttpRequest();
       httpRequest.overrideMimeType('text/xml');
   } else if(window.ActiveXObject) {
       // IE
       try {
           httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
       } catch (e) {
           httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
       }
   }
   function request() {
       httpRequest.abort();
       httpRequest.open('GET', 'url', true);
       httpRequest.onreadystatechange = function() { // コールバック関数
           if(httpRequest.readyState == 4) {
               if(httpRequest.status == 200) {
                   // 処理
               }
           }
       }
       httpRequest.send(null);
   }
   </script>

2. XAMPP
   ・MySQLやPHPを含んだApacheディストリビューション。
   　簡単インストールですぐに使える。
   　開発用のローカル環境にとても便利。
   　本番用にもセキュリティの設定を変えれば使えるそう。
   ・MAC OS X版に含まれるソフト
   　Apache, MySQL, PHP & PEAR, SQLite, Perl, ProFTPD, phpMyAdmin, OpenSSL,
   　GD, Freetype2, libjpeg, libpng, zlib, Ming, Webalizer, mod_perl.
   
   
3. Prototype.js
   ・多彩なJavaScriptライブラリ。
   　ブラウザの差異も吸収してくれる。
   

   new Ajax.Request( 'url', {method:'get',
   　　　　　　　　　   　　onSuccess:getData,    // 成功時コールバック関数
   　　　　　　　　   　　　onFailure:showErrMsg, // エラー時コールバック関数
   　　　　　　　　　   　　parameters:''} );
   
   function getData(data) {
        var rdf ="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
        var response;
        if(document.all){
             response = data.responseXML.getElementsByTagName('rdf:RDF');
        }else{
             response = data.responseXML.getElementsByTagNameNS(rdf,'RDF');
        }
        var item = response[0].getElementsByTagName('item');
        for(i = 0; i < item.length; i++){
             // 処理
        }
   }
   function showErrMsg() {
        // エラー処理
   }
   

4. DOM (Document Object Model)
   ・HTMLやXMLを操作する為のAPI。
   

   // selectボックスの作成
   var selectDOM = document.createElement('select');
   selectDOM.setAttribute( 'id', 'data_select' );
   
   var optionDOM = document.createElement('option');
   optionDOM.setAttribute( 'value', '0' );
   optionDOM.appendChild( document.createTextNode( '選択してください' ) );
   selectDOM.appendChild( optionDOM );
   
   result.appendChild( selectDOM );