Mise en réseau avec jQuery

9.1 Objet $ et méthode ajax dans jQuery

jQuery a également un objet global spécial pour travailler avec le réseau. Comme vous pouvez le deviner, il s'appelle $. Oui, c'est le nom. Mais c'est simple et pratique.

Supposons que vous souhaitiez envoyer une requête à une API dans votre JavaScript et traiter la réponse reçue. Cela peut être fait comme ceci :

$.ajax({
  type: "POST",
  url: "api.codegym.cc",
  data: {name: 'Bill', location: 'Radmond'},
  success: function(msg){
    alert( "Person found: " + msg );
  }
});

C'est tout, c'est tout le code. $Nous appelons la méthode sur l'objet ajax(), où nous passons l'objet qui décrit tout ce dont nous avons besoin : à la fois la requête et la réponse.

• Le champ typeprécise le type de requête HTTP : GETouPOST
• Le champ urlprécise urlà qui la demande sera envoyée.
• Le champ dataspécifie les données de la requête au format JSON
• Le champ success spécifie une fonction à appeler après une réponse réussie du serveur.

9.2 Requêtes utiles

Mais si vous n'avez pas besoin de transférer de données, la demande peut être écrite encore plus courte. Par exemple, vous pouvez écrire une simple requête POST comme ceci :

$.post("ajax/test.html", function( data ) {
  $( ".result" ).html( data );
});

Savez-vous à quoi sert le code $( ".result" ).html( data );? Essayons de deviner...

Il trouve un élément avec la classe result dans le document et y ajoute du code HTML - data data. Ainsi, en quelques lignes, vous pouvez télécharger des données depuis le serveur et les ajouter à votre page. Eh bien, n'est-ce pas une beauté? :)

Une requête GET peut également être écrite en quelques lignes :

$.get("ajax/test.html"., function( data ) {
  $( ".result" ).html( data );
});

Vous souhaitez télécharger et exécuter un script ?

$.ajax({
  method: "GET",
  url: "test.js",
  dataType: "script"
});

Obtenir la dernière page HTML ?

$.ajax({
  url: "test.html",
  cache: false
})
  .done(function( html ) {
    $( "#results" ).append( html );
  });

Il existe une très bonne documentation jQuery sur Internet :

API jQuery

jQuery.ajax()

De plus, toutes les questions courantes sont facilement googlables et se trouvent sur StackOverflow.