Analyser la chaîne de requête en JavaScript

1. Lien hypertexte factice
2. Syntaxe de parseQuery

Dans ce didacticiel, nous examinons le fonctionnement des chaînes de requête d’analyse en JavaScript, mais avant d’aller plus loin, revoyons l’histoire et voyons pourquoi nous avons besoin de ces chaînes de requête en premier lieu ?

Une chaîne de requête est une partie d’un lien hypertexte ou d’une URL qui vient juste après le point d’interrogation ? il définit des valeurs sur des variables appelées clés ou paramètres, quelque peu similaires à un dictionnaire python. Il envoie des données d’une page Web à une autre tout en récupérant les données spécifiées de la base de données ou du serveur Web.

Lien hypertexte factice

www.mysite
    .com  // default.aspx?username=user+1&units=kgs&units=pounds&permission=false

Dans le lien hypertexte ci-dessus, cette partie fait référence à la requête :

username = user + 1 & units = kgs& units = pounds& permission = false

Nous parlons ici de la chaîne de requête, ce qui signifie que ce processus va prendre une partie de notre chaîne de requête et la traiter. Cette chaîne de requête analysée joue un rôle important dans le renvoi ou la récupération des demandes de données.

Voici à quoi ressemblerait une requête analysée :

username = user 1

Voyons maintenant un exemple plus tangible qui montre comment JavaScript analyse la chaîne de requête du lien hypertexte donné en passant par plusieurs cas de test ; Dans cet exemple, notre fonction parseQuery prend le lien hypertexte en argument et recrache la requête analysée sous la forme d’un objet JavaScript.

Syntaxe de parseQuery

parseQuery(query)

• query : la chaîne spécifique transmise en tant que requête.

function parseQuery(query) {
  object = {};

  if (query.indexOf('?') != -1) {
    query = query.split('?');
    query = query[1];
  }

  parseQuery = query.split('&');

  for (var i = 0; i < parseQuery.length; i++) {
    pair = parseQuery[i].split('=');
    key = decodeURIComponent(pair[0]);
    if (key.length == 0) continue;
    value = decodeURIComponent(pair[1].replace('+', ' '));

    if (object[key] == undefined)
      object[key] = value;
    else if (object[key] instanceof Array)
      object[key].push(value);
    else
      object[key] = [object[key], value];
  }

  return object;
};

Commençons par créer un objet vide, puis notre requête ou lien hypertexte est rompu à partir de ? pour se débarrasser de l’URL excédentaire.

Une fois cela fait, nous divisons notre requête de & pour obtenir ce que l’on appelle l’attribut et sa valeur sous la forme d’une liste qui est itérée pour extraire la valeur et l’attribut individuellement.

Maintenant, la paire clé-valeur vérifiera certains des cas de test, et enfin, à partir de la valeur restante, nous remplaçons tout signe + par un espace qui nous donne une valeur plus lisible.

Passons en revue nos cas de test :

Cas 1

parseQuery('username=Eren&units=kgs&permission=true');

Dans ce cas, nous passons une requête au lieu d’une URL username=Eren&units=kgs&permission=true ce qui se passera, c’est qu’il sautera le premier bloc if, et comme il y a plus d’une paire clé/valeur, la requête est divisée , et cette ligne de code est vérifiée car nous n’avons pas de clés en double.

if (object[key] == undefined) object[key] = value;

Production :

{ 
    username: 'Eren', 
    units: 'kgs', 
    permission: 'true' 
}

Cas 2

parseQuery(
    'http:/www.mysite.com//default.txt?username=David+Rogers&units=kgs&permission=false');

Maintenant, nous utilisons le lien hypertexte complet

http: /www.mysite.com/ / default.txt ? username = David + Rogers& units =
                                                      kgs& permission = false

comme argument et la condition if donnée ci-dessous devient True et ce bloc extraira la requête de notre lien hypertexte

if (query.indexOf('?') != -1) {

Production :

{ 
    username: 'David Rogers', 
    units: 'kgs', 
    permission: 'false' 
}

Cas 3

parseQuery(
    'http:/www.mysite.com//default.txt?username=user1&insect=%D0%B1%D0%B0%D0%B1%D0%BE%D1%87%D0%BA%D0%B0');

Essayons de donner une URL contenant un message codé.

http: /www.mysite.com/ / default.txt ? username = user1& insect = % D0 % B1 %
    D0 % B0 % D0 % B1 % D0 % BE % D1 % 87 % D0 % BA % D0 % B0

Nous avons utilisé la fonction decodeURIComponent() pour décoder ce message.

Production :

{ 
    username: 'user 1', 
    insect: 'бабочка' 
}

Cas 4

parseQuery(
    'http:/www.mysite.com//default.txt?username=Eren&units=kgs&permission=false&units=pounds');

Enfin, nous considérons un lien hypertexte contenant des clés en double

http: /www.mysite.com/ / default.txt ?
    username = Eren& units = kgs& permission = false& units = pounds

pour la première valeur en double sous la ligne de code s’exécutera et créera un tableau.

else object[key] = [object[key], value];

Après cela, chaque entrée en double sera poussée dans ce tableau.

else if (object[key] instanceof Array) object[key].push(value);

Production :

 {
  username: 'Eren',
  units: [ 'kgs', 'pounds'],
  permission: 'false'
}