【Javascript】Ajax　JavaScriptでSQL掲示板

JavaScriptでSQL掲示板

---

1: 掲示板の仕組みとAjax化のメリット
2: サンプル
3: 簡単な解説

---

3: 簡単な解説

ここでは、前ページのサンプルについての簡単な解説をします

SQLについて
SQL とは Structured Query Language(構造化問合せ言語)のことで、データベース操作用のための言語としてIBM社が開発した世界標準規格です。最近Webアプリなどで良く使われる、MySQLやPGSQLやマイクロソフト社のSQLサーバーなどは名前の通りSQLデータベースですが、世の中にはこの他にも無数のSQL対応データベースがあって、それらは、多少の訛りはありますが、SQL文で動かすことが可能です。

今回は、SQLiteというPHP5以降にバンドルされたデータベースを使っています。これは、ファイル単位で配布が可能で、ユーザー権限もOSのファイルパーミッションに従うというシンプルなものです。したがって、所有者をWebサーバーのユーザー(nobodyやapacheなど)にしてはいけません。(ただし、AjaSQL側は、OSコマンドはもちろん、CREATEやDROPなどの強力なSQLコマンドもデフォルトで通さないようにしています。それらは、DB管理者が個別に行うことをお勧めします。)

AjaSQL掲示板で使ったSQL文
一般的な掲示板で最初に行うデータベース処理は、蓄積された発言データを読み込むことです。サンプルでは、次のように、showMsg(oj)という関数を作ってSQL文を発行しています。

  //発言済みデータをリクエスト
  function showMsg(oj)
  { 
    //SQL文作成
    //  (テーブルから カラム「id」降順でmax.value件リクエスト)
    var sql = 'SELECT * FROM ' + sqlite01.tblName 
            + ' ORDER BY id DESC ' 
            + ' LIMIT '+oj.form.max.value+';';
            
    //SELECT文を送信  
    asql_sendSQL(sqlite,sql)
  }

上記で、oj.form.max.valueなどの変数とともに合成し、作成しているSQL文は、簡単に書くとたとえば、次のようなものです。 mydb1というデータベーステーブルから、idカラムを降順にして10件取り出します。

  'SELECT * FROM mydb1 ORDER BY id DESC LIMIT 10 ;';

分解して説明すると次のような意味になります。

SELECT(選び出す) 
* (全列)
FROM mydb1(mydb1テーブルから) 
ORDER BY id DESC (idカラムを降順、ASCなら昇順)
LIMIT 10 (10件をリミット);

このテーブルmydb1では、idは、発言毎の連番を自動でつけています。つまり、idが大きいほど新しい発言ということになります。こんなに単純なSQL文1行によって、データが何十万件あろうとも、最新の発言を10件、JavaScriptから即座に受け取ることができるというわけです。

受信の仕組み、コールバック関数
Ajaxの送受信ではXMLHttpRquestオブジェクトからリクエストをsend()後、oj.onreadystatechange()やoj.onload()というイベントメソッド内で、受信したデータオブジェクトを受け取れるという仕組みになっています。今回使っているAjaxライブラリでは、全データ受信のタイミングで、作成者が指定したコールバック関数へそれを引き渡す仕掛けになっています。

さらに、AjaSQLでは、初期設定の中で、

    callback   : 'onSelected',  // 受信時の初期起動関数名

このように書くか、

    iniOj.callback = onSelected // 受信時の初期起動関数名

などのように書いてから、たとえば次のようにSQLを送信すれば、

    asql_sendSQL(sqlite,sql)    //SELECT文を送信  

受信データは、次のようなコールバック関数の中で受け取り、JavaScriptで処理することができるようになります。 下記で、レスポンスデータを配列化しているgetRowColArray()やHTMLテーブル化しているoutputMsges()は AjaSQLライブラリで使える関数です(詳しくは各ライブラリのソース内をご覧下さい)

  
  //コールバック関数(サーバーから着信時に起動)
  function onSelected(resoj,reqoj)
  {
    //レスポンスデータを配列化 ( array[行][列] で取り出せるようにします)
    ary = getRowColArray(resoj,reqoj)
    
    if(ary.length>1){
      //テーブル化して発言表示用DIV へ出力
      msges.innerHTML=outputMsges(ary,headBgcolor,rowsBgcolors)
    } 
  }

AjaSQLライブラリでは、ゲートウエイで、SafariやKHTMLなどの文字化け対処などを行ったり、ドラッグや透明化などのエフェクト処理等までクロスブラウザな様々な関数を利用できるようになっています。

データベース SQLite (mydb_bbs.db)
今回も、データベースをファイル単位で配布できるのでSQLiteを利用しています。SQLiteにつ テーブル構造は下記の通りです。サンプルDBにはmydb1～5までの同じスキーマのテーブルをあらかじめ入れてありますのでコピーするだけで使えます。

  CREATE TABLE mydb1(
    id integer primary key,    //id
    name text ,                //名前
    msg text ,                 //メッセージ
    memo text ,                //メモ
    date text,                 //日時
    ip text                    //ip
  );

データは、下記のように格納されています。

1|test|test||2005-08-30 17:26:02|
2|test|こんにちは||2005-08-30 17:26:09|
3|テスト|こんにちは、あいうえお||2005-08-30 17:40:09|
4|aaa|aaa||2005-08-30 18:12:20|
　　:
　　:

ファイル構成とパーミッション

ファイル構成は、Ajax、AjaSQL、BBS用のライブラリ3層のライブラリとサーバー側ゲートウエイとしてのPHPとSQLiteデータベースファイルです。 最下層のAjaxライブラリは、XMLHttpRequestによる送受信を担当し、AjaSQLライブラリがそれを利用してSQLデータベースの制御を担当しています。その上に、フォームや発言出力用のHTML生成を行うBBS用のライブラリが乗っているという形です。

(Webアクセス可エリア)
　　　　│
　　　　├sample.htm　　　　//サンプル(0604)
　　　　│
　　　　├bbsdb/(0707)
　　　　│　│
　　　　│　├mydb_bbs.db  　　　　　//SQLite掲示板用データベース(0606)
　　　　│　└mydb_bbs_yobi.db 　　　//データベース予備(0600)
　　　　│　　　　　　　*DB所有者はWebサーバーのユーザー
　　　　│　　　　　　　 (nobodyやapacheなど)以外にしてください。
　　　　└ajasql/
　　　　　　│
　　　　　　├ajasql_gw233.php 　　　//サーバー側AjaSQLゲートウエイ(0604)
　　　　　　│
　　　　　　├ajasql_bbs001.jp 　　　//BBS用 ライブラリ (0604)
　　　　　　├jslb_ajasql027.js　　　//暫定AjaSQLライブラリ(0604)
　　　　　　└jslb_ajax036.js　　　　//暫定Ajaxライブラリ(0604)

---

【暫定Ajax用ライブラリ】jslb_ajax036.js
【AjaSQL用ライブラリ】AjaSQL
【今回のAjaSQL掲示板用ライブラリ一式】AjaSQL掲示板