Jau turėjote progą susipažinti su prototype.js biblioteka, šiandien norėčiau jums pristatyti . Pirmą kartą pažvelgęs į pavyzdį, pagalvojau, kad jinai daro viską išskyrus tai, ką reikia. Ne, neskubėkit daryti išvadų, aš nesakau, kad yra blogai ir nevertas jūsų dėmesio. Pabandykim pasiaiškinti. Iki šiol mano supratimu buvo tik duomenų mainai tarp kliento ir serverio, kaip tik būtent tai labai gerai atlieka prototype.js ir atrodo nieko čia nesugalvosi. Bet žmonės sugalvoja… Kaip jau minėjau su galima padaryti viską: pridėti elementui stilių, pašalinti stilių, pridėti papildomų laukų arba juos panaikinti ir visus šiuos dalykus galima atlikti pasitelkiant įvairias animacijas. Tačiau ar tikrai viso to reikia?

Jeigu tikėjotės čia rasti atsakymą į mano aukščiau pateiktą klausimą, tai turiu jus nuvilti - atsakymo čia nebus. Šiame straipsnyje susipažinsime su parašydami kokį nors paprastą pavyzduką. O diskusiją ko reikia ir ko ne atidėsime ateities straipsniams.
Iš pradžių norėjau parašyti galeriją, po ilgų ieškojimų radau turbūt kokius penkis skirtingus įskiepius (angl. plugins) skirtus galerijai, kuriuos dar kažkaip patobulinti pasirodė sudėtinga. Manau, jums nesukels problemų įsidėti įskiepį, kuris labiausiai atitinka jūsų poreikius.
Taigi reikėjo sugalvoti ką nors kitą, nusprendžiau pabandyti pasidžiaugti ir tuo pačiu parašyti nedidelę pokalbių programą. Tiesa, kodą aš jau parašiau, nes jeigu būčiau rašęs kartu kodą ir straipsnį, tai keiksmažodis būtų kas trečias žodis. Taip, šitą straipsnį galima pavadinti: “norit sudėtingai?” Bet apie viską iš pradžių.

Straipsnio rašymui naudojama:

PHP 5.2.3
 1.2.3

Internetinė pokalbių programa tikrai negali apsieiti be MySQL DB, nuo to ir pradėsime:

CREATE TABLE `messages` (
  `id` int(7) NOT NULL AUTO_INCREMENT,
  `user` varchar(255) NOT NULL,
  `msg` text NOT NULL,
  `time` int(11) NOT NULL,
  PRIMARY KEY  (`id`)
);

Kaip matote iš kodo, mes saugome vartotojo vardą, žinutės tekstą ir laiką (unix timestamp) kada žinutė buvo parašyta.

Dabar truputis PHP kodo, pateikiu jį tik todėl, kad tai gali būti įdomūs sprendimai pradedantiesiems (tačiau aš tikrai šiuo straipsniu nemokau kodo kultūros)

// namuose to nedarykite, tai YRA pavojinga :)
foreach($_GET as $key => $value)
{
   $$key = mysql_real_escape_string($value); 
}
 
if(@$ac == 1)
{
  mysql_query("INSERT INTO messages (`user`,`msg`,`time`) VALUES ('$nick','$mytext',".time().")");
 
}

Šis kodas iš GET masyvo paima visas reikšmes, jas apdoroja, kad kas nors nesugalvotų padaryti SQL-injection, nežinau ar du doleriai geriau už vieną, bet šiuo atveju jie sukuria kintamuosius pagal GET masyvo reikšmes, t.y. jie atlieka tokį veiksmą:

$_GET['kintamasis']='reiksme';
$kintamasis=$_GET['kintamasis'];

Pasibandykite suprasti.

@ - ženklas prieš $ac reikalingas, tam kad nemestų klaidos. Jeigu darant tvarkingai, tai pirmiausia reiktų patikrinti ar iš viso toks kintamasis $ac egzistuoja (isset) ir tik po to tikrinti kam lygi jo reikšmė.

Jau turime kodą, kuris įterpia įrašą, dar reikia kodo, kuris tą įrašą paima iš duomenų bazės.

if(!$time)
   $time=time() - 10;
$messages = mysql_query("SELECT user,msg FROM messages WHERE time>$time ORDER BY id ASC ");
$i=0;	
$number=mysql_num_rows($messages);					 
while($message = mysql_fetch_array($messages)){
   $chat[$i]['mytext'] = htmlspecialchars(stripslashes($message['msg']));
   $chat[$i]['nick'] = htmlspecialchars(stripslashes($message['user']));
   $i++;
}
$chat['time']=time();
$chat['number']=$number;
echo json_encode($chat);

Kam reikalingas $time kintamasis paaiškinsiu kai analizuosim javascript kodą. Toliau išimam reikiamus įrašus, juos apdorojam, o galiausiai viską paverčiam į objektą, ką padaryti su PHP labai lengva. Pastaba: json_encode veikia tik nuo PHP 5.2.0.

Dabar pereikime prie dalies.

//var time=parseInt(new Date().getTime().toString().substring(0, 10));
var time =0;
$(document).ready(function() {
	chatClock();
 	$('#button').click(function() {
		var nick = $('#nick').attr('value');
		var mytext = $('#mytext').attr('value');
 
	 	$.getJSON("msg.php", 
  	   		{ nick: nick, mytext: mytext, time: time, ac: 1 }, 
  			function(json){ 
    		 	parseJson(json)
  			} 
	 	);
   });
});
 
function chatClock(){
	$.getJSON("msg.php", 
  	  	{ time: time }, 
  		function(json){ 
    		 parseJson(json)
  		} 
	 );
	setTimeout('chatClock()', 10000);  
} 
 
function parseJson(msg){
	time=msg['time'];
	number=msg['number'];
	for (i=0;i<number;i++)
	{
	  addChatLine(msg[i]['nick'], msg[i]['mytext'])
		}
}
 
function addChatLine(nick, mytext){
	if($("li").size()>10)   
		$("ul li:first").remove();
    $("ul").append("<li><b>"+nick+":</b>"+mytext+"</li>"); 
}

Pradėkime nuo time. Pirmiausia nuo to, kam reikalinga ilga eilutė. Jeigu paimtume tik dalį Date().getTime() tai gautume kažkokių 14 simbolių, tuo tarpu, kai PHP komanda duoda tik 11. Na, o jeigu tiksliau, tai ne kažkokius simbolius javascript sugeneruoja, o pateikia laiką milisekundėmis, o mums reikia sekundėmis. Antras dalykas, kodėl ta eilutė užkomentuota? Jinai skaičiuoja viską gerai, bet veikia kliento dalyje, o jeigu serverio ir kliento laikrodžiai nesutampa? Taigi pirmą kartą laikui priskiriamas nulis, o kiekvieną sekantį kartą serveris atsiunčia paskutinės užklausos laiką.

$(document).ready - pavadinkim tai kaprizu. Šis kaprizas nurodo, kad veiksmai bus vykdomi tik tuomet, kai puslapis pilnai užsikraus. Toliau kviečiam komandą, kuri atnaujina pokalbių programos langą.
Jeigu mygtukas paspaudžiamas $(’#button’).click mes pagal id paimame laukų reikšmes ir kviečiame skriptą. mums siūlo net kelias galimybes, pagrindinė yra $., tačiau atsieit šitoje komandoje yra žemas abstrakcijos lygis, todėl primygtinai siūloma naudotis kitais metodais: $.get ir $.post. Iš pavadinimo turbūt galite suprasti, kaip tie metodai paduoda duomenis. Tiesa, yra dar ir $.getJSON, kuris veikia GET būdu, ar tik man vienam atrodo, jog tai visiška nesąmonė? Kodėl negalima pasirinkti duomenų perdavimo būdo aš nesupratau. Aišku tą vieną užklausą galėjau parašyti maždaug taip:

$.ajax({ 
  type: "POST", 
  url: "msg.php", 
  data: "ac=1&nick="+nick+"&mytext="+mytext+"&time="+time, 
 success: function(result){ 
    parseJson(result);
  } 
	 	});

Gautus rezultatus apdoroja pačių pasirašyta funkcija parseJson. Prieš nagrinėjant toliau turbūt norėtųsi žinoti, ką būtent grąžina mūsų skriptas:

{"0":{"mytext":"labas kaip tau sekasi?","nick":"NePo"},"time":1205247338,"number":1}

number parodo kiek žinučių yra grąžinama, nesugalvojau, kito būdo kaip sužinoti skaičių, jeigu kas žino, būtinai pasidalinkit. Cikle kviečiama funkcija, kuri prideda naujas eilutes į mūsų pokalbių langą. $(”li”) paima visus puslapyje esančius li elementus, nustatome jų skaičių ir jeigu jų daugiau negu 10 tai patį pirmą ištriname. Skaičių 10 aš nurašiau iš lempos, taigi jūs galite nusirašyti kitą skaičių arba išvis nedėti jokių limitų. Jeigu norės kalbėti daugiau nei du žmonės, tai tokie ribojimai gali sukelti problemų. append elemento pabaigoje prideda dar vieną, norėdami įterpti pradžioje turėtumėte naudoti prepend. Pastaba: visos šios funkcijos dirba su visais puslapio elementais, kadangi mano puslapyje yra tik vienas ul, tai aš darau ką noriu, o jums reiktų atsižvelgti į savo puslapio dizainą ir šiek tiek pasitobulinti šią vietą.

Ir paskutinė funkcija apie kurią dar nekalbėjome yra chatClock, jinai vėlgi vykdo užklausą, tačiau tik su vienu parametru, kadangi neįrašo jokių duomenų, tik paima naujausias žinutes. setTimeout(’chatClock()’, 10000); ši komanda susideda iš dviejų dalių, pirmoji nurodo kokią funkciją vykdyti, antroji kas kiek laiko milisekundėmis. Dabar nustatytas atnaujinimo laikas yra 10 sekundžių.

Jeigu kam nors įdomu įdedu ir html kodą:

<ul id='#chat'>
<li>Pixel.lt pokalbių programa</li>
</ul>
<hr>
<form name="myform" id="myform" >
Vardas <input  type="text" name="nick"  id="nick" size="6"> Tekstas <input  type="text" name="mytext"  id="mytext">
  <input type="button" name="button" id="button" value="Gerai" ></form>

npchat.png

Štai ir viskas, suprantu, kad kodas atrodo labai paprastai, bet tokį paprastą kodą man parašyti prireikė ne vienos valandos ir ne vieną keiksmažodį ištarti. Kuo labiau gilinausi į , tuo jis man atrodė tik gražus fasadas su tuščiu vidumi, tuo labiau man kilo noras gilinti savo žinias prototype.js srityje.

Sukurtos programos kodą galite rasti čia

Naudingos nuorodos pasiskaitymui:
jQuery: Write less, do more
jQuery for JavaScript programmers
Learning jQuery
Easy Ajax with jQuery
jQuery Tutorials for Designers
Visual jQuery
API Browser - labai, labai naudingas dalykas, jeigu bent kiek žinot, ką norit padaryti
Oficialus puslapis

Panašūs straipsniai


“Mano penktas Ajax scenarijus - rėksnių dėžė.” komentarų: 3

  1. kran

    Kiekvienam pagal skonį - man jQuery nepamainomas pagalbininkas kasdien :)
    Pastebėjimai:
    $(’#nick’).attr(’value’) gražiau rašyt $(’#nick’).val();
    $(document).ready(function() {/*..*/}); gali keist į $(function() {/*..*/}) ir joks tai ne kaprizas ;)

  2. elt.lt » Blog Archive » Apžvalga. Šiandien aš skaičiau… #62

    […] „Ajax” kalba scenarijaus rašymo pamokėlė praplėsianti pradedančių programuotojų akiratį su gausiais autoriaus komentarais, kas ir kaip […]

  3. Jonas

    Taigis, kad labai pagal skonį. Kaip autorių erzina jQuery, taip mane prototipas erzina.
    Kažkas yra įdomiai pastebėjęs - jQuery yra JS biblioteka dizaineriams. Daug eye candy, labai gera dokumentacija ir pavyzdžiai, ir šiaip viskas tikrai “write less”, nes mano jQuery kodai daugiau kelių eilučių dažniausiai neužima.

Rašyti komentarą

Jūs privalote prisijungti jeigu norite rašyti komentarą.