JSON konusunun ilk bölümünde, JSON'ların yapısını, ne işe yaradıklarını ve nerelerde kullanıldıklarını öğrendik. Bu bölümde özellikle RESTful API'ler sayesinde elde ettiğimiz JSON verilerini nasıl işleriz, sayfamıza göre nasıl düzenleriz sorularının cevaplarını bulabilirsiniz. Ayrıca websiteleri arasındaki bilgi paylaşımda önemli rol oynayan ve CORS olarak isimlendirilen güvenlik sistemi hakkında da söyleyeceklerim olacak.

Öncelikle ilk bölüme göz atmak isterseniz, buraya tıklayarak ilk bölüme ulaşabilirsiniz.

İlk bölümde JSON yapısının JavaScript nesne yapısından esinlenerek oluşturulduğundan bahsetmiştik. Bu yüzden JSON formatı, bir JavaScript kütüphanesi olan JQuery ile kolayca işlenebilir. Bu işlem için en ideal teknoloji, JQuery ile kullanabildiğimiz AJAX teknolojisidir ( Asynchronous JavaScript And XML - Eşzamansız JavaScript ve XML). AJAX ilk geliştirildiğinde XML en popüler veri değişim formatıydı. Bu yüzden bu teknolojiye AJAX ismi verilmiştir. JSON'ların geliştirilmesiyle, artık bu yapı temel olarak JSON'lar ile çalışıyor. Fakat isimde herhangi bir değişiklik yapılmadı. (AJAJ biraz garip olurdu). AJAX teknolojisi, veri güncelleme sonrasında, sayfa yenileme zorunluluğunu ortadan kaldıran bir teknolojidir. Yaptığı iş basitmiş gibi görünse de çok önemlidir. Elbette AJAX teknolojisi ile sadece JSON'lar değil, XML, HTML, TXT dosyaları da alınıp, işlenebilir.

AJAX'ı JQuery'de kullanmak oldukça kolaydır. Bir örnek ile hem JQuery'deki AJAX kullanımını görelim, hem de bir RESTful API örneği oluşturalım. Bu örnekte kullanıcıların bağlantı bilgileri gösteren küçük bir bir uygulama tasarlayacağız. RESTful API olarak tamamen bedava ve üye kaydı zorunluluğu olmayan ip-api sitesinin API'sini kullanacağız. Öncelikle API'nin bize göndereceği sonuca buradan bakalım. Bağlantıya göz attıysanız, paylaşılan verinin oldukça sade olduğunu görürsünüz. Gönderilen JSON formatını, AJAX ile javascript nesnesine dönüştürerek, tanımlı her elemanın bilgisine rahatlıkla ulaşabileceğiz. Elde ettiğimiz bilgiler ile bir HTML formatı oluşturup, bilgileri kullanıcıya göstereceğiz.

liste="";
$.ajax({
	url:"http://ip-api.com/json",
	dataType:"json",
	method:"get",
	success:function(veri){
		liste += '<li> Şehir : '+veri.city+'</li>';
		liste += '<li> Ülke : '+veri.country+'</li>';
		liste += '<li> Ülke Kodu : '+veri.countryCode+'</li>';
		liste += '<li> Servis Sağlayıcı : '+veri.isp+'</li>';
		liste += '<li> IP Adresi : '+veri.query+'</li>';
		liste += '<li> Enlem : '+veri.lat+'</li>';
		liste += '<li> Boylam : '+veri.lon+'</li>';
		$("#bilgileri-goster").html('<ul>'+liste+'</ul>');
	},
	error:function(error){
        $("#bilgileri-goster").html('<ul><li>Veri almada hata!</li></ul>');
	}
});		

AJAX metodu ile API hizmeti sağlayan websitesinin gönderdiği bilgileri aldık ve "veri" isminde bir Javascript nesnesine dönüştürdük. Elde ettiğimiz nesnenin yapısı şu şekilde oldu :

var veri={city : "Şehir Bilgisi", country : "Ülke Bilgisi", countryCode : "Ülke Kodu", isp : "Servis" .........}

Veri isimli nesnedeki değerlere ulaşmak için, veri.city, veri.country gibi komutlar kullanarak değerleri elde ettik. HTML yapısını oluşturmak için liste isimli bir değişken tanımlayıp, elde ettiğimiz verileri, HTML liste komutlarıyla bu değişkene ekledik. Son olarak HTML yapısında hiç bir elemana sahip olmayan "bilgileri-goster" katmanına bütün elemanlarımızı ekledik. Böylece veriler istediğimiz şekilde kullanıcıya gösterildi. Dikkat ederseniz AJAX komutunda iki fonksiyon yer almakta; success (başarı) ve error (hata). Veri almada bir sorun olmaz ise success fonksiyonu çalışır. Bir hata oluşmussa error fonksiyonu çalışır. Eğer bir hata yoksa, aldığımız bilgileri kullanıcıya gösterecek kodlarımız çalışacak, eğer hata oluşursa, kullanıcıya bir hatanın oluştuğunu söylecek komutlarımız çalışacak. Yani herşey hazır. Uygulamamızı aşağıda inceleyebilirsiniz.

Sihirli Fasulyeler Kullanıcı Bilgileri Uygulaması

Peki internette bulduğumuz her JSON dosyasına bu şekilde ulaşıp, istediğimiz gibi kullanabilir miyiz? Kısa cevap, Hayır! Websiteleri arasındaki paylaşımların güvenliğinden sorumlu CORS ( Cross-Origin Resource Sharing - Farklı Websiteleri Arasındaki Kaynak Paylaşımı - ) sistemi, paylaşımları denetler. Ancak JSON'ları oluşturan veya bünyesinde barındıran websiteleri gerekli izinleri vermişse, diğer websiteleri bu JSON yapılarından yararlanabilir. Aksi takdirde paylaşım gerçekleşmez ve hata oluşur.

JSON'larla ilgili sonraki bölümde, yine bir RESTful API kullanarak, İngilizce - Türkçe, Türkçe - İngilizce sözlük uygulaması tasarlayacağız. Biraz daha karışık yapılar ile uğraşacağız.

Sonraki bölüme buradan ulaşabilirsiniz.