AJAX - jak go tutaj użyć?

Dobry.

Otóż chciałbym na swojej stronie zrobić tak, ażeby po kliknięciu w link/obrazek z menu, pojawił mi się dany tekst, który pobrany jest z bazy danych, z odpowiedniej tabeli i kolumny.

Dotychczas nie miałem do czynienia z bazami danymi, więc wystarczył mi ten skrypt:

CSS:

a{color:#ffffff;font:normal 12px Arial;text-decoration:none;}
#a1{display: block;}
#a2, #a3, #a4, #a5, #a6, #a7, #a8, #a9, #a10, #a11{display: none;}

JavaScript:

<script type="text/javascript">
function CoreMowiPokaz(co) {
var ile = 11;
for(var i=1; i<=ile; i++) {
var ktora = "a"+i;
if(ktora == co) {
document.getElementById(ktora).style.display = "block";
}
else if(ktora != co) {
document.getElementById(ktora).style.display = "none";
}
}
}
</script>

HTML:

<div id="a1">asd</div>
<div id="a2">qwe</div>

<a href="#pierwszy" onClick="CoreMowiPokaz('a1'); return false;">1<img src="img.gif"></a>
<a href="#drugi" onClick="CoreMowiPokaz('a2'); return false;">2<img src="img.gif"></a>

Mój aktualny skrypt wygląda tak:

<?php
connection(); 
$wynik = mysql_query("SELECT * FROM test")
or die('Błąd zapytania');
if(mysql_num_rows($wynik) > 0) {
    while($r = mysql_fetch_assoc($wynik)) {
	echo "<tr class=rowa>";
	echo "<td class=col1 cell width=30px>".$r['id']."</td>";
	echo "<td class=col2 cell width=150px>".$r['data']."</td>";
	echo "<td class=col3 cell width=40px>".$r['przedmiot']."</td>";
	echo "<td class=col4 cell width=13px><center><img src=obrazki/icon_info.gif width=13px height=13px title=\"".$r['opis']."\"></center></td>";
	echo "<td class=col5 cell width=13px><center><img src=obrazki/icon_hash.gif width=13px height=13px title=\"".$r['notatka']."\"></center></td>";
	echo "</tr>";
}
}
?>

I jak zrobić, żeby notatka pojawiła się w innym miejscu (np. frame) po kliknięciu na obrazek?
AJAX wybrałem, ponieważ nie chcę, aby strona się przeładowywała bez końca, chodzi tylko o przeładowanie konkretnego miejsca z jednoczesnym wydobyciem danych z bazy danych