Noniin asiaan:
Perustietona tarvitsee osata (X)HTML ja JavaScript vähintään. Tosin PHP / muu palvelinpuolen ohjelmointikieli on lähes ehdoton minkään asian hyödyntämiseksi, samoin kuin CSS. Tästä oppaasta saa seuraavanlaisen sivun AJAX md5 ja sha-1 laskuri. (IE7 ei toimi aivan täysin oikein, Firefox toimii).
Tehdään ensin perus index.php -tiedosto:
- Koodi: Valitse kaikki
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jscript.js"></script>
</head>
<body>
<form name="ajaxTest" action="">
<strong>Teksti:</strong>
<input type="text" onkeyup="doHash(this.value)" name="textEdit" />
<br />
<strong>MD5</strong><input checked="checked" type="radio" value="1" name="textSelect" onchange="selectHash(this.value, textEdit.value)" />
<br />
<strong>SHA-1</strong><input type="radio" value="2" name="textSelect" onchange="selectHash(this.value, textEdit.value)" />
</form>
<strong id="hash">MD5:</strong> <span id="md5"></span>
</body>
</html>
Nyt huomaamme <input> tageissa olevat onkeyup ja onchange merkinnät.
onkeyup="doHash(this.value)" suorittaa doHash funktion kyseisen <input> kentän arvolla, kun näppäin päästetään ylös.
onchange="selectHash(this.value, textEdit.value)" suorittaa selectHash funktion kyseisen <input> kentän arvolla, sekä myös textEdit -nimellä olevan kentän arvolla , kun kyseisen kentän arvo vaihtuu.
index.php:n lisäksi tarvitsemme tietysti JavaScript koodia, joka on sijoitettu jscript.js -tiedostoon:
- Koodi: Valitse kaikki
hash = 1;
function selectHash(selected, str)
{
if (selected > 0)
{
hash = selected;
if (selected == 1)
{
document.getElementById("hash").innerHTML = "MD5";
doHash(str);
}
else if (selected == 2)
{
document.getElementById("hash").innerHTML = "SHA-1";
doHash(str);
}
else
{
document.getElementById("hash").innerHTML = "Virhe";
}
}
else
{
return hash;
}
}
function GetXmlHttpObject()
{
var xmlHttp = null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function doHash(str)
{
xmlHttp = GetXmlHttpObject()
if (xmlHttp == null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url = "ajax.php";
url = url+"?q="+str+"&e="+selectHash(0);
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState == 4)
{
document.getElementById("md5").innerHTML = xmlHttp.responseText;
}
}
hash -muuttuja alustetaan arvolla 1, jotta MD5-hash olisi valittu aluksi
Ehtolauseet pitäisi olla tiedossa jo etukäteen, joten selvitetään vain muutama dynaamisuutta tekevä ominaisuus.
document.getElementById("hash").innerHTML = "MD5"; etsii id="hash" tagin ja innerHTML muuttaa kyseisen tagin sisällöksi MD5. Eli jos aluksi on <span id="hash">Testi</span>, niin tämä muuttaa sen muotoon <span id="hash">MD5</span>. innerHTML on siis tärkeä osa tekstin muuttamiseen ilman uudelleenlatausta.
GetXmlHttpObject() on suoraan w3schools.com:ista otettu ja se luo xmlHttp -objektin. Tätä ei tarvitse ainakaan toistaiseksi muutella.
xmlHttp.onreadystatechange = stateChanged; -Suoritetaan stateChanged -funktio, joka tarkastaa että vastaus on valmis. (if (xmlHttp.readyState == 4))
xmlHttp.open("GET",url,true); ja xmlHttp.send(null); -Suorittaa kyselyn määritettyyn osoitteeseen, tässä esimerkissä ajax.php:lle.
Lopuksi tarvitaan vielä JavaScriptin pyyntöihin vastaava PHP-pätkä, ajax.php
- Koodi: Valitse kaikki
<?php
if ($_GET['e'] == 1)
{
echo md5($_GET['q']);
}
elseif ($_GET['e'] == 2)
{
echo sha1($_GET['q']);
}
else
{
echo "Virhe";
}
?>
Lisäinfoa:
Kaikki JavaScript -tapahtumat
Ehdottakaa jotain parannuksia jne.. Kaikkea en selittyänyt tarkoituksella, sillä alkutietoa käytetyistä ohjelmointikielistä olisi hyvä olla
