View Sidebar
jQuery ve XML, JSON, HTML?

jQuery ve XML, JSON, HTML?

Aralık 23, 2012 17:3712 yorum

json_xml_html

jQuery Ajax işlemlerinde, server bazlı çalışan .NET, PHP gibi programlama dilleriyle beraber çalışabilir. Server bazlı çalışan programlama dilleri bize XML, JSON veya HTML dillerinde veriler üretebilirler. Peki biz bunların hangisini tercih etmeliyiz? Aslında bu sorunun tek bir cevabı yok. Elimizde bulunan yapılara göre, performans ihtiyacına göre, ve en önemlisi de yapacağımız işe göre bunu belirleyebiliriz. Zaten çeşitlilik ihtiyaçlardan doğmuştur.

XML ve JSON bir programlama dilinden çok, bir yapı. HTML ile aralarındaki bu farktan dolayı aslında bu makalede XML, JSON bir boyutta, HTML başka bir boyutta incelenmeli. XML ile JSON’ı bana soracak olursanız kıyaslamaya gerek dahi yok. JSON XML’e göre çok daha yeni, esnek ve bunlar gibi avantajlara sahip. Bir kaç madde altında kıyaslama yapalım.

Kolaylık

XML kolaydır. Ancak JSON XML’den daha kolaydır. JSON daha küçük gramer yapısına sahiptir ve bir çok modern dil tarafından kullanılmaktadır.

Çalışabilirlik

XML eşittir JSON dersek hiç de hatalı sayılmayız.

Uzayabilirlik (Extensibility)

Başlık biraz garip gelebilir. En başta şunu söyleyeyim. JSON uzayabilir değildir. Çünkü JSON, HTML veya XML gibi belge biçimlendirme dili değildir. Yani, içerisindeki veriyi temsil etmek için yeni etiketler veya öznitelikler tanımlamanıza gerek yoktur.

Açıklık (Açık kaynak kodlu olmak, kullanım kısıtlamaları)

JSON herhangi bir politik, kurumsal tekelin elinde veya kurallarına bağlı olmadığı için, en az XML kadar açık bir dildir.

Bir önceki makalemi (jQuery ve PHP) inceleme fırsatı bulduysanız, işlemlerin JSON veriler ile gerçekleştirildiğini görebilirsiniz. Peki neden JSON’u tercih ettim? Buradaki kilit nokta verinin boyutu. JSON veriler, ham veriyi içerdiği için boyutları çok küçüktür. Ham veri derken kastettiğim şey, “Form Validation” örneğinde ekrana verdiğim “Ad Boş Olamaz” uyarısının rengi fark edebileceğiniz üzere kırmızı. Bu kırmızılık sunucudan dönen veri ile değil, daha önceden yüklenmiş olan kodlar ile sağlanmaktadır. Benim sunucudan çektiğim veri sadece uyarının kendisi (Ad Boş Olamaz) dir. Yine dikkat ettiyseniz, JSON verisi kullanıcı tarafında ayrıştırılıp, işlenmek zorunda ve bu da şu dezavantajı getiriyor. Kullanıcı o isteği yapmasa dahi o istekten dönecek olan veriyi ayıklayacak JavaScript kodlarının sayfaya önceden yüklenmesi. JSON kullanmaya karar verirken dikkatle cevaplandırmak gereken soru, sunucudan ham veriyi çekme daha mı verimli? Bu soruyu cevapladıktan sonra sanırım geriye uygulamanızı yazmak kalıyor 🙂

HTML ise, bir jQuery Ajax uygulamasında sunucudan çektiğiniz veri biçimlendirilmiş veri yani ham veri değilse, dönen bu veri içinden ham veri ile bir işlem yapmayacaksanız sanırım HTML kullanmalısınız demek doğru olacaktır.

Uygulama

Çok fazla teorik olan bir girişten sonra kafamızda daha iyi oturması için örnekler vereceğim.

[ Uygulamayı İndir ]

Her seferinde jQuery Ajax demektense direkt Ajax olarak bahsedeceğim.
Ajax kullanırken dönen sonuç tipi ne olmalı? Hangisi en ideali? HTML kod parçası mı? XML mi? JavaScript nesnesine dönüştürülmüş JSON mu?

Örnek Uygulama -> https://ulviercan.com/teknoblog/wp-content/uploads/myCodeSamples/jQuery_XML_JSON_HTML/
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
    body{
        font-family: Helvetica;
        font-size: 12px;
    }

	.book{
	   background: #ececec;
       padding: 10px;
	}

    .title h3{
	   padding: 0;
       margin: 0;

	}

    .publisher{
	   color: green;
	}
-->
</style>
</head>

<body>

<h3>XML</h3>
<div id="xmlBooks"></div>

<h3>JSON</h3>
<div id="jsonBooks"></div>

<h3>HTML</h3>
<div id="htmlBooks"></div>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {

    // JSON
    $.ajax({
        url: "sonuc.json",
        dataType: "json",
        success: function(sonuc) {
                    $.each(sonuc.books.book, function (i, val) {
                        $("#jsonBooks").append('<div class="book"><div class="title"><h3>' + val.title + '</h3></div><div class="publisher">Yayıncı: ' + val.publisher + '</div><div class="author">Yazar: ' + val.author + '</div></div>');
                    });
            }
    });

    // HTML Kod Parçası
    $.ajax({
        url: "sonuc.html",
        dataType: "html",
        success: function(sonucHTML){
            $("#htmlBooks").html(sonucHTML)
        }
    });

    // XML
    $.ajax({
        url: "sonuc.xml",
        dataType: "xml",
        success: xmlParser
    });
});

function xmlParser(xml) {

    $(xml).find("book").each(function () {
        $("#xmlBooks").append('<div class="book"><div class="title"><h3>' + $(this).find("title").text() + '</h3></div><div class="publisher">Yayıncı: ' + $(this).find("publisher").text() + '</div><div class="author">Yazar: ' + $(this).find("author").text() + '</div></div>');
    });

}

-->
</script>

</body>
</html>

sonuc.xml

<books>
	<book>
		<title>JavaScript, the Definitive Guide</title>
		<publisher>O'Reilly</publisher>
		<author>David Flanagan</author>
		<cover src="/images/cover_defguide.jpg" />
		<blurb>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</blurb>
	</book>
	<book>
		<title>DOM Scripting</title>
		<publisher>Friends of Ed</publisher>
		<author>Jeremy Keith</author>
		<cover src="/images/cover_domscripting.jpg" />
		<blurb>Praesent et diam a ligula facilisis venenatis.</blurb>
	</book>
	<book>
		<title>DHTML Utopia: Modern Web Design using JavaScript &amp; DOM</title>
		<publisher>Sitepoint</publisher>
		<author>Stuart Langridge</author>
		<cover src="/images/cover_utopia.jpg" />
		<blurb>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</blurb>
	</book>
</books>

XML’in Avantajları

En önemli avantajı insanlar tarafından okunması kolaydır(programcılığa ne katkısı var derseniz, tartışılır.)
İkinci avantajı ise bir çok programcının alışkın olduğu bir dildir. Server taraflı programlama yapan kişiye, sonuçları XML olarak döndür dediğinizde bir problemle karşılaşmazken, JSON istiyorum dediğinizde karşı tarafın tepkisi garip olabilir.

XML’in Dezavantajları

Gereksiz etiketlerden dolayı çok büyük dosyalarda yük oluşturacaktır.

sonuc.json

{"books":
    {"book":
        [
         {"title":"JavaScript, the Definitive Guide","publisher":"O'Reilly","author":"David Flanagan"},
         {"title":"DOM Scripting","publisher":"Friends of Ed","author":"Jeremy Keith"},
         {"title":"DHTML Utopia: Modern Web Design using JavaScript & DOM","publisher":"Sitepoint","author":"Stuart Langridge"}
        ]
    }
}

JSON’ın Avantajları

Gereksiz kod, etiket, öznitelik içermediğinden dolayı çok hafiftir ve büyük boyutlu dosyalarda ekstra yük oluşturmaz.

JSON’ın Dezavantajları

İnsanlar için okuması zordur(aman programcılık için çok önemli). Kodların sonunda yeni başlayanları korkutabilecek “}}]}” şeklinde bitişler görebilirsiniz.

sonuc.html

<div class="book">
    <div class="title"><h3>JavaScript, the Definitive Guide</h3></div>
    <div class="publisher">Yayıncı: O'Reilly</div>
    <div class="author">Yazar: David Flanagan</div>
</div>
<div class="book">
    <div class="title"><h3>DOM Scripting</h3></div>
    <div class="publisher">Yayıncı: Friends of Ed</div>
    <div class="author">Yazar: Jeremy Keith</div>
</div>
<div class="book">
    <div class="title"><h3>DHTML Utopia: Modern Web Design using JavaScript &amp; DOM</h3></div>
    <div class="publisher">Yayıncı: Sitepoint</div>
    <div class="author">Yazar: Stuart Langridge</div>
</div>

HTML’in Avantajları

JavaScript kısmında yapmanız gerekenler çok azdır.

HTML’in Dezavantajları

HTML kodları bir form döndürüyorsa, Internet Explorer’da korkutucu hatalar ile karşılaşabilirsiniz.
Büyük boyutlu dosyalarda ekstra yük cabası.

12 Yorum

  • murat

    güzel bir açıklama olmuş.

  • selçuk

    mükemmel açıklama olmuş , json konusunda türkçe kaynak sıkıntısının olduğunu düşünürsek böyle yazılara program geliştiriciler büyük ihtiyaç duymakta json konusunda örneklerin devamını bekliyoruz

  • Matlab

    Ben Bir web Sitesi Yazmak istiyorum Yalnızca Jquery,Ajax,Json,Html,Css ‘ den oluşması gerekli bu mümkünmü ? yani php veya asp tarzı herhangi bir programlama dili kullanmadan.

  • yukarıdaki dosyaların hiç birine ellemeden kendi serverımıza attım ama json bölümü çalışmıyor. acaba bende mi sorun var yoksa bizim server’da mı ?

    • Ulvi

      Merhaba,

      Ben de şimdi denedim. Herhangi bir problem gözükmüyor. Chrome üzerinden F12’ye basıp Console kısmında kırmızı renkle yazan hata/ları varsa söyler misiniz?

  • F12 yaptım: “XMLHttpRequest cannot load https://www.tdag-ticbor.org.tr/tr. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://tdag-ticbor.org.tr’ is therefore not allowed access.” diyor.

    https://tdag-ticbor.org.tr/tr/serko/ ve devamında https://tdag-ticbor.org.tr/tr/serko/sonuc.json yazında ana sasyfaya gidiyor.

    • Ulvi

      Üstteki hata güvenlik amacıyla üretilmiş olan CORS dediğimiz mekanizmadan kaynaklanıyor. Asıl problemimiz bu olsaydı bunun birden fazla çözüm yolu var. Bir tanesi;

      JSON dosyasını PHP ile oluşturup, header eklemek gibi:

      <?php
          header("Access-Control-Allow-Origin: *");
      ?>
      

      Ama sanırım sizin probleminiz farklı. JSON dosyasını tekrar sunucuya gönderir misiniz? Sanırım dosyayı aktarırken bir sıkıntı oluşmuş.

  • Ulvi

    Dosyayı aktarmak sıkıntınızı çözmez ise;

    Sunucunuzda JSON mime tipi default olarak tanımlı değil sanırım. Bir .htaccess dosyası oluşturup içine şunu yazar mısınız?

    AddType application/json .json
    
  • Gerçekten çok teşekkür ederim. .htaccess dosyası ile durumu düzelttim.
    Sağolun.

  • teşekkürler..

  • Emir HASANOĞLU

    peki aşağıdaki yapıda bir .json daki toplam verilerin sadece ilkini nasıl alabiliriz.

    [
    {"tarih":"13.02.2016","imsak":"05:24","gunes":"06:49","ogle":"12:21","ikindi":"15:13"},
    {"tarih":"14.02.2016","imsak":"05:23","gunes":"06:48","ogle":"12:21","ikindi":"15:14"},
    {"tarih":"15.02.2016","imsak":"05:22","gunes":"06:46","ogle":"12:21","ikindi":"15:15"},
    {"tarih":"14.03.2016","imsak":"04:42","gunes":"06:06","ogle":"12:16","ikindi":"15:35"}
    ]
    

Yanıtla selçuk