Jérôme Tamarelle » AJAX http://jerome.tamarelle.net/blog I share so I am Sat, 17 Jul 2010 21:41:50 +0000 en hourly 1 http://wordpress.org/?v=3.0 Vue au format JSON sous Symfony http://jerome.tamarelle.net/blog/2009/12/vue-au-format-json-sous-symfony/ http://jerome.tamarelle.net/blog/2009/12/vue-au-format-json-sous-symfony/#comments Mon, 21 Dec 2009 16:23:18 +0000 Jérôme http://jerome.tamarelle.net/blog/?p=18 Contrairement à ce que son nom indique, l'AJAX utilise de plus en plus le format JSON pour échanger des données entre le navigateur et le serveur. Le framework PHP Symfony se déclare "Easy AJAX", il l'est pour l'intégration de JavaScript, mais la création de vues non-HTML n'est pas toujours évidente. Cet article propose deux méthodes pour générer du code JSON depuis Symfony avec ou sans aide au débuggage.

Les usages sont multiples, par exemple :

1. JSON simplement mais sans débuggage

Le plus simple pour envoyer du code JSON depuis Symfony est d'inclure les lignes suivantes à la fin du contrôleur :

function executeAction() {
  $data = array();
  // ... Création du tableau $data ...

  // Indispensable : définie le l'en-tête HTTP correspondant au format JSON.
  $this->getResponse()->setHttpHeader('Content-type', 'application/json');
  // Contenu transmis.
  $this->getResponse()->setContent(json_encode($data));
  // N'affiche aucune vue.
  return return sfView::NONE;
}

Simple à mettre en œuvre, cette méthode peut poser problème pour le débuggage de l'application.

  • Le contenu JSON transmis n'est pas visualisable dans le navigateur à cause du content-type non reconnu.
  • Si l'on laisse le content-type par défaut, le texte JSON transmis est parasité par la debug toolbar.

2. JSON avec débuggage

Pour rendre visible le format JSON au développeur, il faut adapter la réponse au contexte d'exécution de la page. Les données ne doivent être affichées lisiblement que lorsque le développeur affiche la page en mode débug, mais pas lorsqu'elle est appelée depuis JavaScript, même en mode débug. Pour cela, la méthode sfWebRequest::isXmlHttpRequest() est bien pratique.

Un petit aperçu du rendu dans le navigateur en mode débug, lorsque la page est appelée directement depuis la barre d'adresse du navigateur.

Template JSON

Aperçu du rendu JSON en mode débug.

1/3 Créez le composant JSON. Fichier app/app_name/modules/module_name/actions/jsonComponent.class.php

class jsonComponent extends sfComponent
{
  function execute($request)
  {
    if (sfConfig::get('sf_debug') && !$this->getRequest()->isXmlHttpRequest())
    {
      $this->setVar('data', $this->data);
    }
    else
    {
      $this->getResponse()->setHttpHeader('Content-type', 'application/json');
      $this->getResponse()->setContent(json_encode($this->data));
      return sfView::NONE;
    }
  }
}

2/3 Créez ensuite la vue associée. Fichier app/app_name/modules/module_name/templates/_json.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>JSON response</title></head>
<body>
  <h2>JSON</h2>
  <?php echo json_encode($sf_data->getRaw('data')); ?>
  <h2>Data structure</h2>
  <pre><?php print_r($sf_data->getRaw('data')); ?></pre>
</body>
</html>

3/3 Enfin appelez le composant depuis votre contrôleur. Fichier app/app_name/modules/module_name/actions/actions.class.php

function executeAction() {
  $data = array();
  // ... Création du tableau $data ...

  // Transmet la responsabilité de l'affichage au composant JSON
  return $this->renderComponent('module_name', 'json', array('data'=>$data));
}

Le composant peut être créé dans un module spécifique et appelé depuis un autre module.

Reste plus qu'à en faire un plugin ...

Deux articles pour aller plus loin :

]]> http://jerome.tamarelle.net/blog/2009/12/vue-au-format-json-sous-symfony/feed/ 3