Nettverk med jQuery

9.1 $-objekt og ajax-metode i jQuery

jQuery har også et spesielt globalt objekt for arbeid med nettverket. Som du kan gjette, heter det $. Ja, det er navnet. Men det er enkelt og praktisk.

La oss si at du vil sende en forespørsel til et API i JavaScript og behandle det mottatte svaret. Dette kan gjøres slik:

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

Det er det, det er all koden. $Vi kaller metoden på objektet ajax(), hvor vi sender objektet som beskriver alt vi trenger: både forespørselen og svaret.

• Feltet typespesifiserer typen HTTP-forespørsel: GETellerPOST
• Feltet urlspesifiserer urlhvilken forespørselen skal sendes til.
• Feltet dataspesifiserer forespørselsdataene i JSON-format
• Suksessfeltet spesifiserer en funksjon som skal kalles etter et vellykket svar fra serveren.

9.2 Nyttige spørsmål

Men hvis du ikke trenger å overføre noen data, kan forespørselen skrives enda kortere. Du kan for eksempel skrive en enkel POST-forespørsel som dette :

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

Vet du hva koden gjør $( ".result" ).html( data );? La oss prøve å gjette...

Den finner et element med resultatklassen i dokumentet, og legger til HTML-kode i det - data data. Så på et par linjer kan du laste ned data fra serveren og legge dem til siden din. Vel, er det ikke en skjønnhet? :)

En GET-forespørsel kan også skrives på et par linjer:

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

Vil du laste ned og kjøre et skript?

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

Få den siste HTML-siden?

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

Det er veldig god jQuery-dokumentasjon på internett:

jQuery API

jQuery.ajax()

I tillegg er alle vanlige spørsmål enkelt googlet og ligger på StackOverflow.