JSON, JavaScript Object Notation( JavaScript Nesne Gösterimi) anlamına gelir. JSON nesneleri sunucu ve istemci arasında veri aktarımı için kullanılır, XML gibi aynı amaca hizmet eder. Ancak JSON nesnelerinin XML’e göre birçok avantajı vardır ve bunları bu yazıda JSON kavramları ve kullanımlarıyla birlikte öğreneğiz.
JSON Formatı
Şimdi bir JSON verisine bakalım: Temelde anahtar / değer çiftleri var.
1 2 3 4 5 6 7 |
var kisi = { "isim" : "Ahmet", "soyisim" : "Cansever", "yas" : "40" }; |
Yukarıda javascript kisi nesnesine aktarılmış bir JSON verisi gösterilemektedir.
JSON’un Özellikleri:
- Hafiftir
- Dilden bağımsızdır
- Kolay okuma ve yazma
- Metin tabanlı, okunabilir veri alışverişi formatı
Neden JSON kullanıyorsunuz?
Standart Yapı: Şimdiye kadar gördüğümüz gibi JSON nesneleri, geliştiricilerin kodları okumayı ve yazmayı kolaylaştıran standart bir yapıya sahip olduklarını çünkü JSON’dan ne bekleyebileceklerini biliyorlar.
Hafiflik: AJAX ile çalışırken, sayfanın yeniden yüklenmesini istemeden verileri hızlı ve eşzamansız olarak yüklemek önemlidir. JSON hafif ağırlıklı olduğundan, istenen verileri hızlı bir şekilde almak ve yüklemek daha kolay hale gelir.
Ölçeklenebilir: JSON dilden bağımsızdır, yani modern programlama dilinin çoğunda iyi çalışabilir. Diyelim ki sunucu tarafı dilini değiştirmemiz gerekiyorsa, bu durumda JSON yapısı tüm diller için aynı olduğundan bu değişikliği yapmamız daha kolay olacaktır.
JSON ve XML Karşılaştırması
4 öğrencinin kayıtlarını metin tabanlı bir formatta sakladığımızda JSON ve XML’in nasıl göründüğünü görelim, böylece gerektiğinde daha sonra alabiliriz.
JSON formatı:
1 2 3 4 5 6 7 8 |
{"ogrenciler":[ {"ogrenci":"Hayri", "yas":"23", "sehir":"Edirne"}, {"ogrenci":"Ahmet", "yas":"24", "sehir":"Konya"}, {"ogrenci":"Hüseyin", "yas":"25", "sehir":"Kastamonu"}, {"ogrenci":"Recep", "yas":"26", "sehir":"Sakarya"} ]} |
XML Formatı:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ogrenciler> <ogrenci> <isim>Hayri</isim> <yas>23</yas> <sehir>Edirne</sehir> </ogrenci> <student> <isim>Ahmet</isim> <yas>24</yas> <sehir>Konya</sehir> </ogrenci> <ogrenci> <isim>Hüseyin</isim> <yas>25</yas> <sehir>Kastamonu</sehir> </ogrenci> <ogrenci> <isim>Recep</isim> <yas>26</yas> <sehir>Sakarya</sehir> </ogrenci> </ogrenciler> |
Gördüğünüz gibi JSON, XML ile karşılaştırıldığında çok daha hafif. Ayrıca, JSON’da XML’de bulunmayan dizilerden yararlanıyoruz.
JSON veri yapısı türleri ve bunların nasıl okunacağı:
- JSON nesneleri
- Dizideki JSON nesneleri
- JSON nesnelerini iç içe yerleştirme
1) JSON Nesneleri:
1 2 3 4 5 6 7 |
var kisi = { "isim" : "Ahmet", "soyisim" : "Cansever", "yas" : "45" }; |
1 2 3 4 5 |
document.writeln("İsim : " +kisi.isim); document.writeln("Soyisim : " + kisi.soyisim); document.writeln("Yaş : "+ kisi.yas); |
2) Dizideki JSON Nesneleri
Yukarıdaki örnekte, bir kişinin bilgilerini bir JSON nesnesinde sakladık, varsayalım ki birden fazla kişinin bilgilerini saklamak istiyoruz; bu durumda bir dizi nesneye sahip olabiliriz.
1 2 3 4 5 6 7 8 |
var ogrenciler=[ {"ogrenci":"Hayri", "yas":"23", "sehir":"Edirne"}, {"ogrenci":"Ahmet", "yas":"24", "sehir":"Konya"}, {"ogrenci":"Hüseyin", "yas":"25", "sehir":"Kastamonu"}, {"ogrenci":"Recep", "yas":"26", "sehir":"Sakarya"} ]; |
Bu dizideki bilgilere erişmek için kodu şu şekilde yazıyoruz:
1 2 3 4 5 |
document.writeln("İsim : " +ogrenciler[0].ogrenci); document.writeln("Yaş : " + ogrenciler[0].yas); document.writeln("Şehir : "+ ogrenciler[0].sehir); |
Demek istedin, değil mi? Bir sonraki tür ile devam edelim.
3) İç İçe JSON Nesneleri
Yukarıda yaptığımızla benzer bir çağrım olacak başka bir örnekte şöyle olsun.
1 2 3 4 5 6 7 8 9 10 11 |
var ornek = { "isim":"Ahmet", "yas":30, "arabalar": { "araba1":"Ford", "araba2":"BMW", "araba2":"Fiat" } } |
Yukarıdaki isim ve araba1 değerlerine ulaşmak için yazmamış gereken JS kodu şöyle olacaktır.
1 2 3 4 |
document.writeln("İsim : " +ornek.isim); document.writeln("Araba 1 : " + ornek.arabalar.araba1); |
JSON & JavaScript:
JSON, JavaScript’in bir alt kümesi olarak kabul edilir, ancak bu, JSON’un diğer dillerle kullanılamayacağı anlamına gelmez. Aslında PHP, Perl, Python, Ruby, Java, Ajax ve çok daha fazlası ile iyi çalışır.
JSON’un JavaScript ile birlikte nasıl kullanılabileceğini göstermek için, bir örnek:
Yukarıdaki bilgileri öğrendiyseniz , JSON yapılarını biliyorsunuzdur. Bir JSON dosya türü .json kaydedildiğini bilmelisiniz.
Json dosyasından veri okumak ve bir JavaScript nesnesine dönüştürme nasıl yapılır?
- Bunu yapmanın iki yolu var.
eval işlevinin kullanılması, ancak güvenlik nedeniyle bu önerilmez (kötü amaçlı veriler sunucudan istemciye gönderilebilir ve daha sonra istemci komut dosyasında zararlı etkilerle değerlendirilebilir). - JSON ayrıştırıcısını kullanma: Hiçbir güvenlik sorunu yaşatmaz ve daha hızlıdır.
1 2 3 4 5 6 7 |
var kisi = { "isim" : "Ahmet", "soyisim" : "Cansever", "yas" : "45" }; |
1 2 3 |
var nesne= JSON.parse(kisi); |
JavaScript nesnesini JSON metnine nasıl dönüştürebilirim?
JavaScript nesneleri ile çalışıp veriyi sunucuya göndermeye geldiğinde veri kümesini JSON formatına çevirmek gerekir. Bunun için Stringify yöntemini kullanabilirsiniz.
1 2 3 |
var jsonText= JSON.stringify(nesne); |
Bu yazıda JSON nesnesine etraflıca bir göz attık. Hızlıca JSON nesnesini ve JSON nesnelerini nasıl okuyacağımızı inceledik. Umarım yapacağınız projelerde faydalı olur.
3 Yorum