Networking gamit ang jQuery

9.1 $ object at ajax method sa jQuery

Ang jQuery ay mayroon ding espesyal na pandaigdigang bagay para sa pagtatrabaho sa network. Tulad ng maaari mong hulaan, ito ay tinatawag na $. Oo, iyon ang pangalan. Ngunit ito ay simple at maginhawa.

Sabihin nating gusto mong magpadala ng kahilingan sa isang API sa iyong JavaScript at iproseso ang natanggap na tugon. Ito ay maaaring gawin tulad nito:

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

Iyon lang, iyon lang ang code. $Tinatawag namin ang pamamaraan sa object ajax(), kung saan ipinapasa namin ang object na naglalarawan sa lahat ng kailangan namin: parehong kahilingan at tugon.

• Tinukoy ng field typeang uri ng kahilingan sa HTTP: GEToPOST
• urlTinutukoy ng field urlkung saan ipapadala ang kahilingan.
• dataTinutukoy ng field ang data ng kahilingan sa format na JSON
• Tinutukoy ng field ng tagumpay ang isang function na tatawagin pagkatapos ng matagumpay na tugon mula sa server.

9.2 Mga kapaki-pakinabang na query

Ngunit kung hindi mo kailangang maglipat ng anumang data, kung gayon ang kahilingan ay maaaring maisulat nang mas maikli. Halimbawa, maaari kang magsulat ng isang simpleng kahilingan sa POST tulad nito :

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

Alam mo ba kung ano ang ginagawa ng code $( ".result" ).html( data );? Subukan nating hulaan...

Nakahanap ito ng elemento na may klase ng resulta sa dokumento, at nagdaragdag ng HTML code sa loob nito - data data. Kaya sa ilang mga linya maaari kang mag-download ng data mula sa server at idagdag ito sa iyong pahina. Well, hindi ba ito isang kagandahan? :)

Ang isang kahilingan sa GET ay maaari ding isulat sa ilang linya:

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

Gusto mo bang mag-download at magsagawa ng script?

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

Kunin ang pinakabagong HTML page?

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

Mayroong ilang napakahusay na dokumentasyon ng jQuery sa internet:

jQuery API

jQuery.ajax()

Bilang karagdagan, ang lahat ng mga karaniwang tanong ay madaling i-google at nasa StackOverflow.