jQuery - AJAX

AJAX-metodit

AJAX:n (lyhenne Asynchronous JavaScript and XML) voidaan vaihtaa (lähettää/vastaanottaa) tietoja palvelimen kanssa ja päivittää web-sivun osia, lataamatta koko sivua uudelleen.

HUOMAA TÄMÄ! AJAX-metodeilla toimiessa tiedostot on oltava www-palvelimella.

Taulukossa on AJAX-metodit:

Metodi Metodin selitys
$.ajax() Suorittaa asynkronisen AJAX-pyynnön, "asynkroninen" - kommunikoinnin osapuolet eivät ole ajallisesti toisistaan riippuvaisia.
Käsittelee mukautettuja Ajax-asetuksia tai muokkaa olemassa olevia asetuksia ennen jokaisen pyynnön lähettämistä ja ennen kuin $.ajax() käsittelee ne. EI ESIMERKKIÄ !
$.ajaxSetup() Asettaa oletusarvot tulevia AJAX-pyyntöjä varten
Luo objektin, joka käsittelee Ajax-tietojen todellista lähetystä. EI ESIMERKKIÄ !
$.get() Lataa tiedot palvelimelta AJAX HTTP:n GET-pyynnön avulla
$.getJSON() Lataa JSON-koodattuja tietoja palvelimelta HTTP:n GET-pyynnön avulla
Vanhentunut versiossa 3.0, käytä sen sijaan JSON.parse():ta. Ottaa JSON-merkkijonon ja palauttaa tuloksena olevan JavaScript-arvon
$.getScript() Lataa (ja suorittaa) JavaScriptin palvelimelta AJAX HTTP:n GET-pyynnön avulla
$.param() Luo sarjamuotoisen esityksen taulukosta tai objektista (voidaan käyttää URL-kyselymerkkijonona AJAX-pyynnöille)
$.post() Lataa tiedot palvelimelta AJAX HTTP:n POST -pyynnöllä
ajaxComplete() Määrittää toiminnon joka suoritetaan kun AJAX-pyyntö on valmis
ajaxError() Määrittää toiminnon joka suoritetaan jos AJAX-pyyntö on virheellinen
ajaxSend() Määrittää toiminnon joka suoritetaan ennen AJAX-pyynnön lähettämistä
ajaxStart() Määrittää toiminnon joka suoritetaan kun ensimmäinen AJAX-pyyntö alkaa
ajaxStop() Määrittää toiminnon joka suoritetaan kun kaikki AJAX-pyynnöt on suoritettu
ajaxSuccess() Määrittää toiminnon joka suoritetaan kun AJAX-pyyntö on suoritettu onnistuneesti
load() Lataa tiedot palvelimelta ja sijoittaa palautetut tiedot valittuun elementtiin
serialize() Muuttaa joukon lomake-elementtejä merkkijonoksi lähetystä varten
serializeArray() Muuttaa joukon lomake-elementtejä nimien ja arvojen merkkijonoksi


load() metodi

Metodilla load voidaan ladata tiedosto palvelimelta näytettäväksi wwww-sivulla.
Näytettävä eli www-sivulle ladattava tiedosto on oltava www-palvelimella !

Esimerkissä ladataan www-sivulle viesti.txt tiedosto painiketta klikkaamalla. Huomaa, esimerkissä painikeella on id-tunniste:

tässä - alla kesken 

 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("viesti.txt");
  });
 });
 </script>
 
 HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <div id="div1"><h3>Tähän kohtaa ladataan viesti.txt tiedoston sisältö</h3></div>

 <button class="button"> Lataa tiedosto esille </button>

viesti.txt tiedosto, sisältö:
<H3> Tämä on H3-otsikko elementti </H3>
<p id="p1"> Tässä on tekstiä p-elementissä. <br> 
 Teksti html-koodauksineen on kirjoitettu aluksi WIN muistiolla. </p>

Tulos www-sivulla:


HUOM! Koodaus,

$("#div1").load("viesti.txt #p1");

Koodaus avaisi näkyville viesti.txt tiedostosta ainoastaan id="p1" -tunnisteiset teksti-elementit.

load - metodin atribuuteista

Tiedosto voidaan testata ennen sen lataamista näytettäväksi www-sivulla käyttämällä atribuutteja:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("viesti2.txt", function(responseTxt, statusTxt, xhr){
      if(statusTxt == "success")
        alert("Sisällön lataus onnistui!");
      if(statusTxt == "error")
        alert("Virhe: " + xhr.status + ": " + xhr.statusText);
    });
  });
});
 </script>
 
 HTML-koodaus body-elementtiin:
 <div id="div1"><h3> Vaihtuva teksti </h3></div>

 <button class="button"> Tarkista ja näytä tiedoston teksti </button>

viesti2.txt tiedosto, sisältö:
<H3> Tämä tiedosto on tarkistettu </H3>
<p> JQuery ei ole kovin vaikeaa kun sitä treenaa. </p>

Tulos www-sivulla:


get() metodi

Lataa tiedoston sisällön palvelimelta AJAX HTTP:n GET-pyynnön avulla.
Näytettävä ajax1-php tiedoston teksti näytetään selaimen alert-ikkunassa:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
$(document).ready(function(){
  $("button").click(function(){
    $.get("ajax1.php", function(data, status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  });
});
 </script>
 
 HTML-koodaus, body-elementtiin:
 <button class="button">Onnistuuko PHP:lle kikkailu</button>

ajax1.php tiedosto, sisältö:
&?php
   echo "Tämä on esimerkin ajax1.php sisältämää tekstiä.";
?>

Tulos www-sivulla, www-sivulla näkyy vain painike:


post() metodi

Lataa tiedoston sisällön palvelimelta AJAX HTTP:n GET-pyynnön avulla.
Näytettävä ajax1-php tiedoston teksti näytetään selaimen alert-ikkunassa:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $("button").click(function(){
    $.post("ajax2.php",
    {
      valtio: "Suomen",
      kaupunki: "Helsinki"
    },
    function(data,status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  });
 });;
 </script>
 
 HTML-koodaus, body-elementtiin:
 <button class="button">Lähetä POST-metodilla tietoa, paina painiketta</button>

ajax2.php tiedosto, sisältö:
&?php
  $teksti1 = $_POST["valtio"];
  $teksti2 = $_POST["kaupunki"];
  echo "Eurooppalaisen valtion $teksti1 pääkaupunki on $teksti2.";
?>

Tulos www-sivulla, www-sivulla näkyy vain painike:


ajax() metodi

Suorittaa asynkronisen AJAX-pyynnön.
Näytettävä eli www-sivulle ladattava tiedosto on oltava www-palvelimella !

Esimerkissä ladataan www-sivulle viesti.txt tiedosto painiketta klikkaamalla. Huomaa, esimerkissä painikeella on id-tunniste:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("viesti.txt");
  });
 });
 </script>
 
 HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <div id="div1"><h3>Tähän kohtaa ladataan viesti.txt tiedoston sisältö</h3></div>

 <button class="button"> Lataa tiedosto esille </button>

viesti.txt tiedosto, sisältö:
<H3> Tämä on H3-otsikko elementti </H3>
<p id="p1"> Tässä on tekstiä p-elementissä. <br> 
 Teksti html-koodauksineen on kirjoitettu aluksi WIN muistiolla. </p>

Tulos www-sivulla:


ajaxSetup() metodi

Asettaa oletusarvot tulevia AJAX-pyyntöjä varten.

Painikkeella avataan div-elementtiin ajax3.txt-tiedosto jolloin teksti vaihtuu:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $("button").click(function(){
    $.ajaxSetup({url: "ajax3.txt", success: function(result){
      $("div").html(result);}});
    $.ajax();
  });
 });
 </script>
 
HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <div id="div1"><h3> Jos tässä vaihtuu teksti, homma toimi. </h3></div>

 <button class="button"> Vaihda teksti </button>


ajax3.txt tiedosto, sisältö:
 <h3> Tässä olisi h3-elementillä otsikko</h3>
 <p> Tekstiä joka on kirjoitettu p-elementin sisään </p>
 <p> Tässä ei ole mitään muuta html-koodausta ! </p>

Tulos www-sivulla:


getJSON() metodi

Lataa JSON-koodattuja tietoja palvelimelta HTTP:n GET-pyynnön avulla.

Painikkeella avataan div-elementtiin JSON_dataa.js-tiedosto, tiedoston teksti näkyy painikkeen alla:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $("button").click(function(){
    $.getJSON("JSON_dataa.js", function(result){
      $.each(result, function(i, field){
        $("div").append(field + " ");
      });
    });
  });
 });
 </script>
 
HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <button class="button"> äytä JSON-dataa </button>

 <div> </div>


JSON_dataa.js tiedosto, sisältö:
 {"name":"Jussi Koskinen perus-insinööri"}

Tulos www-sivulla:


Painikkeella avataan div-elementtiin JSON_dataa2.js-tiedosto, tiedoston teksti näkyy painikkeen alla:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
  $(document).ready(function() {
    $("#klikattu").click(function(event) {
       $.getJSON('JSON_dataa2.js', function(emp) {
          $('#nayta').html('<p> Nimi: ' + emp.nimi + '</p>');
          $('#nayta').append('<p> Ikä : ' + emp.ika + '</p>');
          $('#nayta').append('<p> Tehtävä: ' + emp.tehtava + '</p>');
          $('#nayta').append('<p> Yritys: '
          + emp.yritys 
          + '<</p>');
       });
    });
  });
 </script>
 
HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <button class="button" id="klikattu"> Näytä JSON-dataa /button>

 <div id="nayta"> </div>


JSON_dataa2.js tiedosto, sisältö:
 { 
  "nimi": "Terhi Tomera", 
  "ika" : "23", 
  "tehtava": "FronEnd-ohjelmoija", 
  "yritys":"Tosi koodarit Oy" 
 }

Tulos www-sivulla:


getScript() metodi

Lataa (ja suorittaa) JavaScriptin palvelimelta AJAX HTTP:n GET-pyynnön avulla.

Painikkeella avataan selaimen alert-ikkunaan ajaxJS1.js-tiedoston sisältämä funktio ja sen teksti:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $("button").click(function(){
    $.getScript('ajaxJS1.js', function(jd){
	ekaJS();
   });	
  });
 });;
 </script>
 
HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <button class="button"> Näytä JS-tiedostosta </button>


ajaxJS1.js tiedosto, sisältö:
 function ekaJS(){
   alert("Tämä on JS-funktio ekaJS ja näyttää alert:ina tekstiä.");
 }

Tulos www-sivulla:


$.param() metodi

Luo sarjamuotoisen esityksen taulukosta tai objektista (voidaan käyttää URL-kyselymerkkijonona AJAX-pyynnöille).

Esimerkissä on aluksi jQuery:llä luotu henkilo-objekti ja sen jälkeen painikkeella näytetään objektin tiedot:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  henkiloObj = new Object();
  henkiloObj.etunimi = "Jussi";
  henkiloObj.sukunimi = "Koskela";
  henkiloObj.ika = 50;
  henkiloObj.silmienvari = "sininen"; 
  $("button").click(function(){
    $("div").text($.param(henkiloObj));
  });
 });
 </script>
 
HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <div> </div><br>
 <button class="button"> Näytä henkilö-objekti </button>

Tulos www-sivulla:


ajaxComplete() metodi

Määrittää toiminnon joka suoritetaan kun AJAX-pyyntö on valmis .

Esimerkissä tiedoston lataumisen ajaksi näytetään gif-animaatiota:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $(document).ajaxStart(function(){
    $("#wait").css("display", "block");
  });
  $(document).ajaxComplete(function(){
    $("#wait").css("display", "none");
  });
  $("button").click(function(){
    $("#txt").load("ajax7.php");
  });
 });
 </script>
 
HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <div id="txt"><h2> Ajax vaihtaa tähän tekstin </h2></div>

<button class="button"> Vaihda teksti </button>

<div id="wait" 
  style="display:none;width:69px;height:89px;
  border:1px solid black;position:absolute;
  top:50%;left:50%;padding:2px;"><img src='Spinner-5.gif' width="64" height="64" />
  <br> Lataa..</div>
  
 ajax7.php tiedoston koodaus: 
 <?php
    echo "<span style='color:DarkViolet'>
	Ja teksti tuli hetkessä vaihdetuksi, tämä on php-tiedosto.</span><br>";
 ?>

Tulos www-sivulla:


ajaxError() metodi

Määrittää toiminnon joka suoritetaan jos AJAX-pyyntö on virheellinen.

Esimerkki koodaus antaa alert-ilmoituksen:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $(document).ajaxError(function(){
    alert("Tapahtui virhe! Tiedostoa ei löydy.");
  });
  $("button").click(function(){
    $("div").load("ei_ole_olemassa.txt");
  });
 });
 </script>
 
HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <div id="txt"><h2> Ajax vaihtaa tähän tekstin </h2></div>

 <button class="button"> Vaihda teksti </button>

Tulos www-sivulla:


ajaxSend() metodi

Määrittää toiminnon joka suoritetaan ennen AJAX-pyynnön lähettämistä.

Esimerkki koodaus, esimerkki koodaus avaa ajax7.php tiedoston div-elementtiin:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $(document).ajaxSend(function(e, xhr, opt){
    $("div").append("<p>Avataan " + opt.url + "</p>");
  });
  $("button").click(function(){
    $("div").load("ajax7.php");
  });
 });
 </script>
 
HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <div id="txt"><h2> Ajax vaihtaa tähän tekstin </h2></div>

 <button class="button"> Vaihda teksti </button>

 ajax7.php tiedoston koodaus: 
 <?php
    echo "<span style='color:DarkViolet'>
	Ja teksti tuli hetkessä vaihdetuksi, tämä on php-tiedosto.</span><br>";
 ?>

Tulos www-sivulla:


ajaxStart() metodi

Määrittää toiminnon joka suoritetaan kun ensimmäinen AJAX-pyyntö alkaa.

Esimerkki koodaus, esimerkki koodaus avaa ajax7.php tiedoston div-elementtiin:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $(document).ajaxStart(function(){
    $(this).html("<img src='Spinner-5.gif'>");
  });
  $("button").click(function(){
    $("div").load("ajax7.php");
  });
 });
 </script>
 
HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <div id="txt"><h2> Ajax vaihtaa tähän tekstin </h2></div>

 <button class="button"> Vaihda teksti </button>

 ajax7.php tiedoston koodaus: 
 <?php
    echo "<span style='color:DarkViolet'>
	Ja teksti tuli hetkessä vaihdetuksi, tämä on php-tiedosto.</span><br>";
 ?>

Tulos www-sivulla:


ajaxStop() metodi

Määrittää toiminnon joka suoritetaan kun kaikki AJAX-pyynnöt on suoritettu.

Esimerkki koodaus, esimerkki koodaus avaa viesti2.txt ja ajax7.php tiedoston div-elementtiin:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
$(document).ready(function(){
  $(document).ajaxStop(function(){
    alert("Kaikki AJAX toiminnot on suoritettu.");
  });
  $("button").click(function(){
    $("div").load("viesti2.txt");
    $("div").load("ajax7.php");
  });
});
 </script>
 
HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <div id="txt"><h2> Ajax vaihtaa tähän tekstin </h2></div>

 <button class="button"> Vaihda teksti </button>

Tulos www-sivulla:


Success() metodi

Määrittää toiminnon joka suoritetaan kun AJAX-pyyntö on suoritettu onnistuneesti.

Esimerkki koodaus, esimerkki koodaus avaa viesti2.txt ja ajax7.php tiedoston div-elementtiin:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $(document).ajaxSuccess(function(){
    alert("AJAX-pyyntö suoritettu onnistuneesti.");
  });
  $("button").click(function(){
    $("div").load("viesti2.txt");
  });
 });
 </script>
 
HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <div id="txt"><h2> Ajax vaihtaa tähän tekstin </h2></div>

 <button class="button"> Vaihda teksti </button>

Tulos www-sivulla:


serialize() metodi

Muuttaa joukon lomake-elementtejä merkkijonoksi lähetystä varten.

Esimerkki koodaus, näyttää painikkeen klikkauksella lomakekentän arvot painikkeen alle:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $("button").click(function(){
    $("div").text($("form").serialize());
  });
 });
 </script>
 
HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <form action="">
  Etunimi: <input type="text" name="Etunimi" value="Anna"><br>
  Sukunimi: <input type="text" name="Sukunimi" value="Anjala"><br>
 </form>

 <button class="button"> Näytä lomakkeen arvot </button><br>

 <div> </div>

Tulos www-sivulla:


serializeArray() metodi

Muuttaa joukon lomake-elementtejä nimien ja arvojen merkkijonoksi.

Esimerkki koodaus, näyttää painikkeen klikkauksella lomakekentän arvot painikkeen alle:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $("button").click(function(){
    var x = $("form").serializeArray();
    $.each(x, function(i, field){
      $("#tulokset").append(field.name + ":" + field.value + " ");
    });
  });
 });
 </script>
 
HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <form action="">
  Etunimi: <input type="text" name="Etunimi" value="Eero"><br>
  Sukunimi: <input type="text" name="Sukunimi" value="Raittinen"><br>
 </form>

 <button class="button">Näytä lomakekentän tiedot <</button>

 <div id="tulokset"> </div>

Tulos www-sivulla:


Design and edit player