Keskustelu: Nettisivujen teko: AJAX: Tietojen järkevä hakeminen

Othnos [27.03.2010 14:55:51]

Tervehdys Ohjelmointiputkalaiset!

Ongelmani tällä kertaa on kuinka järkevästi toteuttaa AJAXin avulla tietojen hakua. Olen ohjelmointiputkan ja W3schoolsin AJAX oppaiden avulla päässyt hieman alkuun, mutta seuraavalle ongelmalle en keksi hyvää ratkaisua.

Minulla on select lista jossa on asiat 1-5. Minun pitäisi napista saada tiedot 1-5 ja toisen kerran klikatessa jälleen asiat 1-5.

Koodini on seuraavaa (javascript kopioitu lähes sellaisenaan ohjelmointiputkan oppaasta) ja sitä voi kokeilla osoitteessa http://koti.mbnet.fi/mattisav/index.php

index.php
<html>
	<head>
		<script type="text/javascript">

		// Esitellään muuttuja XMLHTTPRequest-objektille:
		var Pyynto;
		var tila = 0;

		// Alustetaan Pyynto-muuttuja sopivalla tavalla riippuen käytettävästä selaimesta:
		function alustaPyynto()
		{
		    // Jos käytettävä selain on Internet Explorer:
		    if(window.ActiveXObject)
		    {
		        Pyynto = new ActiveXObject("Microsoft.XMLHTTP");
		    }
		    // Jos käytettävä selain on jokin muu, esim. Mozilla, Opera, Safari:
		    else if(window.XMLHttpRequest)
		    {
		        Pyynto = new XMLHttpRequest();
		    }
		}

		// Käytetään POST-muuttujia tiedon välittämiseen palvelimelle
		function suoritaPyynto()
		{
			tila++;

		    // Alustetaan ensin Pyynto-muuttuja kutsumalla edellä toteutettua funktiota:
		    alustaPyynto();

		    // Määritellään funktio, joka suoritetaan, kun vastaus palvelimelta on saapunut:
		    Pyynto.onreadystatechange = kasitteleVastaus;

		    // Käytetään POST-muuttujia tiedon lähettämiseen asynkronisesti
		    // palvelimelle tarkista.php-nimiselle skriptille:
		    Pyynto.open("POST", "tiedot.php", true);

		    // Asetaan HTTP-otsake kertomaan sisällön tyyppi:
		    Pyynto.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

		    // Lähetetään pyyntö palvelimelle:
		    Pyynto.send("tila="+ tila +"");
		}


		function kasitteleVastaus()
		{
		    // Tarkistetaan, onko pyyntö suoritettu kokonaan:
		    if(Pyynto.readyState == 4)
		    {
		        // Tarkistetaan, onko pyynnön suoritus onnistunut:
		        if(Pyynto.status == 200)
		        {
		            // Jos kaikki on kunnossa, käsitellään saapunut data:
					document.getElementById('test').innerHTML=Pyynto.responseText;
		        }
		        else
		        {
		            alert("Pyynnön suorituksessa on tapahtunut virhe!");
		        }
		    }
		}

		</script>
	</head>
	<body>
		<div id="test">
			<select>
				<?php
				for ($i = 1; $i < 6; $i++)
				{
					echo '<option>tieto'.$i.'</option>';
				}
				?>
				<option onclick="suoritaPyynto()">></option>
			</select>
		</div>
	</body>
</html>

Ja haettava tiedosto

tiedot.php
<?php

$tila=$_POST['tila'];

if($tila % 2 == 1)
{
	echo '<select>';
	for ($i = 1; $i < 6; $i++)
	{
		echo '<option>asia'.$i.'</option>';
	}
	echo '<option onclick="suoritaPyynto()"><</option>';
	echo '</select>';
}
else
{
	echo '<select>';
	for ($i = 1; $i < 6; $i++)
	{
		echo '<option>tieto'.$i.'</option>';
	}
	echo '<option onclick="suoritaPyynto()">></option>';
	echo '</select>';
}

?>

Mikä olisi järkevä tapa toteuttaa kyseinen toiminto?

PS: HTML-koodin sisennys vinkkejä otan vastaan ja kuinka php:tä kannattaa lisätä HTML-koodin sekaan.

Jokotai [27.03.2010 18:52:51]

Tämän hetkinen tapa on hyvä, mutta monet tykkäävätt nappuloista.
Jostain syystä nappuloitten pitää mennä 45^o reunoilta ja niiden pitää luoda kolmiulotteinen efekti jossa valittu on taaempana(joskus edempänä) kuten välilehdissä. Jos siisentää HTML-koodia niin siinä hyvä sisenny on samanlainen kuin C++:ssa esimerkillinen sisennys, mutta googlen lähdekoodi on hyvä esimerkki siitä ettei sisentelyä tarvita.

Kray [27.03.2010 20:18:10]

Seuraavaksi voisit kertoa miten viestisi liittyy aiheeseen...

Jokotai [27.03.2010 20:36:04]

Kray kirjoitti:

Seuraavaksi voisit kertoa miten viestisi liittyy aiheeseen...

Othnos kirjoitti:

Mikä olisi järkevä tapa toteuttaa kyseinen toiminto?

PS: HTML-koodin sisennys vinkkejä otan vastaan ja kuinka php:tä kannattaa lisätä HTML-koodin sekaan.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen