【Javascript】Ajax　JavaScriptでSQL掲示板

JavaScriptでSQL掲示板

---

今回は、前回の郵便番号、住所 検索でも利用した AjaSQLを使って 掲示板を作ってみました。

掲示板も、Ajaxを利用することで、ページ丸ごと更新の無い軽快な動作が可能になります。

今回は、AjaSQLを利用していますので、サーバー側ソースには触らずに、 JavaScript側からのSQLデータベース制御ロジックのみによって動作するBBSになっています。

データベースもコピーしてパーミッションを設定するだけのシンプルなSQLiteを使いました。


*AjaSQLは、まだ、開発中ですのでマイナーバージョンv027を利用しました。また、AjaSQL内では、Masanao Izumo氏によるMD5の変換ライブラリ(高度な JavaScript 技集)を使わせていただいております。Ajax通信に関わる基本部分は、これまで何度も利用してきた暫定Ajax用ライブラリのv036、jslb_ajax036.js を使っています。AjaSQLは、このサイトで、ソース、サンプルともに入手できますが、 あくまでも、現在はテストバージョンですので、 関連するPHPやLinuxシェルのセキュリティにご注意ください。

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

---

1: 掲示板の仕組みとAjax化のメリット

一般的な掲示板は、ユーザーが書き込んだデータをサーバーへ送り、サーバーはそのデータを保存すると共に、保存済みの過去の発言と合わせてHTML化して送り返します。

この際、送信にはForm要素からデータを送り出し、受信時には、ページを全部書き換えて更新します。 たとえ、わずか、1文字の更新でも、1ページすべてを書き換えるわけです。

これに対して、XMLHttpRequestを使った、Ajaxによる通信は、これまで見てきたように、このようなページ丸ごとの更新をせずに、 必要な最小データだけを送受信してページの情報を更新します。

つまり、この結果、待ち時間の少ない軽快なインターフェイス作成が可能になります。

---

2: サンプル

→Sample
(*このサンプルは上記リンク参照)

動作ブラウザ

win					mac				linux
n7	m1	e6	o7	o8	n7	m1	e5	s1	n7	m1	k3
○	○	○	×	○	○	○	×	○	○	○	○

　

このサンプルは、JavaScriptから、SQL文を発行して、SQLiteデータベースへ追記/検索することで、 掲示板の機能を構成しています。

今回は、基本機能だけを実装しましたが、たとえば、差分データの取得なども1行のSQL文＋受信後のJavaScriptによる簡単な追記処理程度で済みますし、疑似チャットを作るなど、まだまだ高機能化やチューンナップは可能だと思います。

使ったJavaScript/HTML側のソースは、下記の通りです。

【JavaScript側】

<font color=orange>
 
<!-- 暫定Ajaxライブラリ jslb_ajaxxxx.js -->
<script language = "JavaScript" 
        charset = "utf-8"
        src     = "./ajasql/jslb_ajax036.js"></script>

<!-- 暫定AjaSQLライブラリ ajasqlxxx.js -->
<script language = "JavaScript" 
        charset = "utf-8"
        src     = "./ajasql/jslb_ajasql027.js"></script>

<!-- AjaSQL BBS用 HTML構築ライブラリ ajasql_formsxxx.js -->
<script language = "JavaScript" 
        charset = "utf-8"
        src     = "./ajasql/ajasql_bbs001.js"></script>

<script language = "JavaScript">
<!--

  //起動時処理
  window.onload=doIni

  //
  //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)
  }
  
  //検索文字列を含むデータをカラム「name」「msg」から検索
  var seachText = ''
  function seachMsg(oj)
  {
    //検索文字列をセット
    var seachText = oj.form.sel.value
    
    //SQL文作成
    //  (カラム「name」「msg」にsel.valueを含むデータを
    //         「id」降順でmax.value件リクエスト)
    var sql = 'SELECT * FROM ' + sqlite01.tblName
            + '  WHERE  name LIKE "%'+oj.form.sel.value+'%" '
            + '      OR msg  LIKE "%'+oj.form.sel.value+'%" '
            + '  ORDER BY id DESC '
            + '  LIMIT '+oj.form.max.value+';';
    
    //SELECT文を送信  
    asql_sendSQL(sqlite,sql)
  }

  //検索文字列を含む発言データをカラム「msg」から検索
  function seachMsgByText(oj,text)
  {
    //検索文字列をセット
    seachText = text
    
    //SQL文作成
    //  (テーブルから カラム「msg」が「%text%」
    //          なものを降順でmax.value件リクエスト)
    var sql = 'SELECT * FROM ' + sqlite01.tblName
            + '  WHERE msg LIKE "%'+ text +'%" '
            + '  ORDER BY id DESC '
            + '  LIMIT '+oj.form.max.value+';';

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

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

  //発言
  function insertMsg(oj)
  {
  
    if(oj.form.msg.value=='メッセージ欄' || 
       oj.form.msg.value==''||
       oj.form.name.value=='' )return
    
    //とりあえず改行と,を暫定禁止、クオートを全角に。 
    //IEが?r?nで処置できなくなってたので%0D%0Aで処置
    //ただし、他のブラウザ用に?r?n処理も生かす
    msg = oj.form.msg.value.split('?n').join('')
    msg = msg.split('?r').join('')
    msg = encodeURI(msg)
    msg = msg.split(getRN()).join('')
    msg = decodeURI(msg)
    
    //全角へエスケープ
    msg = msg.split(',').join('，')
    msg = msg.split("'").join('’')
    msg = msg.split('"').join('”')
    msg = msg.split(';').join('；')
    msg = msg.split('&').join('＆')

    //SQL文作成
    var sql = 'INSERT INTO '+sqlite01.tblName
            + '  VALUES( '
            + '    Null ,'                      //id
            + '    "'+oj.form.name.value+'",'   //名前
            + '    "'+msg+'" ,'                 //メッセージ
            + '    "" ,'                        //
            + '    "#SERVER_NOW#",'             //時間
            + '     ""'                         //
            + '  );';
    
    //発言後用のコールバック時起動関数をonInsertedに指定
    sqlite.ini.callback = onInserted
    
    //INSERT文を送信 
    asql_sendSQL(sqlite,sql)

    //発言クリア
    oj.form.msg.value = ''
  }
  
  
  //
  // コールバック関数
  //
  
  var ary =''
  
  //コールバック関数1
  function onSelected(resoj,reqoj)
  {
    //レスポンスデータを配列化 ( array[行][列] で取り出せるようにします)
    ary = getRowColArray(resoj,reqoj)
    
    if(ary.length>1){
      //発言表示用DIV へ出力
      msges.innerHTML=outputMsges(ary,headBgcolor,rowsBgcolors)
    } else   ajasql_bbs_last = true
    
    //検索ワードに背景色をつける
    if(seachText != ''){
      var wkmsges = msges.innerHTML.split(seachText)
      var color   = "<span style='background-color:#aacccc'>"
                  + seachText+"</span>"
      msges.innerHTML = wkmsges.join(color);
    }
  }
  

  //コールバック関数2
  function onInserted(resoj,reqoj)
  {
    //レスポンスデータを配列化 ( array[行][列] で取り出せるようにします)
    ary = getRowColArray(resoj,reqoj)
    
    //発言表示用DIV へ出力
    msges.innerHTML="---"+outputMsges(ary,headBgcolor,rowsBgcolors)
    
    //表示
    sqlite.ini.callback = onInserted2
    showMsg(bbsform);
  }

  //コールバック関数3
  function onInserted2(resoj,reqoj)
  {
    //レスポンスデータを配列化 ( array[行][列] で取り出せるようにします)
    ary = getRowColArray(resoj,reqoj)
    
    //発言表示用DIV へ出力
    msges.innerHTML=outputMsges(ary,headBgcolor,rowsBgcolors)

  }

//-->
</script>

<style>

/* 入力フォームのCSS*/
/* 略 */
/* 発言表示用DIVのCSS*/
/* 略 */

</style>