Selamun aleykum*

Bir çok sitede karşılaştım ve hoşuma gitmişti nasıl yapıldığını merak edenler için…

Kod:

<SCRIPT LANGUAGE="JavaScript1.2">

<!–//

// your message here

var msg=’Cod3r.org !’;

var font=’Verdana*Arial’;

var size=3; // up to seven

var color=’#000000’;

// This is not the rotation speed* its the reaction speed* keep low!

// Set this to 1 for just plain rotation w/out drag

var speed=.2;

// This is the rotation speed* set it negative if you want

// it to spin clockwise

var rotation=.2;

// Alter no variables past here!* unless you are good

//—————————————————

var ns=(document.layers);

var ie=(document.all);

var msg=msg.split(’’);

var n=msg.length;

var a=size*15;

var currStep=0;

var ymouse=0;

var xmouse=0;

var scrll=0;

var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)

window.pageYOffset=0

// writes the message

if (ns){

for (i=0; i < n; i++)

document.write(’<layer name="nsmsg’+i+’" top=0 left=0 height=’+a+’ width=’+a+’><center>’+props+msg+’</font></center></layer>’);

}

if (ie){

document.write(’<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">’);

for (i=0; i < n; i++)

document.write(’<div id="iemsg" style="position:absolute;top:0px;left:0;height:’+a +’;width:’+a+’;text-align:center;font-weight:regular;cursor:default">’+props+msg+’</font></div>’);

document.write(’</div></div>’);

}

(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){

ymouse = (ns)?evnt.pageY+20-(window.pageYOffset):event.y; // y-position

xmouse = (ns)?evnt.pageX+20:event.x-20; // x-position

}

if (ns||ie)

(ns)?window.onMouseMove=Mouse:document.onmousemove =Mouse;

y=new Array();

x=new Array();

Y=new Array();

X=new Array();

for (i=0; i < n; i++){

y=0;

x=0;

Y=0;

X=0;

}

function makecircle(){ // rotation properties

if (ie) outer.style.top=document.bOdy.scrollTop;

currStep-=rotation;

for (i=0; i < n; i++){ // makes the circle

var d=(ns)?document.layers[’nsmsg’+i]:iemsg.style;

d.top=y+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15;

d.left=x+a*Math.cos((currStep+i*1)/3.8)*2; // remove *2 for just a plain circle* not oval

}

}

function drag(){ // makes the resistance

scrll=(ns)?window.pageYOffset:0;

y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);

x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);

for (var i=1; i < n; i++){

y=Math.round(Y+=(y[i-1]-Y)*speed);

x=Math.round(X+=(x[i-1]-X)*speed);

}

makecircle();

// not rotation speed* leave at zero

setTimeout(’drag()’*10);

}

if (ns||ie)window.onload=drag;

// –>

</SCRIPT>

www.cod3r.org
*

Arkadaşlar öncelikle şunu belirtmeliyim ki ajax yeni bir dil değildir. Web sayfalarımızı daha dinamik hale getiren JavaScriptten türemiştir. Ajax’ın mantığı kullanıcıya daha dinamik sayfalarla hizmet etmektir. Örnek olarak bir websaynazı olduğunu farzedelim soldaki linklere tıklayarak kullanıcıyı farklı sayfalara yönlendirdiğimizi düşünelim kullanıcı linklere her tıkladığında bütün sayfa yenilenecektir. Ajax bize şöyle bir kolaylık getirmektedir. Kullanıcı sayfanızın solundaki linklere tıkladığında istediğiniz sayfayı dinamik olarak sitenizin istediğiniz kısmına açabilirsiniz böylece sayfanız yenilenmeden ajax sistemiyle sadece ilgilendiğiniz sayfayı siteye yüklemiş olursunuz umarım açıklayıcı olmuştur.Şimdi Php üzerinden bir örnekle devam edelim.

Not: Örneğin php ile ilgili olan kısmından bahsetmeyeceğiz sadece ajax kısmından bahsedeceğiz.

Kod:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<**** **********="Content-Type" content="text/html; charset=utf-8" />
<title>Chat</title>
<script type="text/javascript" src="eyceks/eyceks.js"></script>
<script type="text/javascript">

function deger_gonder()
{
var nick  = document.getElementById('nick').value;
var mesaj = document.getElementById('mesaj').value;

var sc = "yeni_nick="+fc_(nick)+"&yeni_mesaj="+fc_(mesaj);
JXP(1* "mesaj_alani"* "islem.php"* sc);

document.form_1.reset();
}
</script>
</head>
<body>
<div id="kapsayici">
<div id="mesaj_alani">
tüm mesajları görebilmek için yandaki formu doldurun ve gönderin
</div>
<div id="form_alani">
<form method="post" name="form_1" action="javascript:void(0);">
<input type="text" size="15" id="nick" value="Nick" />
<input type="text" size="100" id="mesaj" value="Mesaj" />
<button type="button" onclick="deger_gonder()">Gönder</button></form>
</div>
</div>

</body>
</html>

Öncelikle Ajax’ın çeşitli Kütüphaneleri vardır ver biz burada "eycex" kütüphanesini kullanacağız. Yukarıdaki kodda “eycex” kütüphanesi koda entegre edilmiştir görebilirsiniz. Gördüğümüz üzere sayfamızda 2 adet textbox ve bir adet buton bulunmaktadır. nick ve mesajımızı yazdıktan sonra butona tıklıyoruz deger_gonder fonsyonu çağrılıyor ve neler oluyor adım adım inceleyelim.

1- "var nick = document.getElementById(‘nick’).value;"bu kodla nick değişkeninin içine id’si nick olan textbox’dan alınan değer konuluyor

2- "var mesaj = document.getElementById(‘mesaj’).value;"bu kodla mesaj değişkeninin içine id’si mesaj olan textboxd’an alınan değer konuluyor

3- “var sc = "yeni_nick="+fc_(nick)+"&yeni_mesaj="+fc_(mesa j);” fc_(nick) demek nick değişkeninin içindeki değer demektir. sc isimli karakter setine nick ve mesajı* fc_(nick) ve fc_(mesaj) ile alıyoruz* yeni_nick ve yeni_mesaj’ın içine atıyoruz.

4- Haydaaa nerden çıktı bu “yeni_nick” ve “yeni_mesaj” biraz daha bekleyelim lütfen.

5- “JXP(1* "mesaj_alani"* "islem.php"* sc);” JXP fonksyonu ile hangi sayfayı açmak istiyoruz değerleri nasıl gönderiyoruz onu belirliyoruz. JXP degerleri “POST” metoduyla gönderir.

“mesaj_alani” : açılacak sayfanın açılacağı yerin id’si. Yani bu kodla “islem.php” sayfası “mesaj_alani” idli yere açılacak.

“İlsem.php” : sayfanızın içine dinamik olarak açılacaş sayfa.

Sc : açılacak “islem.php” sayfasına gönderilecek değerlerin belirlendiği karakter dizisi.

6. Yani yeni_nick ve yeni_mesaj değişkenleri “islem.php” sayfası içinde “POST” metodu ile kullanılabilecek.

Örnek: $x = $_POST[“yeni_nick”]; Bu şekilde kullanılıyor “islem.php” sayfasında.

Şöyle bir neler olduğuna değiniyorum:

Nick ve mesaj “islem.php” ye gönderiliyor. “islem.php” nick’i ve mesaj’ı alıyor bir txt dosyasına tarih ve saatle birlikte kaydediyor ardından .txt dosyasındaki değerleri ekrana yazdırıyor. “islem.php” mesaj_alani idli yere açıldığından dolayı mesajları bu alan içerisinde görüyoruz.

Not: “islem.php” dosyası tarafımdan YAZILMAMIŞTIR. Dosyaları çalışır biçimde winararlı bi şekilde rapide koyuyorum isteyen arkadaşlar indirebilir ve php sayfaları çalıştırmayı bilmeyen arkadaşlar tekrar benimle temasa geçebilirler umarım açıklayıcı olmuştur şimdiden herkeze kolay gelsin anlamadığınız yer varsa yine bana yazabilirsiniz.

Ajax Çalışır Örnek(Chatbox)

07 Mayıs

2011

<div>
<SCRIPT LANGUAGE="JavaScript">
function tick() {
var hours* minutes* seconds* ap;
var intHours* intMinutes* intSeconds;
var today;
today = new Date();
intHours = today.getHours();
intMinutes = today.getMinutes();
intSeconds = today.getSeconds();
hours = intHours+":";
if (intMinutes < 10) {
minutes = "0"+intMinutes+":";
} else {
minutes = intMinutes+":";
}
if (intSeconds < 10) {
seconds = "0"+intSeconds+" ";
} else {
seconds = intSeconds+" ";
}
timeString = hours+minutes+seconds;

Clock.innerHTML = timeString;

window.setTimeout("tick();"* 100);
}

window.onload = tick;

</SCRIPT>
// am pm siz
<SCRIPT LANGUAGE="JavaScript">
function tick() {
var saat* dakika* saniye;
var dsaat* ddakika* dsaniye;
var bugun;
bugun = new Date();
dsaat = bugun.getHours();
ddakika = bugun.getMinutes();
dsaniye = bugun.getSeconds();
saat = dsaat+":";
if (ddakika < 10) {
dakika = "0"+ddakika+":";
} else {
dakika = ddakika+":";
}
if (dsaniye < 10) {
saniye = "0"+dsaniye+" ";
} else {
saniye = dsaniye+" ";
}
timeString = saat+dakika+saniye;

Clock.innerHTML = timeString;

window.setTimeout("tick();"* 100);
}

window.onload = tick;
**********
>

Toplam 14 sayfa, 1. sayfa gösteriliyor.12345...10...Son »