Netwerken met jQuery

9.1 $ object en ajax-methode in jQuery

jQuery heeft ook een speciaal globaal object om met het netwerk te werken. Zoals je kunt raden, heet het $. Ja, dat is de naam. Maar het is eenvoudig en handig.

Stel dat u een verzoek naar een API in uw JavaScript wilt sturen en de ontvangen reactie wilt verwerken. Dit kan als volgt:

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

Dat is alles, dat is alle code. $We noemen de methode op het object ajax(), waar we het object doorgeven dat alles beschrijft wat we nodig hebben: zowel het verzoek als het antwoord.

• Het veld typespecificeert het type HTTP-verzoek: GETofPOST
• Het veld urlgeeft aan urlwaarnaar het verzoek wordt verzonden.
• Het veld dataspecificeert de aanvraaggegevens in JSON-indeling
• Het succesveld specificeert een functie die moet worden aangeroepen na een succesvolle reactie van de server.

9.2 Nuttige vragen

Maar als u geen gegevens hoeft over te dragen, kan het verzoek nog korter worden geschreven. U kunt bijvoorbeeld een eenvoudig POST-verzoek als volgt schrijven :

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

Weet jij wat de code doet $( ".result" ).html( data );? Laten we proberen te raden...

Het vindt een element met de resultaatklasse in het document en voegt er HTML-code aan toe - data data. Dus in een paar regels kunt u gegevens van de server downloaden en aan uw pagina toevoegen. Nou, is het geen schoonheid? :)

Een GET-verzoek kan ook in een paar regels worden geschreven:

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

Wilt u een script downloaden en uitvoeren?

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

De nieuwste HTML-pagina ophalen?

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

Er is een aantal zeer goede jQuery-documentatie op internet:

jQuery-API

jQuery.ajax()

Bovendien zijn alle veelgestelde vragen gemakkelijk te googlen en staan ​​ze op StackOverflow.