fc2ブログ

Ajax Simple Report Bar -PART5-

report.jsはサーバ側プログラムとの通信、および結果表示を担うJavascriptプログラムです。本記事ではreport.jsを詳細に見ていきます。

function linkReport(r,i)
{
var r = r; // r 報告->1,ロード->0
var i = i; // 識別番号
//var i = (i ? i : $F('i'));
var url = 'report.php';
var pars = 'r=' + r + '&i=' + i;
var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onLoading : function(req)
{
var m = 'Waiting...';
$('d').innerHTML = m
},
onSuccess: successReport,
onFailure: function(req)
{
var m = 'Sorry...';
$('d').innerHTML = m;
}
});

}

function successReport(req)
{
// JSONデータ受取
var jsontext = req.responseText;
// JSON -> Javascriptオブジェクト
var result = eval('(' + jsontext + ')');
// 報告ボタン切替
var ip_check = result['ip_check'];
if(ip_check)
{
$('r').style.display ='none';
$('nr').style.display='inline';
}
else {
$('r').style.display ='inline';
$('nr').style.display='none';
}
// 報告数設定
if(result['total_report'] != '0')
{
$('d').innerHTML = result['total_report'];
$('d').style.backgroundColor = '#C9D787';
// グラフの幅
var bar = result['total_report'];
bar *= 2;
// グラフ幅設定
$('d').style.width = bar + 'px';
}
else
{
$('d').innerHTML = '報告はありません。';
$('d').style.backgroundColor = '#FFFFFF';
}
}

window.onload = function()
{
linkReport(0,$('i').value);
}

function execReport()
{
linkReport(1,$('i').value);
}

linkReport関数

report.jsのメイン関数です。サーバ側プログラムとの通信、および結果表示を担います。第1引数はロードか報告かの判定フラグ、第2引数で識別番号です。

  • index.htmlがロード・・・window.onload → linkReport(0,識別番号)で呼び出されます。
  • 報告ボタンがクリック・・・execReport → linkReport(1,識別番号)で呼び出されます。

識別番号は$('i').valueで取得します。$('ID名')はprototype.jsによりID名のついたHTML要素を参照します。

 スポンサードリンク

スポンサーサイト



  1. ブックマークに追加する
  1. ブログランキングFC2
  1. 2007/09/15 (土)|
  2. [カスタムプログラム]Ajax Simple Report Bar
  3. | トラックバック：0
  4. | コメント：0

Ajax Simple Report Bar -PART4-

Ajax Simple Report Barのindex.phpを詳しく解説しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>Ajax Report Bar</title>
<link rel="stylesheet" href="css/report.css" type="text/css" media="all" />
<script language="JavaScript" type="Text/JavaScript" src="prototype.js" charset="utf-8"></script>
<script language="JavaScript" type="Text/JavaScript" src="report.js" charset="utf-8"></script>
</head>
<body>
<h1>Ajax Simple Report Bar</h1>
<p>報告ボタンをクリックすると報告数が棒グラフとして表示されます。IPを使い重複チェックをしています。</p>
<form>
<input type="hidden" name="i" id="i" value="数字" /><!-- [1] -->
<input type="image" src="images/report.gif" id="r" onclick="execReport();" /><!-- [2] -->
<img src="images/reported.gif" id="nr" /><!-- [3] -->
</form>
<p id="d" ></p><!-- [4] -->
</body>
</html>
  • [1]・・・報告プログラムの識別番号です。DBの主キーの値になります。
  • [2]・・・未報告の際に表示される画像ボタンです。クリックすると報告数を1増やす一連の処理を行います。
  • [3]・・・報告済の際に表示される画像です。
  • [4]・・・報告数とグラフを表示します。グラフはp要素にCSSで背景色(background-color),幅(width)を設定して実現します。

    •  スポンサードリンク

    1. ブックマークに追加する
    1. ブログランキングFC2
    1. 2007/09/15 (土)|
    2. [カスタムプログラム]Ajax Simple Report Bar
    3. | トラックバック：0
    4. | コメント：0

    Ajax Simple Report Bar -PART3-

    PART1,2に続き本記事ではAjax Simple Report Barの詳しい動作をまとめています。

    »Ajax Simple Report Bar

    動作1(IPチェックなし)

    HTMLファイルをロードした際の動き
    • 初回・・・ DBレコード(基本情報)追加 ⇒ 報告数(0)の取得 ⇒ 報告数(0)をグラフ表示
    • 2回目以降・・・ 報告数の取得 ⇒ 報告数をグラフ表示
    報告ボタンを押した際の動き
    既存の報告数を1増やす(DB登録) ⇒ 報告数の取得 ⇒ 報告数をグラフ表示

    動作(IPチェックあり)

    報告済みの判定はIPアドレスで行います。

    HTMLファイルをロードした際の動き
    • 初回・・・ 初回・・・ DBレコード(基本情報)追加 ⇒ 報告数(0)の取得 ⇒ 報告数(0)をグラフ表示
    • 2回目以降
      • 未報告・・・報告数の取得 ⇒ 報告ボタン,報告グラフを表示
      • 報告済・・・報告数の取得 ⇒ 報告済画像※1,報告グラフを表示
    報告ボタンを押した際の動き
    既存の報告数を1増やす(DB登録) ⇒ 報告数の取得 ⇒ 報告済画像※1,報告グラフを表示

    ※1既に報告済みのIPの場合は、報告ボタンに変えて報告済み画像を表示することで重複報告を防止します。

     スポンサードリンク

    1. ブックマークに追加する
    1. ブログランキングFC2
    1. 2007/09/14 (金)|
    2. [カスタムプログラム]Ajax Simple Report Bar
    3. | トラックバック：0
    4. | コメント：0

    次のページ»