Gürkan OLUÇ

Bildiğiniz gibi AJAX, Web 2.0 akımının gelişiyle birlikte popülerleşen, aslında yıllardır var olan bir teknoloji. XmlHttpRequest nesnesini kullanarak, tüm sayfayı yeniden yüklemeden hızlı ve kolayca HTTP request yapabilmemize ve cevap alıp işleyebilmemize olanak sağlıyor.

Hal böyle olunca bir çok uygulama tarafından tercih edildi tabii ki. Tüm veri iletişimini AJAX ile gerçekleştiren web siteleri, mash-up'lar, kullanılabilirliğini tavan yaptırmak isteyen web siteleri gibi bir çok yerde kullanıldı ve çokta güzel ve eğlenceli oldu bence.

Bugün bahsedeceğimiz konu olayın mash-up diye tabir edilen bir nevi ufak web site parçacıkları üzerine olucak. Bildiğiniz gibi mash-up'lar genelde üyesi olup, içerik ürettiğiniz çeşitli servisler tarafından size sağlanıyor. Örneğin Twitter. Ufak bir kopyala & yapıştır operasyonu ile son 10 tweet'inizi blogunuz üzerinde gösterebilirsiniz.

İşte tam da bu noktada bir sorun ortaya çıkıyor. XmlHttpRequest nesnesi iyi, güzel ama yalnızca kendi domaininiz üzerindeki adreslere request yapabilmenize imkan tanıyor. Böyle olunca da siz örneğin kendiniz bir mash-up yapıyor olsanız ve twitter API'na XmlHttpRequest ile request göndermek isteseniz, göndermiş olduğunuz request güvenlik sebeplerinden dolayı hata verecektir.

Bu sorunu çözmek için bulunmuş çeşitli yöntemler var.

Bunlardan 1.si server-side proxy. Bu yöntemde basitçe siz tüm Ajax requestlerinizi belirli paremetreler göndererek kendi sunucunuz üzerinde bulunan bir dosyaya yapıyorsunuz, bu dosyada kullanmış olduğunuz server-side dilin kütüphanelerini kullanarak ( Mesela PHP için Curl kütüphanesi ile bu işlem oldukça kolay yapılabiliyor ) belirtilen adrese request yapıp, sonucu döndürebiliyorsunuz. Bu yöntem stabil ancak, sunucu kaynaklarını fazla tüketen bir uygulama.

2. yöntem bu işlemi iframe kullanarak yapmak ve Javascript ile frame içerisindeki içeriği alarak işlemek. Ancak bunun da zaman zaman güvenlik sorunları nedeniyle sorunlar çıkardığı biliniyor ve kodlaması da pek zevkli bir iş değil açıkçası

3. ve en sağlıklı, stabil yöntem ise request yapılacak adresten bir scripti sayfamıza dahil etmek. Böylece hiçbir engele takılmadan kolaylıkla verileri alabiliyoruz. Tabii bu yöntemi kullanabilmek için ilgili servisin bize bu API hizmetini sunması gerekiyor.

Evet, biraz uzun bir giriş yazısı oldu ve olayımız şimdi yeni başlıyor

Bu yazıda 3. yöntemi nasıl kullanabileceğinizden bahsediyor olucam. Bu teknik üzerine çok uzun bir yazı yazılabilir ancak ben yine her zaman olduğu gibi örnek üzerinden anlatmak istiyorum.

Örneğimiz basitçe şu işlemi yapıcak. Flickr üzerinde "cat" etiketine sahip ögeleri alıcak ve son 10 tanesini göstericek. Bu işlemi yaparken ben yine jQuery kullanacağım ancak jQuery kullanmadan da nasıl yapılacağı konusunda bilgi vereceğim yazının sonunda. Hadi yapalım!

Flickr üzerinden verileri çekeceğimiz adres : http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?

Şimdi de Javascript kodumuzu yazalım.

Önce jQuery'nin getJSON metodu ile ilgili adrese request yaptık, sonra da bu request'in nasıl işleneceğini bildiren fonksiyonumuzu yazdık. Fonksiyon içeriğine pek girmiyorum zira temel seviyede Javascript bilen bir geliştirici için oldukça anlaşılabilir kendisi.

Ne kadar basit değil mi? Bu işlem için jQuery kullanmış olmamızın bize katkısı şu oldu. Eğer jQuery kullanmamış olsak, tüm browserlarda çalışan adam gibi bir AJAX sorgusu yapmak için ekstradan biraz daha saçma sapan şeyler yazıcaktık. Flickr adresine sorgu yaparken jsoncallback parametresi için ayrı bir fonksiyon adı belirtip onu da ekstradan tanımlıyacaktık. Gerçi şuanda da bir fonksiyon tanımladık ama yazımı daha kolay gibi oldu sanki?

Şöyle bir soru gelebilir aklınıza. Madem jsoncallback parametresine bir fonksiyon değeri vermemiz gerekiyor, neden oraya ? koyup, sonra fonksiyonu yazdık? Bu jQuery'nin biz sevgili kullanıcılarına yapmış olduğu bir güzellik : ) jQuery bizim belirtmiş olduğumuz fonksiyonu alıyor ve json2334334 gibi unique bir isme sahip olan bir fonksiyona atıyor. jsoncallback parametresine koymuş olduğumuz ? işareti yerine de json2334334 yazıyor. Böylece API'dan dönen veri json2334334 fonksiyonuna parametre olarak ekleniyor.

Yazmış olduğumuz kodun demosuna bu adresten bakabilirsiniz. Bir sonraki yazımda kendi projelerinizde benzer bir yapıyı nasıl oluşturabileceğinizi ve kullanıcılarınıza benzer bir api hizmeti sunabileceğinizi anlatacağım. Kolay gelsin

Bu yazı Pazar, Eylül 13th, 2009 tarihinde 14:22 sularında yazıldı. ile etiketlendi. Bu yazıya yazılan yorumları RSS 2.0 linkinden takip edebilirsiniz. Yorum bırakabilir, veya Geribildirim yapabilirsiniz.