CakePHP + Ajax + JSON

前回トライしたときは、JSON形式で返すことはできたのですが、ContentTypeがText/Htmlだったため、取り出すのにresponseTextで取り出してから、evalJSONでオブジェクトに変換しなければいけませんでしたが、やっとContentTypeをjsonで返すことができるようになりました。

◆controllerのソース
他のサイトにも書かれている通り、controller内のbeforeFilterでContentTypeをセットするのがカギになります。
Ajaxアクセスで、JSONを返すアクションであることを確かめて、不要な出力をしないようにdebugモードを0にセットしてから、Contentのセットを行います。

それから、JSONを返すアクションでレイアウトをAJAXに設定したら、ビューに渡すデータをセットします。

var $helpers = array('html','javascript','ajax');
var $components = array('RequestHandler');

function beforeFilter() {  
  if ($this->RequestHandler->isAjax()) {  
    if ($this->action == 'getUserAjax') {  
      Configure::write('debug', 0);  
      $this->RequestHandler->setContent('json','text/x-json');
      $this->RequestHandler->respondAs('application/json; charset=UTF-8');  
    }
  }
}

function index() {
}

function getUserAjax() {
  $this->layout = 'ajax'; 
  $data = $this->currentvalue->find('all');
  $this->set('data', $data);
} 

◆Viewのソース
indexではベースになるページを作成して、内部で$ajax->remoteTimerにより定期的にAJAXアクセスを行うようにします。また、AJAXアクセスが完了した時点でレスポンスの処理関数を呼び出してresponseJSONでオブジェクトに取り出します。(Prototype.jsを使用)

◇index.ctp

  $javascript->link('prototype',false);
  $script =<<< EOL
  Event.observe( window, 'load', function() {
  });
 
  function response_json(request,json) {
    var obj = request.responseJSON;
    for ( var i = 0; i < obj.length; i++) {
      if ( eval(obj[i].currentvalue.status)) {
        $(response).innerHTML = "";
      } else {
        $(response).innerHTML = "";
      }
    }
  }
//EOLの前にタブが入るとエラーになるので注意
EOL;
  $javascript->codeBlock($script, array('inline'=>false));
?>


remoteTimer(array(
  'url' => 'getUserAjax',
  'update' => null,
  'complete' => 'response_json(request,json);',
  'frequency' => 3)); //3秒間隔でgetUserAjaxを呼び出して、完了するとresponse_jsonを呼び出す
?>

JSONを出力するビューは非常に簡単です。
◇get_user_ajax.ctp

  echo $javascript->object($data);
?>

このコードハイライト機能には、Blogger Syntax Highlighterを使用しています。FaziBear's Blogger Widgets
詳しい説明は、クリボウの Blogger Tipsをご覧ください。