nyams.planbweb.com | Une classe javascript pour parser location.search

Pourquoi QSParser ?

Tous a commencer par une simple question comment déterminer si une variable existe ou non dans une url ?. Et voilà que non satisfait des solutions proposées et ne trouvant pas le sommeil ce week-end, j'ai mis au point ce script. Je vous présente donc QSParser, une fonction javascript qui permet de manipuler entre autre location.search de Javascript et d'assigner, de modifier et d'effacer les variables qu'elle contient. Si au premier abord on peut se demander à quoi peut bien servir cette fonction... en y réflchissant de plus près je me demande si celle-ci ne représente pas un risque de sécurité en fonction du degré de connaissance de son utilisateur. Quoi qu'il en soit je suis assez fier de cette fonction car c'est l'une de mes premières réalisations 100% en javascript sans utilisation de W3CDOM, dingue non !!!

la Classe location de Javascript

Avant d'expliquer ma fonction QSParser, je tiens à expliquer la classe location de javascript pour les non initiés elle possède des infos que l'on n'exploite pas toujours dommage. utiliser le lien ci-dessous avant de lire les explications, car location va nous permettre d'accéder à différentes parties de cette URL.

les différentes propriétés et méthodes de `location`
cliquer d'abord sur le lien suivant : http://nyams.planbweb.com:80/astuces/QSParser/index.html?mavaleur=mavaleur#content
propriété	description
bien sur pour que les différentes propriétés renvoient une chaîne de caractère il faut que celle-ci soit présente dans l'url c'est-à-dire dans `location.href` Pour voir la différence entre `location.host` et `location.hostname` , il faut éxécuter cette page sous Opera, du moins c'est le seul navigateur testé qui rends compte réellement de la différrence entre les 2 propriété : dans le cas de `location.hostname` le numéro du port doit également être indiqué si il est présent. N'ayant pas de Mac sous la main je ne connais pas le comportement de Safari.
`location.protocol`	indique le protocole qu'utilise l'URI.
`location.host`	indique le nom du serveur qu'utilise l'URI
`location.hostname`	indique le nom du serveur qu'utilise l'URI
`location.pathname`	indique le chemin d'accès à la page chargée par l'URI
`location.search`	indique la requête envoyé au serveur.
`location.hash`	indique la partie sélectionnée de la page chargée par l'URI
`location.href`	indique la totalité de l'URI
`location.port`	indique le port utilisée par le serveur
`location.reload()`	recharge la page courante équivalent de actualiser/recharger de votre page
`location.replace(uri)`	charge la page `uri` et efface la page actuelle de l'historique de votre navigateur

QSParser mode d'emploi

init([string:url][, bool:debug]) :

Initialise QSParser. Si url n'est pas fourni ou si ce n'est pas une chaîne de caractères, la fonction s'initialise avec location.search.
Comme je suis un développeur j'ai ajouté une variable debug qui est un booléen. Si debug = true, elle permet d'afficher certains résultatis à l'écran... c'est un débug en forme d'alerte...

setVariable( string:variable_nom , variable_valeur ):

qui permet d'ajouter, de changer et d'effacer une variable. cette methode accepte 2 paramètres :

variable_nom : qui est le nom de la variable. variable_nom est obligatoirement une chaîne de caractères;
variable_valeur : qui représente la valeur qu'on assigne.variable_valeur peut être une chaîne de caractère , un tableau ou un objet;

setVariable a des limitations... Elle ne prendra en compte que des tableaux/objets d'une dimension.

removeVariable( string:variable_nom ):

qui permet d'effacer une variable. cette methode accepte 1 paramètre :

variable_nom : qui est le nom de la variable. variable_nom est obligatoirement une chaîne de caractères;

getVariable(string:variable_nom) :

qui permet de récupérer la donnée d'une variable présente dans la query string

getQueryString() :

qui permet de récupérer la donnée d'une variable présente dans la query string

reset() :

qui permet de réinitialiser location.search à null. similaire à un reset dans un formulaire

setURL([url]) :

Cette méthode permet de charger la page url avec la "query string" que l'on vient de créer. si url n'est pas fourni, c'est la page courante qui sera rechargée avec la nouvelle location.search

QSParser en action

Testons la fonction QSParser.js à l'aide de la variable testQSParser :

01 var testQSParser = function () {
02 	QSParser.init('?toto=truc&test[]=1&test[]=2&test1[toi]=moi&test1[moi]=toi',true);
03 	QSParser.getQueryString();
04 	QSParser.setVariable('example1','\xe0 conserver');
05 	QSParser.setVariable('example2','\xe0 virer');
06 	QSParser.setVariable('aliens',['ET','predator','freeza','brainiac','galactus']);
07 	QSParser.setVariable('alien',{'qui':'ET','quoi':'telephoner','ou':'maison'});
08 	QSParser.getQueryString(); 
09 	QSParser.getVariable('test1');
10 	QSParser.getVariable('test');
11 	QSParser.removeVariable('example2');
12 	QSParser.getQueryString();
13 	QSParser.reset();
14 	QSParser.setURL();
15 );

Tout d'abord on assigne à la variable testQSParser une fonction anonyme, c'est la ligne #1 du code. Ensuite les chose intéressantes commence, à la ligne #2 on initialise la fonction avec une variable et la seconde valeur à true afin d'utiliser les debug de la fonction.

01 var testQSParser = function () {
02 	QSParser.init('?toto=truc&test[]=1&test[]=2&test1[toi]=moi&test1[moi]=toi',true);

Comme nous sommes parties d'une requete on peut déjà à ce moment voir ce que la classe a garder comme paramètres.

03 	QSParser.getQueryString();

Les 4 lignes suivantes sont des exemples d'assignation de variable à la fonction, le mode debug nous montre bien que les variables sont bien assigner dans le cas des chaînes de caractès comme dans ceux des tableaux et des objets à une dimension. Enfin un récapitulatif des variables et des données est effectué grâce à queryString() en ligne #8

04 	QSParser.setVariable('example1','\xe0 conserver');
05 	QSParser.setVariable('example2','\xe0 virer');
06 	QSParser.setVariable('aliens',['ET','predator','freeza','brainiac','galactus']);
07 	QSParser.setVariable('alien',{'qui':'ET','quoi':'telephoner','ou':'maison'});
08 	QSParser.getQueryString();

remarques au sujet du Javascript

En Javascript, les caractères sont codés en UTF-8 c'est pourquoi à s'écrit \xe0
il existe 2 manières de déclarer un tableau :
- la manière historique : var tableau = new Array('val1','val2');
- la manière simplifiée : var tableau = ['val1','val2'];
il existe 2 manières de déclarer un objet :
- la manière historique :
  var obj = new Object(); obj.moi = me; obj.toi = you;
- la manière simplifiée : var obj = {'moi':'me','toi':'you'};

Les 2 lignes qui suivent, nous montre que la fonctions capable de récupérer les variables de la requêtes mais lorsque ceux-ci on appartiennent à la chaînes d'entrées.

09 	QSParser.getVariable('test1');
10 	QSParser.getVariable('test');

Les 2 lignes qui suivent, nous montre que la méthode QSParser.removeVariable() est fonctionnelle et que la variable disparait complètement de la requête.

11 	QSParser.removeVariable('example2');
12 	QSParser.getQueryString();

Enfin les 3 dernières lignes nous permettent d'utiliser les méthodes de ré-initialisation et de d'envoi de la requête avec QSParser. N'oublier pas de fermer la fonction anonyme et comme celle-ci est assigner à une variable : testQSParser de terminer l'assignation par un ;

13 	QSParser.reset();
14 	QSParser.setURL();
15 );

Voila vous savez tous maintenant, alors à vous de jouer. Et n'oubliez pas de télécharger ma fonction.

Une fonction javascript pour parser location.search

Pourquoi QSParser ?

la Classe location de Javascript

QSParser mode d'emploi

QSParser en action