Comment transmettre des variables avec XMLHTTPRequest ?

Question

Comment envoyer des variables au serveur avec XMLHTTPRequest ? Dois-je simplement les ajouter à la fin de l'URL de la page d'accueil ? GET demande, comme ?variable1=?variable2= etc.

Donc plus ou moins :

XMLHttpRequest("GET", "blahblah.psp?variable1=?" + var1 + "?variable2=" + var2, true)

Answer 1

Si vous voulez passer des variables au serveur en utilisant GET, c'est la bonne solution. N'oubliez pas de les échapper (urlencode) correctement !

Il est également possible d'utiliser POST, si vous ne voulez pas que vos variables soient visibles.

Un échantillon complet serait :

var url = "bla.php";
var params = "somevariable=somevalue&anothervariable=anothervalue";
var http = new XMLHttpRequest();

http.open("GET", url+"?"+params, true);
http.onreadystatechange = function()
{
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(null);

Pour tester cela, (en utilisant PHP) vous pourriez var_dump $_GET pour voir ce que vous récupérez.

Answer 2

Le formatage manuel de la chaîne de requête convient pour les situations simples. Mais cela peut devenir fastidieux lorsque les paramètres sont nombreux.

Vous pouvez écrire une fonction utilitaire simple qui se charge de la mise en forme de la requête.

function formatParams( params ){
  return "?" + Object
        .keys(params)
        .map(function(key){
          return key+"="+encodeURIComponent(params[key])
        })
        .join("&")
}

Et vous l'utiliseriez de cette façon pour construire une demande.

var endpoint = "https://api.example.com/endpoint"
var params = {
  a: 1, 
  b: 2,
  c: 3
}

var url = endpoint + formatParams(params)
//=> "https://api.example.com/endpoint?a=1&b=2&c=3"

Il existe de nombreuses fonctions utilitaires permettant de manipuler les URL. Si vous avez JQuery dans votre projet, vous pourriez donner à http://api.jquery.com/jquery.param/ un essai.

Elle est similaire à la fonction d'exemple ci-dessus, mais gère la sérialisation récursive d'objets et de tableaux imbriqués.

Answer 3

Si vous êtes allergique à la concaténation de chaînes et que vous n'avez pas besoin de la compatibilité IE, vous pouvez utiliser URL y URLSearchParams :

const target = new URL('https://example.com/endpoint');
const params = new URLSearchParams();
params.set('var1', 'foo');
params.set('var2', 'bar');
target.search = params.toString();

console.log(target);

Ou pour convertir les paramètres d'un objet entier :

const paramsObject = {
  var1: 'foo',
  var2: 'bar'
};

const target = new URL('https://example.com/endpoint');
target.search = new URLSearchParams(paramsObject).toString();

console.log(target);

Answer 4

Le format correct pour transmettre des variables dans une requête GET est le suivant

?variable1=value1&variable2=value2&variable3=value3...
                 ^ ---notice &--- ^

Mais en gros, vous avez la bonne idée.

Answer 5

La méthode suivante est correcte :

xmlhttp.open("GET","getuser.php?fname="+abc ,true);