Jquery ile ajax kullanımı (ajax jquery)

Güzel bir pazar gününde daha önce yazmayı düşündüğüm jquery ile ajax kullanımı hakkındaki yazıma başlıyorum. Jquery 'nin ajax kullanımını kolaylaştırdığından başka bir yazımda bahsetmiştim. İlk olarak temel ajax işlevini inceleyelim:
[js]
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
[/js]
Bu işlevde ajax için bazı parametreler kullanıyoruz. type değeri yapılacak isteğin türünü (POST yada GET), url değeri çağrı yapılacak adresi, data ise gönderilen parametreleri url biçiminde kodlanmış olarak içerir. success değişkeni ise ajax çağrısının başarıyla sonlanmasının ardından yapılacak işlemleri içeren bir işlev tanımıdır. Bunun için ya function ile yeni işlev tanımlaması yaparız yada daha önce tanımladığımız bir işlevin adını kullanabiliriz.

Jquery 'deki Ajax işlevlerini listelersek:
[js]
$.ajax(options)$.get(url, data, callback)
$.getScript(url, callback)
$.getJSON(url, data, callback)
$.post(url, data, callback, type)
load(url, data, callback)
[/js]
Gördüğünüz gibi bu işlevler genel olarak url, data ve callback parametreleriyle kullanılmaktadır. Elbette bu işlevler arasında bazı farklılıklar vardır. Herbirinin amacını kısaca özetlemek gerekirse:

ajax işlevi en temel olanıdır. Kullanım örneğini yukarıda görmüştük. Bu işlevin avantajı daha detaylı ayarlar yapabilmenizdir ve ajax çağrısıyla ilgili daha fazla olaya ait callback işlevi tanımlayabilmenizdir. Devam etmeden önce ajax olaylarını listelemek istiyorum:
[js]
ajaxComplete(callback) // ajax çağrısının tamamlanmasının ardından yapılacaklar için
ajaxError(callback) // hata oluşması durumunda yapılacaklar için
ajaxSend(callback) // ajax ile veri göndermeden önce yapılacaklar için
ajaxStart(callback) // ajax çağrısı başladıktan sonra yapılacaklar için
ajaxStop(callback) // ajax çağrısı bittikten sonra yapılacaklar için
ajaxSuccess(callback) // ajax çağrısının başarıyla tamamlanmasının ardından yapılacaklar için
[/js]
ajax() işlevi dışındaki işlevler için sadece ajaxComplete olayı kullanılır ki bu çoğu zaman yeterlidir.

$.get(url, data, callback) işlevi en basit ajax işlevlerinden biridir. Parametre olarak çağrının yapılacağı url, gönderilecek veri, ve çağrının tamamlanmasıyla yapılacak işlev tanımlaması kullanılır.

$.getScript(url, callback) işlevi ise aynı get işlevi gibidir ancak bu işlevin amacı ajax çağrısı ile elde edilen javascript kodunu çalıştırmaktır.

$.getJSON(url, data, callback) işlevi de get işlevi gibidir. Tek farkı gelen ajax çağrısı ile gelen sonucu metin olarak değil JSON verisi olarak almasıdır. Bu işlevin kullanımının bir üstünlüğü vardır. Eğer tek bir ajax çağrısıyla birden fazla veri elde etmek istiyorsanız (ör: sayfanın farklı yerlerinde kullanmak için) $.getJSON işlevini kullanabilirsiniz. Hatta sunucudan dönen json verisi içinde elde etmek istediğiniz veri haricinde işlemin başarı durumunu belirten bir değer, hata olması durumunda ziyaretçiye verilecek mesaj, en son işlem zamanı gibi ekstra veriler ekleyerek gelen verinin farklı şekillerde kullanılmasını sağlayabilirsiniz. Sunucu tarafında tek yapmanız gereken sonucu json olarak dönmek. Bunun için göndermek istediğiniz verileri bir dizi içine ekleyerek (associated array) bunu json_encode işlevi ile json biçimine çevirip echo ile çıktı vermeniz yeterlidir.

$.post(url, data, callback, type) işlevinin özelliği ise aktarım yöntemi olarak POST kullanması ve dönen verinin callback işlevine ne şekilde aktarılacağını (ör: json, xml) belirleme imkanınızın olmasıdır. Bunu bir örnekle açıklamak istiyorum:

Örneğimiz için sunucu tarafında basit bir json çıktısı kullanalım:
[php]
echo json_encode(array("name"=>"John","time"=>"2pm"));
[/php]
Bu çıktıyı elde edip kullanacağımız ajax çağrımız şu şekilde olabilir:
[js]
$.post("test.php",{ func: "getNameAndTime" }, function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
[/js]
Bu çağrı ile test.php işlevine POST yöntemiyle istekte bulunuyoruz (bu örnekte gönderilen veri olarak sunucuda çalıştırılacak işlevin adını verdik ) ve 4. parametremizde belirttiğimiz üzere sonucun json olarak değerlendirilmesini sağlıyoruz. Bu şekilde gelen veriyi herhangi bir işleme gerek kalmadan doğrudan callback işlevinde kullanabiliyoruz.

load(url, data, callback) işlevi ise diğerlerine göre özel bir uygulama amacıyla kullanılmaktadır. En başta $ işaretinin olmadığına dikkat edin. Bunun nedeni bunun doğrudan çalıştırılan değil bir seçici ile elde jquery nesnesi üzerinde uygulanmasıdır. İşlevin amacı basitçe ajax çağrısı yaparak gelen sonucu sayfanızdaki bir öğeye aktarmaktır.
[js]
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
[/js]
Ajax çıktısının feeds idsine sahip öğeye aktarıldığına dikkat edin.

Jquery ile ajax kullanımını özetlemeye çalıştım. Ajax kullanımı için birçok uygulama alanı bulabilirsiniz. İhtiyacınıza göre yukarıda işlevlerden size uygun olanını seçmeniz işlemlerinizde kolaylık sağlayacaktır.

Ubuntu 9.04 yayınlandı

1 hafta kadar önce Ubuntu Linux dağıtımının son sürümü olan 9.04 yayınlandı. (Ubuntu için sürüm numaraları yıl.ay şeklindedir). Şimdiye kadar birçok Linux dağıtımı denedim ancak hiçbirini bu kadar rahat kullandığımı hatırlamıyorum. Donanım desteği gerçekten çok iyi. Daha önce makinamda windows ve Linux birlikte kuruluyken ndiswrapper ile Windows sürücüsü kullanarak kablosuz ağa bağlanabiliyordum. Ubuntu 'da ise kurulumu tamamladıktan sonra herhangi bir ayar bile yapmadan kablosuz ağ bağlantısının açıldığını gördüm. Şimdiye kadar (muhtemelen yanlış ayarlar yüzünden) dahili mikrofon hariç herhangi bir donanım için sorun yaşamadım. Artık bütün hard diski Linux için kullanıyorum. Ayrıca ekran kartım için Linux sürücüsü indirip kurduktan sonra efektler de aktif hale geldi. Ubuntu son sürümünde daha önceki sürümüne göre görsellik açısından da ilerlemiş görünüyor. Detaylı bilgi için ubuntu.com adresini ziyaret edebilirsiniz.

Mysql root kullanıcı yetkilerinin kaybedilmesi durumuna çözüm

Geçenlerde linux makinamda mysql ayarlarında değişiklik yaparken nasıl olduysa root yetkilerini kaybettim ve bu yüzden tekrar bağlanamadım ancak daha sonra bulduğum basit bir çözümle sorunu hallettim ve aynı sorunu yaşayanlar için burada paylaşmak istiyorum. Mysql sunucusu kullanıcıların yetkilerini yine sistemdeki bir veritabanından alır ve eğer bir kez tüm sorgu yetkilerini kaybederseniz bu tabloya erişme yetkiniz olmadığı için yetkileri tekrar veremezsiniz. Ancak mysql sunucu ayarlarında değişiklik yaparak bunu halletmek kolaydır. Bunun için önce /var/lib/mysql/ dizininde (en azından benim makinamda bu dizin) my.cnf dosyasını oluşturun ve şu satırları ekleyin:
[html]
[mysqld]
skip-grant-tables
[/html]
Daha sonra mysql sunucusunu tekrar başlatın. Bunun için şu komutu kullanabilirsiniz:
[html]
/etc/init.d/mysql restart
[/html]
Mysql sunucusu tekrar başladıktan sonra artık sisteme bağlı bütün kullanıcılar yetki sınırlaması olmadan bütün sorguları gerçekleştirebilirler. Eğer kullandığınız sunucu yayına açık bir sunucu değilse herhangi bir sorun olmaz ama kullanımda olan bir web sunucusundan bahsediyorsak çok büyük bir güvenlik riski oluşturur ve bir an önce root kullanıcıya bütün yetkileri verip sunucuyu eski haline getirmeniz gerekir. Bunun için yetkilerinizi tekrar elde ettikten sonra (bunu komut isteminden yada bir mysql gui programı kullanarak yapabilirsiniz) oluşturduğumuz my.cnf dosyasını silip mysql sunucusunu tekrar başlatmalısınız. Bunun için yukarıdaki komutu tekrar girmeniz yeterli. Bundan sonra mysql sunucunuzun ve root kullanıcınızın sorunsuz çalışıyor olması gerekir.

Listedeki bir öğeyi taşıma

Web uygulamalarında liste oluştururken bazen sıralama yapma gereği duyabilirsiniz. Aşağıda bunun için yaptığım basit bir örnek bulabilirsiniz. liste_tasi işlevinde ilk parametre taşıma işlemi için tıklanan öğenin kendisini (this ile nesne aktarımı), ikinci parametre ise taşımanın yönünü belirtir. Yön değeri olarak 1 aşağı taşımak, -1 yukarı taşımak için kullanılıyor. (Bu parametrenin liste öğesinin sıra değerine yapılacak eklemeyi belirttiğini düşünebilirsiniz. Sıralama yukarıdan aşağıya doğru artan yöndedir.)

[html]
<ul>
<li pid="2">Program 2 <a onclick="liste_tasi(this,-1);" >Yukarı</a> <a onclick="liste_tasi(this,1);">Aşağı</a></li>
<li pid="1">Program 1 <a onclick="liste_tasi(this,-1);" >Yukarı</a> <a onclick="liste_tasi(this,1);">Aşağı</a></li>
</ul>
[/html]

 

[js]
function liste_tasi(t,dir){
var $mevcut = $(t).parent();
var $mevcut_icerik = $mevcut.get();
$mevcut_icerik = $mevcut_icerik[0];

if(dir==-1){
var $diger=$(t).parent().prev("li");
if($diger.length==1){
$mevcut.remove();
$diger.before($mevcut_icerik);
}
}
else{
var $diger=$(t).parent().next("li");
if($diger.length==1){
$mevcut.remove();
$diger.after($mevcut_icerik);
}
}
}
[/js]

Javascript tabanlı kod renklendirme (Syntax Highlighter)

Daha önceki sitemde verdiğim kodları renklendirmek için fck düzenleyicisine eklenen bir geshi eklentisi kullanmıştım. Ancak geshi renklendirme (syntax highlighting) işlemini sunucu tarafında yaptığı için istemci tarafında çalışacak javascript tabanlı bir araç aramaya başladım. Sonunda şunu buldum:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Eski kodların bazılarını bu sisteme dönüştürdüm. Kalanları da zamanım oldukça sırayla değiştirmeyi düşünüyorum. Blogger sunucuya dosya yüklemeye izin vermediği için gereken dosyaları eklentinin kendi sitesinden kullanıyorum. Eğer siz de bu sistemi kullanmak istiyorsanız blog şablonunuz içine head imleri arasına aşağıdaki gibi bir ekleme yaparak bu aracı uygulayabilirsiniz. Eğer dosyaları kendi sunucunuzda barındıracaksanız adres değerlerini sitenize göre değiştirmelisiniz.
[html]
<link href='http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shLegacy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushSql.js' type='text/javascript'/>
[/html]
[html]<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</script>
[/html]
Bu araç çok sayıda programlama dilinde yazılmış kaynak kod için renklendirme yapabiliyor. Ben sadece kullanma ihtimalim olan bazı diller için gerekli dosyaları dahil ettim. Blogger için kullanılacaksa benim yaptığım gibi bloggerMode ayarının etkinleştirilmesi gerekiyor. Bu aracın kullanımı için kaynak kodu pre imleri içine yazıyoruz ve örneğin javascript renklendirmesi için pre imine class="brush: js" şeklinde sınıf veriyoruz:
[html]
<pre class="brush: js">
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</pre>
[/html]
Bu kod sonuçta aşağıdaki gibi görünür:
[js]
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
[/js]

Ücretsiz alanadı hizmeti

Ücretsiz olarak bir alan adı almak isteyenler için bir hizmet tavsiye etmek istiyorum. Bu hizmet ile ücretsiz olarak co.cc uzantılı bir alan adına sahip olabilirsiniz. Ayrıca alan adınız üzerinde tam dns kontrolüne sahip olacaksınız. Yani istediğiniz sunucudaki siteniz için yeni adresinizi kullanabilirsiniz. Url yönlendirme yapabilirsiniz. Hatta alan adınızla ilgili Cname, A, Mx gibi gelişmiş ayarları da kontrol edebilirsiniz. Hizmeti denemek için bir alanadı aldım ve hiçbir sorun göremedim. Eğer istediğiniz alanadının boşta olup olmadığını kontrol etmek isterseniz aşağıdaki formu kullanabilirsiniz.

Jquery ile sekmeler oluşturmak

Birçok web sayfasında sayfa yenilenmeden geçiş yapılan sekmeler görmüşsünüzdür. Bunlar basitçe javascript ile yapılabilir. Bu yazımda size jquery ile basit bir şekilde nasıl sekmeler oluşturabileceğinizi bir örnekle göstereceğim. Aslında sekmeler aynı sayfada bulunan ancak biri görünür olduğunda diğerleri gizli hale getirilen sayfa öğelerinden ibarettir. Yani örnek olarak bir sayfada ardarda oluşturduğunuz div öğelerinden birini gösterip diğerlerini gizleyerek ve bu işlemi sekme başlıklarının tıklanmasıyla tetikleyerek basit bir sekme sistemi oluşturmuş olursunuz.

İlk önce sekmeler için kullanacağımız css sınıflarını, sekme başlıklarını ve sekme içeriklerini oluşturalım:
[xml]
<style type="text/css">
.sekme_baslik{border:2px solid gray;cursor:pointer;}
.aktif_sekme_baslik{border:2px solid red;}
.sekme_icerik{border:1px dashed gray;}
</style>
<div>
<span id="sekme_1">Sekme 1</span>
<span id="sekme_2">Sekme 2</span>
<span id="sekme_3">Sekme 3</span>
</div>

<div id="sekme_1_icerik">
Sekme 1 içeriği
</div>
<div id="sekme_2_icerik" style="display:none;">
Sekme 2 içeriği
</div>
<div id="sekme_3_icerik" style="display:none;">
Sekme 3 içeriği
</div>
[/xml]



İlk sekme içeriği haricindeki sekme içeriklerinin gizlendiğine dikkat edin. Şimdi de sekmeleri aktif hale getirecek javascript kodumuzu yazalım:
[js]
$(function(){
$(".sekme_baslik").click(function(){
// önce seçilen sekme dışındaki tüm sekme başlıklarından aktif_sekme_baslik sınıfını kaldırıyoruz
$(".sekme_baslik").not($(this)).removeClass("aktif_sekme_baslik");
// seçilen sekme başlığına aktif_sekme_baslik sınıfını ekleyelim
$(this).addClass("aktif_sekme_baslik");
// seçilen sekme başlığının id değerini alıp bu değere "_icerik" ilave ederek içerik div öğesinin idsini bulalım
var icerik_id = $(this).attr("id") + "_icerik";
// içerik sekmemizi nesne olarak kaydedelim
var $sekme = $("#"+icerik_id);
// şimdi de göstermek istediğimiz sekme dışındaki sekmeleri gizleyelim
$(".sekme_icerik").not($sekme).hide();
// ve son olarak göstermek istediğimiz seçilen sekmeyi gösterelim:
$sekme.show();
});
});
[/js]



Bu basit bir sekme örneğiydi. Elbette Sekme başlıkları ve içerik için istediğiniz gibi css biçimlendirmesi uygulayarak sekmelerin daha gerçekçi görünmesini sağlayabilirsiniz.