Comment simuler des requêtes AJAX sur JsFiddle ?

Neil McGuigan

Traducteur

vermine

JsFiddle est une application Web qui permet notamment d'écrire son code (HTML, CSS et JavaScript) en ligne et de l'exécuter. Cette démarche offre la possibilité de voir rapidement les liens entre les trois langages et de partager ses sources avec d'autres développeurs.
L'auteur vous explique comment simuler sur JsFiddle une requête AJAX qui doit normalement se faire via un appel serveur.
Cet article est la traduction de How to simulate AJAX requests in JSFiddle publié sur ExtJS Tutorials.

- Titre : Comment simuler des requêtes AJAX sur JsFiddle ?

- Auteur : Neil McGuigan

- Traducteur : vermine

- Parution : 21 août 2012

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2012 Neil McGuigan. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Démarche

- II. Simuler une requête AJAX

- III. Exemple

- IV. Remerciements

I - Démarche

1. Définissez l'URL de la manière suivante : /echo/json/.

2. Si vous faites une action de lecture (par exemple Model.load), vous devez positionner proxy.actionMethods.read à la valeur POST.

3. Ajoutez "json" en tant que paramètre extraParam et passez-lui la chaîne json que vous désirez récupérer.

4. Vous pouvez également ajouter un délai (delay) en tant que paramètre extraParam.

II - Simuler une requête AJAX

Voici une petite fonction pour vous aider à simuler une requête AJAX :

function sim(proxy, data, delay){

if(typeof data !== 'string'){
data = Ext.JSON.encode(data);
}

proxy.url = '/echo/json/';
proxy.actionMethods.read = "POST";
proxy.extraParams.json = data;
proxy.extraParams.delay= typeof delay == 'undefined' ? 0 : delay;
}

//usage:

sim(MyModel.proxy, {name:"neil"}, 2);

MyModel.load(1, {
callback: function(record, operation){ console.log( record.get('name'); ) }
});

III - Exemple

Voici un exemple : http://jsfiddle.net/el_chief/9ksWE/

/*
C'est une fonction qui simule une requête AJAX dans JsFiddle.
Elle est compatible avec la version Sencha Touch 2.01.
*/
function sim(proxy, data, delay) {
if (typeof data !== 'string') {
data = Ext.JSON.encode(data);
}

proxy.setUrl('/echo/json/');
proxy.setExtraParams({
json:data,
delay: typeof delay === 'undefined' ? 0 : delay
});
proxy.setActionMethods({read:'POST'});
}

IV - Remerciements

Cet article a été publié avec l'aimable autorisation de Neil McGuigan. L'article original peut être lu sur le blog ExtJS Tutorials : How to simulate AJAX requests in JSFiddle.
Je remercie également ClaudeLELOUP pour sa relecture attentive.