Ajaxを用いた静的HTMLとPHPとのカート連携の実験

経緯

  • 最近、バッチでHTMLを吐いてそれぞれのページでカートにいれる処理をして、PHPでできたフォームでそのカートの中身を処理、というシステムがあってAjaxを使って実装しようと思ったが、時間もないので全ての値をCookieで食わせて実装した。一般的にはCookieに書く以上、セキュリティが怖い(ユーザが勝手に書き換えられるという点)が、ECサイトでもないのでとりあえず済んだ。が、HTML(javascript)の部分と、PHPの部分の連結がなかなかシビア&トリッキーであり腑に落ちない実装方法であるし、将来のことも考えてAjaxでのサンプルを用意しておくべく手をつけてみた。

PHP側

  • 普通はユーザのHTMLから作成するが、あえてPHPから実装。

なぜならシステムの核はPHPのセッションであるからである。

作ろうとするシステムは、見た目は「HTMLだがPHPのセッションを使おう」ということである。(といっても別に大したことないが;

説明はソース内に書く主義なのでコメント参照。

  • test.php
    <?php
    	// セッションの開始を宣言     
    	session_start();
    	// 実際の運用のため。セッションハイジャック対策として苦し紛れ程度の対策。
    	session_regenerate_id();
           
    	//  文字化け対策            
    	header( "Content-Type: text/html; charset=UTF-8");
    	//  セッションID確認用
    	print(session_id());
    	print('<HR>');
                   
    	//  リクエストがあるときのみ更新
    	// いつも思うが、こういう判定はemptyかissetどっちかで迷う
    	if(!empty($_GET['id'])){
    		$_SESSION['vars'][$_GET['id']]=$_GET['value'];
    	}
                   
    	// クロスサイト対策しつつprint_rでみるためバッファリングしてから表示
    	ob_start();
    	print_r($_SESSION);
    	$buf=ob_get_contents();
    	ob_end_clean();
    	print(htmlspecialchars($buf));
    	print('<HR>');
    ?>

HTML側

  • Ajaxにおいて一番のキモはクライアントであり一番難しいところでもある(だろう)。 というわけで基本は@ITを参考にしつつ自分がわかるjavascriptの範囲で書いてみた。
  • in.html
    <html>
    <head>
    <script language="javascript">
    <!--
    
    var session_name="PHPSESSID";
    
    function ajax_test(){
            // ajaxインスタンスの生成。とりあえず@ITのパクリ。
            // ブラウザ依存はここで解決させる。もっとよいコードがあるかもしれないがとりあえず。
        if(window.XMLHttpRequest) {
    	    ajax = new XMLHttpRequest();
    	} else if(window.ActiveXObject) {
    	    try {
    	        ajax = new ActiveXObject("Msxml2.XMLHTTP");
    	    } catch(e) {
    	        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    	    }
    	}
    
    	//  urlリクエストパス
    	var url_req='http://kepietro.dip.jp/~pietro/ajax/test.php?';
           //  引数
    	var args='';
    
    	//	今はもとから空なので意味ない。
    	if(args!=""){
    		args+="&";
    	}
           // document.form.hogehogeとせずブラウザ依存やformタグ有無のことも考えて
           // getElementByIdを使うのが定石
           url_req+="id="+document.getElementById("id1").value
                   +"&value="+document.getElementById("value1").value;
           // URLと引数の結合
    	url_req+=args;
    
           // 通信 @ITそのまんま
    	ajax.open("GET", url_req);
    	ajax.onreadystatechange = function() {
               // 完了&HTTPステータス200なら
    	    if (ajax.readyState == 4 && ajax.status == 200) {
                   // fooでidentifyされるオブジェクトの
    	        var obj = document.getElementById( 'foo');
                   // HTMLをダイナミックに書き換え
    	        obj.innerHTML = ajax.responseText;
    	    }
    	}
           // 今はGETメソッドなので空文字列
    	ajax.send("");
    }
    -->
    </script>
    </head>
    <body>
    <!-- このように意味なしタグdivで囲って、idでidentifyしてあげる -->
    <div id="foo"></div>
    <!-- このボタンを押したときにajax_testを呼ぶようにonClickイベントに。 -->
    <input type="button" onClick="ajax_test();" value="実行" >
    ID:<input type="text" id="id1" name="id1" value="" >
    VAL:<input type="text" id="value1" name="value1" value="" >
    </body>
    </html>

これでHTTPヘッダをみてみると、Cookieを送っている。Ajax側でGETパラメータなりPOSTに埋め込まなくても、これならPHP側でセッションの値をCookieからだけ取れる設定でもOKだ。冷静に考えてみれば、クライアント側はPHPだろうがHTMLだろうが関係ない;

とりあえずここまで

参考


トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2010-11-28 (日) 21:47:36 (2310d)