{"id":533,"date":"2012-12-23T17:37:14","date_gmt":"2012-12-23T14:37:14","guid":{"rendered":"http:\/\/ulviercan.com\/teknoblog\/?p=533"},"modified":"2015-01-05T18:15:34","modified_gmt":"2015-01-05T15:15:34","slug":"jquery-ve-xml-json-html","status":"publish","type":"post","link":"https:\/\/www.ulviercan.com\/teknoblog\/jquery\/jquery-ve-xml-json-html\/","title":{"rendered":"jQuery ve XML, JSON, HTML?"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-534\" alt=\"json_xml_html\" src=\"https:\/\/ulviercan.com\/teknoblog\/wp-content\/uploads\/2012\/12\/json_xml_html.png\" width=\"450\" height=\"100\" srcset=\"https:\/\/www.ulviercan.com\/teknoblog\/wp-content\/uploads\/2012\/12\/json_xml_html.png 450w, https:\/\/www.ulviercan.com\/teknoblog\/wp-content\/uploads\/2012\/12\/json_xml_html-300x67.png 300w, https:\/\/www.ulviercan.com\/teknoblog\/wp-content\/uploads\/2012\/12\/json_xml_html-248x55.png 248w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/p>\n<p> <!--Ads1-->jQuery Ajax i\u015flemlerinde, server bazl\u0131 \u00e7al\u0131\u015fan .NET, PHP gibi programlama dilleriyle beraber \u00e7al\u0131\u015fabilir. Server bazl\u0131 \u00e7al\u0131\u015fan programlama dilleri bize XML, JSON veya HTML dillerinde veriler \u00fcretebilirler. Peki biz bunlar\u0131n hangisini tercih etmeliyiz? Asl\u0131nda bu sorunun tek bir cevab\u0131 yok. Elimizde bulunan yap\u0131lara g\u00f6re, performans ihtiyac\u0131na g\u00f6re, ve en \u00f6nemlisi de yapaca\u011f\u0131m\u0131z i\u015fe g\u00f6re bunu belirleyebiliriz. Zaten \u00e7e\u015fitlilik ihtiya\u00e7lardan do\u011fmu\u015ftur.<\/p>\n<p>XML ve JSON bir programlama dilinden \u00e7ok, bir yap\u0131. HTML ile aralar\u0131ndaki bu farktan dolay\u0131 asl\u0131nda bu makalede XML, JSON bir boyutta, HTML ba\u015fka bir boyutta incelenmeli. XML ile JSON&#8217;\u0131 bana soracak olursan\u0131z k\u0131yaslamaya gerek dahi yok. JSON XML&#8217;e g\u00f6re \u00e7ok daha yeni, esnek ve bunlar gibi avantajlara sahip. Bir ka\u00e7 madde alt\u0131nda k\u0131yaslama yapal\u0131m.<!--more--><\/p>\n<h3>Kolayl\u0131k<\/h3>\n<p>XML kolayd\u0131r. Ancak JSON XML&#8217;den daha kolayd\u0131r. JSON daha k\u00fc\u00e7\u00fck gramer yap\u0131s\u0131na sahiptir ve bir \u00e7ok modern dil taraf\u0131ndan kullan\u0131lmaktad\u0131r.<\/p>\n<h3>\u00c7al\u0131\u015fabilirlik<\/h3>\n<p>XML e\u015fittir JSON dersek hi\u00e7 de hatal\u0131 say\u0131lmay\u0131z.<\/p>\n<h3>Uzayabilirlik (Extensibility)<\/h3>\n<p>Ba\u015fl\u0131k biraz garip gelebilir. En ba\u015fta \u015funu s\u00f6yleyeyim. JSON uzayabilir de\u011fildir. \u00c7\u00fcnk\u00fc JSON, HTML veya XML gibi belge bi\u00e7imlendirme dili de\u011fildir. Yani, i\u00e7erisindeki veriyi temsil etmek i\u00e7in yeni etiketler veya \u00f6znitelikler tan\u0131mlaman\u0131za gerek yoktur.<\/p>\n<h3>A\u00e7\u0131kl\u0131k (A\u00e7\u0131k kaynak kodlu olmak, kullan\u0131m k\u0131s\u0131tlamalar\u0131)<\/h3>\n<p>JSON herhangi bir politik, kurumsal tekelin elinde veya kurallar\u0131na ba\u011fl\u0131 olmad\u0131\u011f\u0131 i\u00e7in, en az XML kadar a\u00e7\u0131k bir dildir.<\/p>\n<p>Bir \u00f6nceki makalemi <a href=\"https:\/\/ulviercan.com\/teknoblog\/onerilen\/jquery-ve-php\/\" target=\"_blank\">(jQuery ve PHP)<\/a> inceleme f\u0131rsat\u0131 bulduysan\u0131z, i\u015flemlerin JSON veriler ile ger\u00e7ekle\u015ftirildi\u011fini g\u00f6rebilirsiniz. Peki neden JSON&#8217;u tercih ettim? Buradaki kilit nokta verinin boyutu. JSON veriler, ham veriyi i\u00e7erdi\u011fi i\u00e7in boyutlar\u0131 \u00e7ok k\u00fc\u00e7\u00fckt\u00fcr. Ham veri derken kastetti\u011fim \u015fey, &#8220;Form Validation&#8221; \u00f6rne\u011finde ekrana verdi\u011fim &#8220;Ad Bo\u015f Olamaz&#8221; uyar\u0131s\u0131n\u0131n rengi fark edebilece\u011finiz \u00fczere k\u0131rm\u0131z\u0131. Bu k\u0131rm\u0131z\u0131l\u0131k sunucudan d\u00f6nen veri ile de\u011fil, daha \u00f6nceden y\u00fcklenmi\u015f olan kodlar ile sa\u011flanmaktad\u0131r. Benim sunucudan \u00e7ekti\u011fim veri sadece uyar\u0131n\u0131n kendisi (Ad Bo\u015f Olamaz) dir. Yine dikkat ettiyseniz, JSON verisi kullan\u0131c\u0131 taraf\u0131nda ayr\u0131\u015ft\u0131r\u0131l\u0131p, i\u015flenmek zorunda ve bu da \u015fu dezavantaj\u0131 getiriyor. Kullan\u0131c\u0131 o iste\u011fi yapmasa dahi o istekten d\u00f6necek olan veriyi ay\u0131klayacak JavaScript kodlar\u0131n\u0131n sayfaya \u00f6nceden y\u00fcklenmesi. JSON kullanmaya karar verirken dikkatle cevapland\u0131rmak gereken soru, sunucudan ham veriyi \u00e7ekme daha m\u0131 verimli? Bu soruyu cevaplad\u0131ktan sonra san\u0131r\u0131m geriye uygulaman\u0131z\u0131 yazmak kal\u0131yor \ud83d\ude42<\/p>\n<p>HTML ise, bir jQuery Ajax uygulamas\u0131nda sunucudan \u00e7ekti\u011finiz veri bi\u00e7imlendirilmi\u015f veri yani ham veri de\u011filse, d\u00f6nen bu veri i\u00e7inden ham veri ile bir i\u015flem yapmayacaksan\u0131z san\u0131r\u0131m HTML kullanmal\u0131s\u0131n\u0131z demek do\u011fru olacakt\u0131r.<\/p>\n<h1>Uygulama<\/h1>\n<p>\u00c7ok fazla teorik olan bir giri\u015ften sonra kafam\u0131zda daha iyi oturmas\u0131 i\u00e7in \u00f6rnekler verece\u011fim.<\/p>\n<p><a href=\"https:\/\/ulviercan.com\/teknoblog\/wp-content\/uploads\/myCodeSamples\/jQuery_XML_JSON_HTML\/jQuery_XML_JSON_HTML.zip\" target=\"_blank\"><strong>[ Uygulamay\u0131 \u0130ndir ]<\/strong><\/a><\/p>\n<p>Her seferinde jQuery Ajax demektense direkt Ajax olarak bahsedece\u011fim.<br \/>\nAjax kullan\u0131rken d\u00f6nen sonu\u00e7 tipi ne olmal\u0131? Hangisi en ideali? HTML kod par\u00e7as\u0131 m\u0131? XML mi? JavaScript nesnesine d\u00f6n\u00fc\u015ft\u00fcr\u00fclm\u00fc\u015f JSON mu?<\/p>\n<p>\u00d6rnek Uygulama -&gt; <a href=\"https:\/\/ulviercan.com\/teknoblog\/wp-content\/uploads\/myCodeSamples\/jQuery_XML_JSON_HTML\/\" target=\"_blank\">https:\/\/ulviercan.com\/teknoblog\/wp-content\/uploads\/myCodeSamples\/jQuery_XML_JSON_HTML\/<\/a><br \/>\n<strong>index.html<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html PUBLIC &quot;-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN&quot; &quot;https:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd&quot;&gt;\r\n&lt;html xmlns=&quot;https:\/\/www.w3.org\/1999\/xhtml&quot;&gt;\r\n&lt;head&gt;\r\n&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text\/html; charset=utf-8&quot; \/&gt;\r\n&lt;style type=&quot;text\/css&quot;&gt;\r\n&lt;!--\r\n    body{\r\n        font-family: Helvetica;\r\n        font-size: 12px;\r\n    }\r\n\r\n\t.book{\r\n\t   background: #ececec;\r\n       padding: 10px;\r\n\t}\r\n\r\n    .title h3{\r\n\t   padding: 0;\r\n       margin: 0;\r\n\r\n\t}\r\n\r\n    .publisher{\r\n\t   color: green;\r\n\t}\r\n--&gt;\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;h3&gt;XML&lt;\/h3&gt;\r\n&lt;div id=&quot;xmlBooks&quot;&gt;&lt;\/div&gt;\r\n\r\n&lt;h3&gt;JSON&lt;\/h3&gt;\r\n&lt;div id=&quot;jsonBooks&quot;&gt;&lt;\/div&gt;\r\n\r\n&lt;h3&gt;HTML&lt;\/h3&gt;\r\n&lt;div id=&quot;htmlBooks&quot;&gt;&lt;\/div&gt;\r\n\r\n&lt;script type=&quot;text\/javascript&quot; src=&quot;jquery-1.8.3.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\n&lt;!--\r\n$(document).ready(function() {\r\n\r\n    \/\/ JSON\r\n    $.ajax({\r\n        url: &quot;sonuc.json&quot;,\r\n        dataType: &quot;json&quot;,\r\n        success: function(sonuc) {\r\n                    $.each(sonuc.books.book, function (i, val) {\r\n                        $(&quot;#jsonBooks&quot;).append('&lt;div class=&quot;book&quot;&gt;&lt;div class=&quot;title&quot;&gt;&lt;h3&gt;' + val.title + '&lt;\/h3&gt;&lt;\/div&gt;&lt;div class=&quot;publisher&quot;&gt;Yay\u0131nc\u0131: ' + val.publisher + '&lt;\/div&gt;&lt;div class=&quot;author&quot;&gt;Yazar: ' + val.author + '&lt;\/div&gt;&lt;\/div&gt;');\r\n                    });\r\n            }\r\n    });\r\n\r\n    \/\/ HTML Kod Par\u00e7as\u0131\r\n    $.ajax({\r\n        url: &quot;sonuc.html&quot;,\r\n        dataType: &quot;html&quot;,\r\n        success: function(sonucHTML){\r\n            $(&quot;#htmlBooks&quot;).html(sonucHTML)\r\n        }\r\n    });\r\n\r\n    \/\/ XML\r\n    $.ajax({\r\n        url: &quot;sonuc.xml&quot;,\r\n        dataType: &quot;xml&quot;,\r\n        success: xmlParser\r\n    });\r\n});\r\n\r\nfunction xmlParser(xml) {\r\n\r\n    $(xml).find(&quot;book&quot;).each(function () {\r\n        $(&quot;#xmlBooks&quot;).append('&lt;div class=&quot;book&quot;&gt;&lt;div class=&quot;title&quot;&gt;&lt;h3&gt;' + $(this).find(&quot;title&quot;).text() + '&lt;\/h3&gt;&lt;\/div&gt;&lt;div class=&quot;publisher&quot;&gt;Yay\u0131nc\u0131: ' + $(this).find(&quot;publisher&quot;).text() + '&lt;\/div&gt;&lt;div class=&quot;author&quot;&gt;Yazar: ' + $(this).find(&quot;author&quot;).text() + '&lt;\/div&gt;&lt;\/div&gt;');\r\n    });\r\n\r\n}\r\n\r\n--&gt;\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>sonuc.xml<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;books&gt;\r\n\t&lt;book&gt;\r\n\t\t&lt;title&gt;JavaScript, the Definitive Guide&lt;\/title&gt;\r\n\t\t&lt;publisher&gt;O'Reilly&lt;\/publisher&gt;\r\n\t\t&lt;author&gt;David Flanagan&lt;\/author&gt;\r\n\t\t&lt;cover src=&quot;\/images\/cover_defguide.jpg&quot; \/&gt;\r\n\t\t&lt;blurb&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;\/blurb&gt;\r\n\t&lt;\/book&gt;\r\n\t&lt;book&gt;\r\n\t\t&lt;title&gt;DOM Scripting&lt;\/title&gt;\r\n\t\t&lt;publisher&gt;Friends of Ed&lt;\/publisher&gt;\r\n\t\t&lt;author&gt;Jeremy Keith&lt;\/author&gt;\r\n\t\t&lt;cover src=&quot;\/images\/cover_domscripting.jpg&quot; \/&gt;\r\n\t\t&lt;blurb&gt;Praesent et diam a ligula facilisis venenatis.&lt;\/blurb&gt;\r\n\t&lt;\/book&gt;\r\n\t&lt;book&gt;\r\n\t\t&lt;title&gt;DHTML Utopia: Modern Web Design using JavaScript &amp;amp; DOM&lt;\/title&gt;\r\n\t\t&lt;publisher&gt;Sitepoint&lt;\/publisher&gt;\r\n\t\t&lt;author&gt;Stuart Langridge&lt;\/author&gt;\r\n\t\t&lt;cover src=&quot;\/images\/cover_utopia.jpg&quot; \/&gt;\r\n\t\t&lt;blurb&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;\/blurb&gt;\r\n\t&lt;\/book&gt;\r\n&lt;\/books&gt;\r\n<\/pre>\n<h3>XML&#8217;in Avantajlar\u0131<\/h3>\n<p>En \u00f6nemli avantaj\u0131 insanlar taraf\u0131ndan okunmas\u0131 kolayd\u0131r(programc\u0131l\u0131\u011fa ne katk\u0131s\u0131 var derseniz, tart\u0131\u015f\u0131l\u0131r.)<br \/>\n\u0130kinci avantaj\u0131 ise bir \u00e7ok programc\u0131n\u0131n al\u0131\u015fk\u0131n oldu\u011fu bir dildir. Server tarafl\u0131 programlama yapan ki\u015fiye, sonu\u00e7lar\u0131 XML olarak d\u00f6nd\u00fcr dedi\u011finizde bir problemle kar\u015f\u0131la\u015fmazken, JSON istiyorum dedi\u011finizde kar\u015f\u0131 taraf\u0131n tepkisi garip olabilir.<\/p>\n<h3>XML&#8217;in Dezavantajlar\u0131<\/h3>\n<p>Gereksiz etiketlerden dolay\u0131 \u00e7ok b\u00fcy\u00fck dosyalarda y\u00fck olu\u015fturacakt\u0131r.<\/p>\n<p><strong>sonuc.json<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n{&quot;books&quot;:\r\n    {&quot;book&quot;:\r\n        &#x5B;\r\n         {&quot;title&quot;:&quot;JavaScript, the Definitive Guide&quot;,&quot;publisher&quot;:&quot;O'Reilly&quot;,&quot;author&quot;:&quot;David Flanagan&quot;},\r\n         {&quot;title&quot;:&quot;DOM Scripting&quot;,&quot;publisher&quot;:&quot;Friends of Ed&quot;,&quot;author&quot;:&quot;Jeremy Keith&quot;},\r\n         {&quot;title&quot;:&quot;DHTML Utopia: Modern Web Design using JavaScript &amp; DOM&quot;,&quot;publisher&quot;:&quot;Sitepoint&quot;,&quot;author&quot;:&quot;Stuart Langridge&quot;}\r\n        ]\r\n    }\r\n}\r\n<\/pre>\n<h3>JSON&#8217;\u0131n Avantajlar\u0131<\/h3>\n<p>Gereksiz kod, etiket, \u00f6znitelik i\u00e7ermedi\u011finden dolay\u0131 \u00e7ok hafiftir ve b\u00fcy\u00fck boyutlu dosyalarda ekstra y\u00fck olu\u015fturmaz.<\/p>\n<h3>JSON&#8217;\u0131n Dezavantajlar\u0131<\/h3>\n<p>\u0130nsanlar i\u00e7in okumas\u0131 zordur(aman programc\u0131l\u0131k i\u00e7in \u00e7ok \u00f6nemli). Kodlar\u0131n sonunda yeni ba\u015flayanlar\u0131 korkutabilecek &#8220;}}]}&#8221; \u015feklinde biti\u015fler g\u00f6rebilirsiniz.<\/p>\n<p><strong>sonuc.html<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div class=&quot;book&quot;&gt;\r\n    &lt;div class=&quot;title&quot;&gt;&lt;h3&gt;JavaScript, the Definitive Guide&lt;\/h3&gt;&lt;\/div&gt;\r\n    &lt;div class=&quot;publisher&quot;&gt;Yay\u0131nc\u0131: O'Reilly&lt;\/div&gt;\r\n    &lt;div class=&quot;author&quot;&gt;Yazar: David Flanagan&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=&quot;book&quot;&gt;\r\n    &lt;div class=&quot;title&quot;&gt;&lt;h3&gt;DOM Scripting&lt;\/h3&gt;&lt;\/div&gt;\r\n    &lt;div class=&quot;publisher&quot;&gt;Yay\u0131nc\u0131: Friends of Ed&lt;\/div&gt;\r\n    &lt;div class=&quot;author&quot;&gt;Yazar: Jeremy Keith&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=&quot;book&quot;&gt;\r\n    &lt;div class=&quot;title&quot;&gt;&lt;h3&gt;DHTML Utopia: Modern Web Design using JavaScript &amp;amp; DOM&lt;\/h3&gt;&lt;\/div&gt;\r\n    &lt;div class=&quot;publisher&quot;&gt;Yay\u0131nc\u0131: Sitepoint&lt;\/div&gt;\r\n    &lt;div class=&quot;author&quot;&gt;Yazar: Stuart Langridge&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h3>HTML&#8217;in Avantajlar\u0131<\/h3>\n<p>JavaScript k\u0131sm\u0131nda yapman\u0131z gerekenler \u00e7ok azd\u0131r.<\/p>\n<h3>HTML&#8217;in Dezavantajlar\u0131<\/h3>\n<p>HTML kodlar\u0131 bir form d\u00f6nd\u00fcr\u00fcyorsa, Internet Explorer&#8217;da korkutucu hatalar ile kar\u015f\u0131la\u015fabilirsiniz.<br \/>\nB\u00fcy\u00fck boyutlu dosyalarda ekstra y\u00fck cabas\u0131.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery Ajax i\u015flemlerinde, server bazl\u0131 \u00e7al\u0131\u015fan .NET, PHP gibi programlama dilleriyle beraber \u00e7al\u0131\u015fabilir. Server bazl\u0131 \u00e7al\u0131\u015fan programlama dilleri bize XML, JSON veya HTML dillerinde veriler \u00fcretebilirler. Peki biz bunlar\u0131n hangisini tercih etmeliyiz? Asl\u0131nda bu sorunun tek bir cevab\u0131 yok. Elimizde bulunan yap\u0131lara g\u00f6re, performans ihtiyac\u0131na g\u00f6re, ve en \u00f6nemlisi de [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":534,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,11,9,10],"tags":[12,41,21,39,38],"class_list":["post-533","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-json","category-php","category-xml","tag-html","tag-javascript","tag-jquery-2","tag-json-2","tag-xml-2"],"_links":{"self":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/comments?post=533"}],"version-history":[{"count":20,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/533\/revisions"}],"predecessor-version":[{"id":677,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/533\/revisions\/677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/media\/534"}],"wp:attachment":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/media?parent=533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/categories?post=533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/tags?post=533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}