Les chaînes de requêtes (QueryStrings) correspondent à des informations associées à l'adresse URL avec un point d'interrrogation comme séparateur.

http://www.laltruiste.com/page.html?chaine_de_requete

Une chaîne de requête doit être constituée d'un ou plusieurs éléments dont chacun est associé à une valeur.Si la chaîne de requête contient plusieurs éléments, alors chaque couple élément/valeur doit être séparé par un caractère esperluette (&).

?element=valeur&element2=valeur2&...&elementN=valeurN

L'inconvénient principal des chaînes de requêtes réside dans le fait que les données transmises au serveur par ce biais sont visibles par les utilisateurs dans le champ Adresse de leur navigateur.

De plus, une chaîne de requêtes ne peut dépasser le maximum de 255 caractères.

Ainsi, l'utilisation de cette technique peut générer des problèmes de sécurité et des limitations quant à la taille des données à transmettre à une application Web.

Il existe deux méthodes pour l'utilisation des chaînes de requêtes :

  • L'insertion des informations directement après l'adresse URL de la page à atteindre. 
    <form action="page.html?element=valeur"
            method="post">
  <input type="text" name="nom" value="DUPUIS">
  <input type="text" name="prenom" value="Michel">
  <input type="submit" name="Soumettre" value="Soumission">
</form>
  • L'application de la valeur GET à l'attribut method d'un formulaire. 
    <form action="page.html" method="get">
  <input type="text" name="nom" value="DUPUIS">
  <input type="text" name="prenom" value="Michel">
  <input type="submit" name="Soumettre" value="Soumission">
</form>

Dans le premier cas, seules les informations contenues dans l'adresse indiquée par l'attribut action, seront envoyées par l'intermédiaire de la collection QueryString.

element=valeur

Dans le second cas, tous les éléments du formulaire seront transmis au moyen de la collection QueryString, à la page destinataire soit page.html.

nom=DUPUIS&prenom=Michel

En conséquence, l'expression method="get" provoque la transmission complète et automatique d'un formulaire à partir d'une chaîne de requête.

La propriété search de l'objet location permet d'extraire une chaîne de requêtes contenu dans l'adresse URL transmise, soit l'ensemble des éléments et leur valeur associée y compris celle du bouton de soumission et le fameux point d'interrogation introduisant la chaîne de requête.

document.write (window.location.search);
// Retourne
?nom=DUPUIS&prenom=Michel&Soumettre=Soumission

Le point d'interrogation peut être supprimé afin de ne conserver que la chaîne de requête à proprement parler.

var requete = window.location.search.subString(1);

Ensuite, chaque paire clé/valeur de la chaîne de requête peuvent être dissocier par l'intermédiaire de la méthode split().

var elements = requete.split("&");

Chaques paires clé/valeur désormais stockées dans un tableau peuvent être exploités pour récupérer séparément les identificateurs, des valeurs.

for(i = 0; i < elements.length; i++) {
  temp = elements[i].split("=");
  tab[i][0] = temp[0];
  tab[i][1] = unescape(temp[1]);
}

A partir de ce tableau associatif, une simple boucle va permettre de parcourir l'ensemble des éléments.

document.write("<ol>");
for(i = 0; i < tab.length; i++) {
  document.write("<li>" + tab[i][0] + " : " + tab[i][1] + "</li>");
}
document.write("<ol>");
// affiche
<ol>
  <li>nom : DUPUIS</li>
  <li>prenom : Michel</li>
  <li>Soumettre : Soumission</li>
</ol>
Exemple [voir] 
<!-- Formulaire -->
<html>
  <body>
    <form 
          action="traitement.html"
          method="get"
          name="formGet">

      <u>Saisir un titre :</u><br>
      <input type="text" name="Titre" value="Fatrasie" size="20"><br>

      <textarea name="Paragraphe" cols="30" rows="4">
        La chose va très mal
        Où point n'a de justice
        La chose va très mal
        Dit un veau de métal
      </textarea>

      <input type="submit" name="Soumettre" value="Soumission">

  </form>

  </body>
</html>

<html>
  <body>
    <h2>La chaîne de requête</h2>
    <script lan language="JavaScript" type="text/javascript">
      var tab_args = new Array();
      var temp = new Array();

      var requete = location.search.substring(1);

      document.write("<h4>" + requete + "</h4>");

      var tab_paires = requete.split("&");

      for(var i = 0; i < tab_paires.length; i++) {
        temp = pairs[i].split("=");
        tab_elts[i] = new Array(temp[0], unescape(temp[1]));
      }

      for(i = 0; i < tab_elts.length; i++) {
        document.write(tab_elts[i][0] + " : " 
                    + tab_elts[i][1] + "<br>");
      }
    </script>
  </body>
</html>