Obtenir des données à partir d'une URL en JavaScript
Dans cet article, nous allons apprendre et utiliser diverses fonctions JavaScript utiles pour charger les données de l’URL vers notre page Web et effectuer d’autres opérations sur ces données en conséquence.
Obtenir des données à partir d’une URL en JavaScript
Il existe plusieurs fonctions intégrées et externes dans JavaScript pour charger des données à l’aide d’une URL. Cette URL appelle une requête API pour une fonction créée côté serveur et renvoie les données pour répondre à la requête.
Nous pouvons envoyer une requête avec un type de méthode différent, mais dans cet article, nous aborderons la méthode GET, qui est principalement utilisée pour obtenir des données du côté serveur vers le côté client. Il existe plusieurs façons de faire une requête GET en JavaScript répertoriées ci-dessous.
- Méthode
Fetch - Requête HTTP XML
Méthode fetch()
La méthode fetch() est un moyen avancé de faire une requête réseau en JavaScript, et les derniers navigateurs le supportent. Nous pouvons utiliser la méthode fetch() pour charger les données du serveur en envoyant une requête au serveur sans rafraîchir la page Web.
On peut utiliser la méthode async await avec une requête fetch pour faire une promesse de manière compacte. Dans tous les navigateurs avancés, les fonctions Async sont prises en charge.
Syntaxe de base :
let requestRsponse = fetch(url, [params])
<script>
async function funcRequest(url){
await fetch(url)
.then((response) => {
return response.json(); // data into json
})
.then((data) => {
// Here we can use the response Data
}).
.catch(function(error) {
console.log(error);
});
}
const url = 'URL of file';
funcRequest(url);
</script>
Dans la source JavaScript ci-dessus, nous avons déclaré la fonction async await funcRequest(), qui obtiendra URL comme argument et utilisé la méthode fetch avec le mot-clé await et la fonction de rappel définie then() et traduisez la réponse en données JSON.
Nous avons utilisé la méthode catch avec console.log() si une erreur se produit afin qu’elle affiche l’erreur dans les journaux. Enfin, nous avons enregistré l’URL et l’avons transmise à funcRequest(url);.
Requête HTTP XML
Il s’agit d’une API sous la forme d’un objet qui transfère des données entre un navigateur Web et un serveur Web. XMLHttpRequest est principalement utilisé dans la programmation AJAX (Asynchronous JavaScript and XML).
Ce n’est pas un langage de programmation, mais AJAX est un ensemble de techniques de développement Web qui utilisent plusieurs technologies Web pour développer des applications Web asynchrones côté client.
Syntaxe de base avec GET :
<script>
my_variable = new XMLHttpRequest(); // object
my_variable.onload = function() {
// Here, we can use the response Data
}
my_variable.open("GET", "MY_FILE_URL");
my_variable.send();
</script>
Dans le source JavaScript ci-dessus, nous avons créé l’objet XMLHttpRequest, puis nous avons défini la fonction de rappel lors du chargement d’une requête. Nous avons utilisé la fonction open, passé le type et l’URL de la méthode de requête en argument, et appelé la méthode send() de XMLHttpRequest.