Raccourcis : Contenu - rubriques - sous rubriques
EN FR
Jelix 1.6.14

Section: AJAX

^ Services web JSON »
Changer de langue : EN

Bien que le terme AJAX précise qu'une réponse doit être en XML (d'où le X dans AJAX), AJAX est souvent utilisé avec d'autres types de format.

Selon ce que vous attendez côté client, soit dans la propriété responseText, soit dans la propriété responseXml de l'objet xmlHttpRequest, vous utiliserez un objet jResponse différent.

  • Pour tout ce qui est contenu XML quelconque, vous utiliserez jResponseXml
  • Pour des réponses en JSON, vous utiliserez jResponseJson
  • Pour renvoyer des fragments de code HTML, il ne faut pas utiliser jResponseHtml, mais jResponseHtmlFragment (voir exemple ci-dessous).
  • Dans les autres cas, vous utiliserez certainement jResponseText.

Dans votre controleur, vous pouvez utiliser jApp::coord()->request->isAjax() pour vérifier que la requête est une vrai requête AJAX (envoyée donc avec XMLHttpRequest).

Renvoyer des fragments de code HTML

Il ne faut pas utiliser jResponseHtml, car cet objet génère tout ce qu'il faut pour une page HTML : le <head>, le <body> etc... Bien souvent, dans une requête AJAX, on ne veut récupérer qu'un fragment de code HTML.

jResponseHtmlFragment est adaptée pour cela :


   $rep = $this->getResponse('htmlfragment');

   $mavariable = ...

// html à renvoyer 
   $rep->addContent( '<p>'.$mavariable.'</p>' );

// ou aussi par un template
   $rep->tplname='monapp~tpl_pour_ajax'; 
   $rep->tpl->assign('variable', $mavariable);

   return $rep;

À propos de l'utilisation de jforms dans les réponses Ajax

Il y a un souci connu quand on utilise un formulaire jforms dans un template pour une réponse autre que html pour faire une réponse ajax.

En effet, pour fonctionner correctement, un formulaire jforms a besoin de la présence du fichier jforms.js dans la page qui appelle la requête ajax. Ce fichier est inclus automatiquement par le plugin form, en appelant entre autre la méthode addJsLink de la réponse.

Comme les fragments HTML renvoyés par les reponses ajax n'ont pas d'en-tête HTML <head>, le script n'est pas inclus dans la page html final, ce qui causera des erreurs javascript.

La solution est donc, dans l'action qui génère la page html qui fera la requête ajax, d'inclure tout les scripts et feuilles de styles dont a besoin le formulaire. Pour cela, il faut récupérer le "builder" de formulaire, et appeler la méthode outputMetaContent().

Exemple d'action qui affiche la page qui fera la requete ajax :


  function pageshowingtheform(){
      $rep= $this->getResponse("html");
      $rep->title = 'show ajax form';

      $form = jForms::create('sample');
      $form->getBuilder('html')->outputMetaContent(null);

      $tpl = new jTpl();
      $rep->body->assign('MAIN', $tpl->fetch('mypage'));
      return $rep;
  }

Le template principal mypage.tpl :


<script type="text/javascript">
var urlAjaxForm = "{jurl 'testapp~sampleform:showajaxform'}"

{literal}
function loadForm() {
    jQuery.ajax(urlAjaxForm, {
        complete: function(jqXHR, textStatus) {
            $("#theform").html(jqXHR.responseText);
        },
        // ....
    });
}
{/literal}
</script>

<button onclick="loadForm()">Load the form</button>

<div id="theform">
    // will be filled after clicking on the button
</div>

Et l'action showajaxform :


function showajaxform() {
    // retrieve form data
    $form = jForms::get('sample');
    if($form == null){
        $form = jForms::create('sample');
    }

    $rep = $this->getResponse('htmlfragment');
    $rep->tpl->assign('form', $form);
    $rep->tplname = 'sampleajaxform';
    return $rep;
}

Et enfin le template du formulaire sampleajaxform :


{form $form,'sampleform:save'}
    {formcontrols}
    <div>{ctrl_label '', '%s: '} {ctrl_control}</div>
    {/formcontrols}
<p>{formreset} {formsubmit}</p>
{/form}