Keskustelu: Ohjelmointikysymykset: JavaScript, PHP: Ajax-haut ja latausikoni

Terve

Tein ohjelmaa, joka hakee tietokannasta tavaraa annetulla aikavälillä. Käytin lomakkeessa Ajaxia, jottei sivua tarvitse kokonaan päivittyä: en nimittäin halunnut tyhjentää lomaketta jokaisella haulla. Lisäksi tämä ratkaisu oli mielestäni aikas hieno, vaikka se vain omaan käyttööni tuleekin.

Lähetysnappulaa painettaessa haen PHP-sivun, jolle annan parametreiksi alkamis- ja loppumispäivät. Esimerkiksi näin: haku.php?d1=12/03/2011&d2=12/04/2011 Sivu hakee tietokannasta kaikki rivit tuolta aikaväliltä ja piirtää niiden mukaisen graafisen viivadiagrammin. Tuloste pistetään alkuperäisellä sivulla olevaan diviin.

Jos tietokantaan tulee samalla sivunlatauksella haetulle aikavälille lisää tavaraa ja hakee uudelleen (ilman, että painaa F5) samoilla kriteereillä, tulee vanha diagrammi. Uusinta tietoa ei olekkaan piirretty kuvaan, vaan kuva tuleekin jostain välimuistista.

Voisiko asiaa korjata jotenkin ohjelmapuolella, ettei tarvitsisi ottaa mitään välimuisteja pois käytöstä tai muuta sellaista?

Hakua käsittelevä koodinpätkä on tämän näköinen:

$(document).ready(function(){
    $("#haku").submit(function() {
	var d1 = $("#d1").val();
	var d2 = $("#d2").val();

	$("#oikea").html("<img src=\"ajax-loader.gif\">");
	$.ajax({
		type: "GET",
		url: "haku.php",
		data: "d1=" + d1 +"&d2=" + d2,
		success: function(data){
			$("#oikea").html(data);
		}
	});

	return false;
    });
});

Toisena ongelmana on tuo latausikoni. Ennen $.ajax-funktiota muutetaan #oikea-elementin sisällöksi kuva, mutta sitä ei koskaan näytetä. Haku kestää sen verran, että latausikoni olisi ihan kiva. Siinä tulee helposti painettua F5, kun ei näytä mitään tapahtuvan.

Tuon kakutus-ongelman voi ratkaista kahdella lähestymistavalla:

1) PHP-skriptissä sanot että sivu vanhenee välittömästi
2) Lisäät Ajax-hakuun ylimääräiseksi parametriksi esim. kellonajan tai satunnaisen arvon

Kakkoskysymykseen jos olisi tuo sivu josain kokeiltavissa niin voisin selvittää syyn näkymättömyyteen 30 sekunnissa. Sen sijaan en viitsi alkaa omaa testisivua pistämään pystyyn.

Lisäsin haku.php-tiedoston alkuun seuraavat rivit:

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");

Ei vaikutusta. Tämä oli otettu PHP:n kotisivuilta.

Lisäsin Javascriptin puolelle data-kohtaan + "&" + Math.round(new Date().getTime() / 1000), jonka löysin Googlella. Ei vaikutusta.

Kakkoskysymykseen sainkin vastauksen. Kuva näkyy kumminkin vain pienen hetken, vaikka lataus kestää kauemmin.

Jaa jaa, no sitten hommaat bugittomamman selaimen tai löydät sen todellisen ongelman aiheuttajan.

Jälleen tähänkin voisi antaa tarkempaa kommenttia jos sivua voisi testata jossain.

Ei ole pahemmin minulla Chromiumissa ollut bugeja.

Ongelmaa on nyt aika paha testata, kun en löytänyt palvelinta, jolla tuo JpGraph toimisi.

Jos käytän seuraavaa koodinpätkää, latausikoni näkyy joskus satunnaisesti.

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

Poimin sen jostain netistä, ja se toimi kyllä kerran pari ja muutaman sadan muunkin mielestä ko. foorumilla.

Millä tavalla sen diagrammin piirrät? Laitat nähtävästi vastauksen johonkin elementtiin HTML-muotoisena, joten diagrammi on varmaankin ilmaistu img-tagilla. Sinun pitää siis korjata kyseistä img-tagia tai kuvatiedostoa eikä suinkaan AJAX-pyyntöä tai vastauksen otsikoita.

Latausikoniongelmassa linkki sivullesi olisi todella tarpeen.

Niin, luulis että sieltä tulis aina eri urli kun generoidaan uusi kuva. Jos ei niin sitten sekin pitää korjata. Mutta tosiaan, jotenkin turhauttavaa arvailla mikä on vialla, kun esim. sen Chromiumin kehittäjäkonsolilla näkisi 15 sekunnissa mikä on vialla, jos vaan olisi urli millä testata.

Jep, vastaus tulee haku.php:ltä HTML-muotoisena, kuvat suoraan laitettuna img-tageihin. Lisäsin img-tagiin aikaleiman, ja nyt pelittää hyvin. Kiitos.

Skripti-ikkunasta löytyy ainoastaan tämmöinen virhe.

Chromium kirjoitti:

Uncaught Error: chrome.tabs is not supported in content scripts. See the content scripts documentation for more details.

Macro kirjoitti:

Skripti-ikkunasta löytyy ainoastaan tämmöinen virhe.

Olisinkin itse katsonut network-välilehdeltä, että mitä selain lataa cachesta jne.

Luin jQueryn dokumentaatiota, ja selvisi, että success-osuus suoritetaan heti pyynnön onnistumisen jälkeen. Luulin aluksi, että se suoritetaan vasta, kun sisältö on ladattu. complete suoritettaisiin vasta kun lataus on valmis, mutta se ei palauta vastausta.

Luit tai ymmärsit sitten väärin. Järki käteen nyt: tietenkin success ajetaan vasta, kun vastaus on tullut palvelimelta. Miten muuten funktio voisi saada vastauksen parametrina, tai mistä edes tiedettäisiin, onko pyyntö onnistunut? (HTTP-pyynnön onnistuminen tarkoittaa yleensä, että palvelin palauttaa 2-alkuisen statuskoodin.)

Edit: Et kai sentään luule, että itse diagrammi (img-tagissa mainittu kuvatiedosto) haettaisiin myös AJAX-pyynnöllä? Näinhän ei missään tapauksessa ole, vaan AJAX-pyyntösi palauttaa vain img-tagin – siis lyhyen HTML-koodin. Kuvan lataaminen alkaa vasta, kun laitat img-tagin osaksi sivua. Kuvan latautumista taas voi tarkkailla kuvaelementin onload-tapahtumalla tai useimmissa selaimissa tarkistamalla sen complete-ominaisuuden.