JavaScript est un langage de script couramment utilisé qui peut être utilisé à la fois pour le développement front-end et back-end. Au cours du processus de développement front-end, il est souvent nécessaire d'envoyer des requêtes au serveur back-end via AJAX et d'obtenir des données de réponse. Parmi elles, la requête GET est la méthode de requête la plus couramment utilisée. Cet article explique comment utiliser JavaScript pour envoyer des requêtes GET et comment envoyer les paramètres de requête GET.
En JavaScript, vous pouvez utiliser l'objet XMLHttpRequest (objet XHR en abrégé) pour envoyer des requêtes HTTP. Voici un exemple simple d'utilisation d'un objet XHR pour envoyer une requête GET :
var xhr = new XMLHttpRequest(); xhr.open('GET', '/getUserInfo', true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; xhr.send();
Dans le code ci-dessus, un objet XHR est d'abord créé, et la méthode de requête est GET et l'adresse de la requête est /getUserInfo. Ensuite, un gestionnaire d'événements onreadystatechange est enregistré, et lorsque l'état de la réponse est 4 (indiquant que la demande est terminée) et que le code de réponse est 200, le texte de la réponse est imprimé. Enfin, la demande est envoyée via la méthode d'envoi.
Il convient de noter que XMLHttpRequest présente des problèmes de compatibilité dans IE6 et 7, les objets ActiveXObject doivent être utilisés à la place. Pour plus de détails, veuillez vous référer aux documents pertinents.
Dans les applications pratiques, il est souvent nécessaire d'envoyer des paramètres de requête au serveur backend. Dans une requête GET, les paramètres de requête sont généralement transmis via la chaîne de requête de l'URL. JavaScript peut être utilisé pour ajouter des paramètres de requête à l'URL en épissant l'URL, comme indiqué ci-dessous :
var username = 'Tom'; var age = 20; var xhr = new XMLHttpRequest(); xhr.open('GET', '/getUserInfo?username=' + username + '&age=' + age, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; xhr.send();
En épissant l'URL, les deux paramètres de requête, le nom d'utilisateur et l'âge, sont ajoutés à l'URL. Il convient de noter que si les paramètres de la requête contiennent des caractères non-ASCII tels que le chinois, un codage URL doit être effectué, sinon des caractères tronqués pourraient apparaître. Vous pouvez utiliser la fonction encodeURI pour l'encodage, comme indiqué ci-dessous :
var username = '小明'; var age = 20; var xhr = new XMLHttpRequest(); xhr.open('GET', '/getUserInfo?username=' + encodeURI(username) + '&age=' + age, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; xhr.send();
Dans le code ci-dessus, utilisez la fonction encodeURI pour encoder l'URL de la chaîne chinoise afin de garantir que les paramètres de la requête sont transmis correctement.
En plus d'épisser les URL, vous pouvez également utiliser la méthode setRequestHeader de l'objet XHR pour ajouter des paramètres de requête à l'en-tête de la requête. Comme indiqué ci-dessous :
var params = 'username=' + encodeURI('小明') + '&age=' + 20; var xhr = new XMLHttpRequest(); xhr.open('GET', '/getUserInfo', true); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; xhr.send(params);
Dans le code ci-dessus, les paramètres de la requête sont d'abord épissés sous la forme de "nom du paramètre = valeur du paramètre", et le résultat est stocké dans la variable params. Utilisez ensuite la méthode setRequestHeader pour définir le type de contenu de l'en-tête de requête sur application/x-www-form-urlencoded afin d'informer le serveur du format du paramètre de requête. Enfin, envoyez la requête via la méthode d'envoi et transmettez les paramètres de la requête.
Grâce à l'introduction ci-dessus, nous avons appris comment utiliser JavaScript pour envoyer des requêtes GET et comment envoyer des paramètres de requête GET. Dans les applications réelles, la méthode appropriée peut être sélectionnée pour transmettre les paramètres de requête en fonction de besoins spécifiques, réalisant ainsi une interaction des données frontales et back-end.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!