Maison  >  Article  >  interface Web  >  javascript appelle la méthode d'arrière-plan c

javascript appelle la méthode d'arrière-plan c

王林
王林original
2023-05-12 13:58:071061parcourir

En tant que langage de programmation front-end, JavaScript est principalement utilisé pour l'interaction et la dynamique des pages Web. Cependant, avec le développement de la technologie, JavaScript a attiré de plus en plus l'attention des développeurs en termes de programmation back-end. Surtout après l'émergence de Node.js, JavaScript est devenu un langage de programmation full-stack. Lors du développement en utilisant JavaScript en arrière-plan, l'appel de méthodes d'arrière-plan est une fonction importante. Présentons brièvement comment appeler des méthodes d'arrière-plan en JavaScript.

1. Utilisez l'objet XMLHttpRequest pour appeler des méthodes en arrière-plan

L'objet XMLHttpRequest est un objet couramment utilisé en JavaScript pour échanger des données avec le serveur. avec le serveur sans recharger la page. Mettre à jour la page Web.

1.1 Créer un objet

Lors de la création d'un objet XMLHttpRequest, vous pouvez utiliser le code suivant :

var xhr = new XMLHttpRequest();

1.2 Spécifier la méthode de requête et l'adresse de la requête# 🎜🎜 #

Après avoir créé l'objet XMLHttpRequest, vous devez spécifier la méthode de requête et l'adresse de la requête. La méthode de requête peut être GET ou POST, et l'adresse de la requête fait référence à l'adresse URL de la méthode d'arrière-plan. Ceci est réalisé grâce au code suivant :

xhr.open('GET', '/backend_method_url', true);

1.3 Envoyer une demande

Après avoir spécifié la méthode de demande et l'adresse de la demande, envoyez une demande au serveur via le code suivant : # 🎜🎜#
xhr.send();
#🎜 🎜#1.4 Définir la fonction de rappel

Une fois la demande envoyée, vous devez configurer une fonction de rappel pour traiter l'état et les données de la réponse à la demande. Ceci est réalisé grâce au code suivant :

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var responseText = xhr.responseText;
        console.log(responseText);
    }
}

Parmi eux, xhr.readyState représente le statut de l'objet XMLHttpRequest, et la valeur du statut est la suivante :

#🎜🎜 #0 : Non initialisé

1 : La méthode open a été appelée, mais la méthode send n'a pas été appelée
  • 2 : La méthode send a été appelée et la requête est envoyé
  • 3 : Les données renvoyées par le serveur sont en cours de réception# 🎜🎜#
  • 4 : Après avoir reçu toutes les données, vous pouvez utiliser l'attribut réponseText pour obtenir toutes les données de réponse
  • xhr.status représente le code d'état HTTP La valeur du code d'état est la suivante : #🎜 🎜#
  • 200 : Demande réussie
  • # 🎜🎜#404 : La ressource demandée n'existe pas

500 : Erreur serveur

    # 🎜🎜#1.5 Envoyer les données
  • En plus d'obtenir les données de la méthode en arrière-plan, nous pouvons également envoyer certaines données lors d'une requête à la méthode en arrière-plan. Ceci est réalisé grâce au code suivant :
  • xhr.send('user_name=Tom&password=123456');
  • Le paramètre de la méthode 'send' est les données à envoyer, qui peuvent être sous la forme d'une chaîne ou de données de formulaire. Il peut être reçu via les paramètres de la méthode en arrière-plan.
  • 2. Utilisez l'API fetch pour appeler les méthodes en arrière-plan

fetch L'API est une nouvelle API de requête réseau qui peut être utilisée pour remplacer l'objet XMLHttpRequest. L'utilisation de l'API fetch facilite la création de requêtes AJAX et le traitement des données de réponse.

2.1 Envoyer une requête

La manière d'envoyer une requête à l'aide de l'API fetch est la suivante :

fetch('/backend_method_url', {
    method: 'GET'
}).then(function (response) {
    return response.text();
}).then(function (data) {
    console.log(data);
});

Le premier paramètre est l'adresse URL de la méthode d'arrière-plan, et le premier paramètre est l'adresse URL de la méthode d'arrière-plan. Les deux paramètres sont des objets contenant des informations telles que la méthode de demande, l'en-tête de la demande et le corps de la demande.

2.2 Traitement de la réponse

En termes de traitement de la réponse, les données de réponse peuvent être traitées via la méthode then. Dans la première méthode, les données de réponse peuvent être converties sous forme de texte pour un traitement facile.

Ce qui suit est un exemple complet d'utilisation de l'API fetch pour envoyer une requête :

fetch('/backend_method_url', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        user_name: 'Tom',
        password: '123456'
    })
}).then(function (response) {
    return response.json();
}).then(function (data) {
    console.log(data);
}).catch(function (error) {
    console.log(error);
});

3 Utilisez le framework jQuery pour appeler des méthodes en arrière-plan

#🎜🎜. #jQuery est une bibliothèque JavaScript couramment utilisée, qui fournit de nombreuses fonctionnalités optimisées pour simplifier la programmation JavaScript. Lors des requêtes AJAX, l'utilisation de jQuery peut compléter plus facilement le traitement des requêtes et des réponses.

3.1 Envoyer une requête

Lorsque vous utilisez jQuery pour envoyer une requête, vous pouvez utiliser le code suivant pour y parvenir :

$.ajax({
    url: '/backend_method_url',
    type: 'GET'
}).done(function (data) {
    console.log(data);
}).fail(function (error) {
    console.log(error);
});

L'url L'attribut ' spécifie l'adresse URL de la méthode d'arrière-plan, l'attribut 'type' spécifie la méthode de requête.

3.2 Envoyer des données

Lorsque vous utilisez jQuery pour envoyer des données, cela peut être réalisé via le code suivant :

$.ajax({
    url: '/backend_method_url',
    type: 'POST',
    data: {
        user_name: 'Tom',
        password: '123456'
    }
}).done(function (data) {
    console.log(data);
}).fail(function (error) {
    console.log(error);
});

L'attribut 'data' spécifie les données à envoyer.

Ce qui précède explique comment utiliser JavaScript pour appeler des méthodes d'arrière-plan. Étant donné que JavaScript interagit avec l'arrière-plan de manière plus courante, la syntaxe du code est plus simple et seules quelques lignes de code sont nécessaires pour terminer les méthodes normales. opérations. Bien sûr, il existe de nombreux détails et points de connaissances que nous devons comprendre et utiliser lors de l'écriture de fonctions d'arrière-plan. Heureusement, il existe de nombreux excellents didacticiels et cas sur Internet que nous pouvons apprendre et consulter. De plus en plus de développeurs choisissent d'utiliser JavaScript pour développer le backend. C'est également parce que JavaScript présente de nombreux avantages en termes de syntaxe et de fonctionnalités. J'espère que le contenu ci-dessus pourra être utile à tout le monde.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn