İPUCU

Seçenekler

jSON ve jQuery İşlemleri

H-1-N-1- - ait Kullanıcı Resmi (Avatar)
Forumdan Uzaklaştırıldı
Üyelik tarihi:
07/2010
Nereden:
İstanbul
Mesajlar:
1.952
Konular:
417
Teşekkür (Etti):
31
Teşekkür (Aldı):
431
Ticaret:
(0) %
21-09-2012 15:41
#1
jSON ve jQuery İşlemleri

JSON nedir?




XML dilinin çok farklı kullanım alanları olmasına karşın JSON yalnızca veri alış-verişi amacıyla oluşturulmuş bir veri biçimlendirme yöntemidir. Açılmış haliyle JavaScript Object Notation demektir. javaScript dilinin bir parçası olduğu için XML’den çok daha kolay ve hızlı bir şekilde işlenebilir. Ayrıca XML ile biçimlendirilmiş bir veri kümesini JSON ile biçimlendirdiğinizde daha az yer kapladığını görürsünüz.
son ‘nu Xml ‘le alternatif olarak düsünebilirsiniz. Her ne kadar Ajax uygulamalarında Xml hala kullanılsa veya kullanılmaya devam etsede hemen hemen aynı işleri Json ile de çok daha pratik bir şekilde yapabiliriz. Json javaScript ‘in alt kümesi olduğu için Xml ‘den çok daha hızlı çalıştığını göreceksiniz. Ayrıca bir diğer avantajı ise Json ile biçimlendirdiğiniz bir veri kümesini Xml ‘le kiyasla daha az yer kaplamasıdır.

JSON, tamamen programlama dillerinden bağımsız, ancak C türevi dillere (C, C++, C#, Java, JavaScript, Perl, Python ve daha pek çoğu), yazılış bakımından çok benzeyen bir veri tanımlama formatıdır. Bu özellikler, JSON’u veri değiştokuşu için ideal hale getirmektedir.

JSON iki yapı üzerine kurulmuştur:

İsim/değer çifti koleksiyonu. Çeşitli programlama dillerinde bu, "object, record, struct, dictionary, hash table, keyed list veya associative array" olarak da tanımlanmıştır.
Sıralı değer listesi. Çoğu programlama dilinde bu, "array, vector, list veya sequence" olarak tanımlanır.

Bu yapılar, evrensel veri yapılarıdır. Bütün modern programlama dilleri, bu yapıları, bir şekilde içlerinde barındırmaktadırlar. Programla dilleri arasında veri değişimi için kullanılan bir formatın, bu yapıları kullanarak oluşturulması da oldukça anlamlıdır.
Bu yapılar JSON’da, aşağdaki şekillerde gösterilirler:
Bir nesne (object), isim/değer çiftlerinin sırasız birleşiminden oluşur. Nesne tanımlaması, { (kıvırcık parantez aç) ile başlar ve } (kıvırcık parantez kapa) ile biter. Her "isim"den sonra : (iki nokta üstüste) gelir ve isim/değer çiftleri , (virgül) ile ayrılır.



Diziler, sıralı değer listesidir. Bir dizi [ (köşeli parantez aç) ile başlar ve ] (köşeli parantez kapa) ile biter. Değerler , (virgül) ile ayrılır.



Bir değer, çift tırnak içinde bir string (yazı), sayı, true (doğru), false (yanlış), null (boş değer), object (nesne) veya array (dizi) olabilir. Bu yapılar bir birlerinin içinde tekrar edebilirler.



Bir string (yazı), çift tırnak içinde, ters-bölü kodlarına da izin veren, sıfır veya daha fazla "Unicode" karakterin birleşiminden oluşur. Bir karakter, string (yazı) tipindeki tek karakter olarak gösterilebilir.
String (yazı) tipi, C veya Java dilindeki "string" tipine çok benzemektedir.



Bir sayı C veya Java dilindeki sayılara çok benzer, ancak sekizli (octal) ve onaltılı (hexadecimal) rakamlar kullanılmamaktadır.


Tanımlamaların arasına, istendiği gibi beyaz boşluk (Whitespace) konulabilir. Verinin diline (Encoding) bağlı olarak, notasyonda bazı farklılıklar olabilir.

JSON Ne değildir?

JSON bir kütüphane (library) değildir: Elinizdeki bir CSV veya XML veriyi JSON’a dönüştürmek isteyebilirsiniz. Yada, JSON veriyi XML’e dönüştürmek isteyebilirsiniz. Bu gibi durumlarda dönüştürme kodları yazmalısınız. Dünyada, JSON dönüştürme işlemlerini yapan hazır ve kaliteli birçok kütüphane mevcuttur. JSON için hazırlanmış birçok kod kütüphanesinin var oluşu, JSON ile kütüphaneler arasında yanlış algılamalara neden olabilmektedir.

JSON bir framework değildir: Framework’ler çoğu zaman binlerce satır koddan oluşur. Bu nedenle, sağlam ve esnek temeller üzerine oturtulması gerekir. JSON, esnek ve sağlam bir temeldir ve framework’ler tarafından yoğun olarak kullanır. JSON ile framework’lerin bu iç içe geçmiş yapısı, JSON ile framework’lerin birbirine karıştırılmasına neden olabilmektedir. JSON bir yazım tarzıdır. Framework’ler ise, yazılımınızı kodlama biçiminizi tamamıyla değiştiren iskelet mimarilerdir.

JSON bir dil değildir: Dil ile iç içe geçmiş yapısı, onun bir dil olduğu yanılgısına sevk edebilir. JSON, dillerin yeteneklerini artıran, onları destekleyen bir yazım tarzıdır.

Avantajları

Büyük bir text veriyi ifade etmek için, XML gibi karmaşık ve Kilobayt olarak "ağır" etiketler yazmanıza gerek yoktur. JSON’un yazımı basittir, text yükü hafiftir.
Elinizdeki bir JSON ifadeyi, kodunuzun içine yapıştırıp bir değişkene set ederek direkt olarak kullanmaya başlayabilirsiniz.
XML’de olduğu gibi karmaşık ve ağır "parse" işlemlerine gerek yoktur.Kullanıma hazırdır.
Dünyadaki tüm diller tarafından desteklenen bir yazım tarzıdır: PHP, Java, .NET, ColdFusion 8+...


jQuery Nedir ?



jQuery hem javaScript hem ajax hem de efekt kütüphanesi olarak kullanılabilen bir framework’dür. 2006′nın Ocak ayında bir javaScript gurusu olan John Resih tarafından duyurulmuş. şu anda ise 15 kişilik bir ekip tarafından gelişimi sürdürülüyor. Lisans konusuna da kısaca değinmek gerekirse, MIT veya GPL lisansının şartlarına uyduğunuz sürece kendi uygulamalarınızda kullanabiliyorsunuz. Bu konuda jQuery’nin resmi web sitesi olan color=#000000 www.jquery.com‘dan daha fazla bilgi alabilirsiniz. Hem bu web sitesinden jQuery ile ilgili dokümantasyona, eğitsellere, eklentilere ve sorularınızı yazabileceğiniz foruma da ulaşabilirsiniz.

jQuery’yi Nasıl İndireceğim ve Kullanacağım ?

jQuery, sıkıştırılmış ve sıkıştırılmamış olmak üzere iki farklı şekilde dağıtılmaktadır. Sıkıştırılmamış sürümü yaklaşık olarak 61 KB iken, sıkıştırılmış sürümü ise yaklaşık 21 KB. Gördüğünüz gibi dosya boyutları hem javaScript, hem ajax, hem de efekt kütüphanesi için yeterince hafif. Eğer ki jQuery’yi oluşturan kodlara bakmak ve kodlar üzerinde değişiklik yapmak gibi bir düşünceniz yoksa her zaman için sıkıştırılmış sürümünü indirmenizi tavsiye ediyorum.

Eğer indirdiyseniz artık sıra onu kullanmaya gelmiş demektir. jQuery tek bir dosyadan oluşuyor. Bu dosyayı da web sayfanıza aşağıdaki örnekte olduğu gibi dâhil etmelisiniz. Web sayfanıza dahil ettikten sonra artık jQuery’nin bizlere sunmuş olduğu özellikleri kullanmaya başlayabilirsiniz.

şimdi de jQuery’nin özelliklerine kısaca göz atalım ;

<script type="text/javascript" src= ">


jQuery’nin birkaç özelliği ;

Basit kullanım: Gerçekten jQuery’nin son derece basit bir kullanımı var. Yapmak istediğiniz pek çok işlemi çoğu zaman “tek bir satırda” halledebiliyorsunuz. Örneğin web sayfanızdaki bütün div etiketlerini $(’div’) kodu ile yakalayabiliyorsunuz. Yok ben sadece class özniteliği “baslik” olan div etiketlerini yakalayacağım derseniz $(’div.baslik’) kodunu kullanmanız yetiyor. Yani jQuery’nin sloganında da yazdığı gibi: “daha az yazın, daha fazlasını yapın”

Zincirlenebilirlik: jQuery’nin Sihri (The Magic of jQuery) olarak isimlendirilmiş bu özellik sayesinde çok kısa kodlar yazabilirsiniz. jQuery içerisindeki methodları birbirine zincirleyerek tek satırda birden fazla işlemi yapabilirsiniz. Örneğin şöyle bir kod ile web sayfanızdaki tüm linkleri önce yakalarsınız, sonra bir class ataması yaparsınız ve son olarak da onclick olayına bir fonksiyon eklersiniz:

$(’a’).addClass(’deneme’).click(fonksiyon);

Eklentiler: jQuery’nin bir başka mükemmel özelliği de eklentileridir. Eklentileri, belli görevleri yapan ve jQuery kütüphanesi üzerinden geliştirilmiş kod parçacıkları olarak tanımlayabiliriz. Örneğin web sitenizde “sekme (tab) menüler” kullanmak isterseniz Tabs eklentisi, web sayfanıza bir mp3 player yerleştirmek isterseniz color=#000000 MP3 eklentisi ya da bir dosya yükleme uygulaması sunmak isterseniz color=#000000 Uploader eklentisi ihtiyacınızı karşılamaya hazırdır.

Uyumluluk: jQuery, şu anda en çok kullanılan web tarayıcılarında çalışabilmektedir. Internet Explorer 6.0+, Firefox 1.5+, Safari 2.0+ ve Opera 9.0+ ile sorunsuzca jQuery kullanabilirsiniz. Bunun haricinde Prototype.js gibi başka kütüphaneler ile birlikte de uyum içerisinde kullanabilirsiniz.

Efektler: jQuery, color=#000000 script.aculo.us gibi tamamen bir efekt kütüphanesi olmamasına rağmen yine de sık kullanılan efektleri sunuyor. Örneğin fadeOut efekti sayesinde bir nesnenin görünürlüğünü yavaş yavaş azaltırken, show efekti sayesinde daha önceden gizlenmiş bir nesneyi görünür kılabiliyorsunuz. En önemlisi de bu efektleri kullanmak çok basittir. Alttaki örnek kodda, “hide” efektini kullanarak “myDiv” isimli nesneyi yavaşça gizlemiş oluyoruz.

$("#myDiv").hide("slow");

AJAX:

jQuery diğer konularda olduğu gibi AJAX konusunda da kullanıcılarına kolaylıklar sağlıyor. Böylece web sayfanızın tamamı yüklenmeden, başka bir web sayfası ile etkileşime geçebiliyorsunuz. AJAX işlemi başlamadan önce veya bittikten sonra bir olayı tetiklemek, sunucudan gelen veri türüne göre (xml, json) işlem yapmak, belli zaman aralıklarında tekrar tekrar istekler yollamak v.s. jQuery ile yapabileceklerinizin küçük bir bölümü. Örneğin alttaki örnek kod ile AJAX kullanarak form.php dosyasına Erhan ve 23 verilerini post etmiş oluyoruz.

$.ajax({
type: "POST",
url: "form.php",
data: "isim=Erhan&yas=23"
});

Bu da basitleştirilmiş ve kolaylaştırılmış versiyonu:$.post( "form.php", {isim:"Erhan", yas:"23"} );

jQuery ile JSON verilerini işlemek

jQuery kütüphanesi ile JSON tipindeki verileri iki yöntemle işleyebiliriz.Bunlardan ilki AJAX istekleri oluşturuyorken kullandığımız $.ajax() fonksiyonudur.Bu fonksiyonda dataType seçeneğini kullanıp değer olarak json ataması yaparsanız artık jQuery ile JSON verisi işleyebilirsiniz.Bir de JSON verilerini işlemek için özel olarak hazırlanmış $.getJSON() fonksiyonu vardır. Biz burada her iki yöntemi de ele alacağız. Örneğimizde "program-bilgileri.php" isimli bir dosyamız mevcut.Bu dosyanın görevi, 3 adet bilgisayar programının bilgilerini JSON formatında vermek. Yani yukarıdaki JSON örneğinin aynısını kullanıyoruz.Sonra, bu dosyaya jQuery ile erişerek JSON tipinde gelen program bilgilerini işleyeceğiz.

$.ajax({
url: ’program-bilgileri.php’,
dataType: ’json’,
success: function(JSON) {
$(’#sonuc’).empty();

$.each(JSON.programlar, function(i, program){
***$(’#sonuc’)
***.append(JSON.program.isim +’<br />’)
***.append(JSON.program.bilgi+’<br />’)
***.append(JSON.program.adres+’<hr />’);
});
}
});

Buradaki ilk önemli nokta "dataType" seçeneği ile "program-bilgileri.php" dosyasından gelecek verinin JSON formatında olacağını bildirmektir. Sonraki önemli nokta ise alınan JSON formatındaki verilerin $.each() fonksiyonu kullanılarak tek tek işlenmesidir

şimdi de aynı işlemin $.getJSON() fonksiyonu ile nasıl yapıldığınına bakalım:

$.getJSON(’program-bilgileri.php’, function(JSON){
*$(’#sonuc’).empty();

*$.each(JSON.programlar, function(i, program){
**$(’#sonuc’)
**.append(program.isim +’<br />’)
**.append(program.bilgi+’<br />’)
**.append(program.adres+’<hr />’);
});
});

Eğer sık sık JSON tipindeki verilerle çalışacaksanız bu fonksiyon daha pratik gelecektir.Çünkü $.ajax() fonksiyonunda olduğu gibi her seferinde "dataType" ve "success" gibi seçenekleri belirtmek zorunda kalmazsınız.

Sonuç…

JSON formatı artık kendisine geniş bir kullanım alanı bulmuştur. Bugün pekçok web servisini incelediğimizde color=#0000ff color=#000099API kaynaklarını JSON formatında da sunduklarını görüyoruz. color=#0000ff color=#000099Yahoo, color=#0000ff color=#000099Delicious, color=#0000ff color=#000099Flickr, color=#0000ff color=#000099YouTube, color=#0000ff color=#000099Getclicky… gibi büyük servisler buna sadece birkaç örnek. işte bundan dolayı JSON formatı ile işlem yapmaya alışık olmalıyız.

Jquery ile Json Kullanan ASP.NET Ajax Methodları Nasıl Kullanılır ?

Şimdi JSON ile ASP.NET AJAX methodlarını (Web Method) nasıl kullanabiliriz ona bakalım.

Kodumuzda bilgisayarda çalışan işlemleri (Ctrl+Alt+Delete) ile görebildiğimiz işlemlerin özelliklerini, Web Method ile çevirelim. Sonra bu methodu tarayıcı tarafında JSON ile çağırıp listeleyelim: (Öncelikle VS’de bir web projesi açalım ve App_Code dosyası içerisinde IslemBilgisi.cs dosyasını yaratalım ve aşağıdaki kodu yazalım)

public class IslemBilgisi
{
public string IslemAdı { get; set; }
public long SayfalanmisMemoryBuyuklugu { get; set; }
}

Şimdi Default.aspx.cs dosyasına şunu ekleyelim:

[System.Web.Services.WebMethod]
public static List<islembilgisi> IslemleriAl()
{
var query = (from p in System.Diagnostics.Process.GetProcesses()
select new IslemBilgisi
{
IslemAdı = p.ProcessName,
SayfalanmisMemoryBuyuklugu = p.PagedMemorySize64
}).ToList();
return query;
}
</islembilgisi>


Dikkat: Method static olmalı

[System.Web.Services.WebMethod], altına yazdığımız methodu tarayıcı tarafından çağırabilmemizi sağlar. Server tarafında yukarıdaki bilgiyi aldıktan sonra şimdi JQuery ile yukardaki datayı JSON formatında alalım (extra bir iş yapmamıza gerek yok. Objeleri List içerisinde çevirdiğimizden dolayı otomatik olarak JSON data geliyor).

$(********).ready(function() {
$.ajax({
type: "POST",
url: "Default.aspx/IslemleriAl",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function(msg) {
var islemBilgisi = msg.d;
for (var i = 0; i < islemBilgisi.length; i++) {
var satir = "Islem Adı: " +
islemBilgisi[i].IslemAdı +
"" +
"Sayfalanmış Memori Buyuklugu: " +
processInfo[i].SayfalanmisMemoryBuyuklugu;
$("#Sonuclar").append("<div>" + satir + "</div>");
}
}
});
});


Dikkat: Yukarıdaki kodu JQuery için gerekli ********** tagını ekledikten sonra yazalım.

Şimdi kodu inceleyelim. $(********).ready... yazarak DOM yüklenir yüklenmez hangi function’ın çağrılması gerekiyor, onu belirliyoruz. $.ajax, ajax callbackleri (Postback’in tersine tüm sayfayı yenilemeden) yapabilmemizi sağlayan bir method.

type:POST ile HttpPost yapıyoruz. urlefault.aspx/IslemleriAl, ASP.NET’in bize sunduğu çok güzel bir özelliği kullanabilmemizi sağlıyor: Sayfa url’inin arkasına, Web Method’un ismini eklememiz bu methodu çağırabilmemiz için yeterli. contentType ve dataType ile JSON formatında data alınması gerektiğini belirtmiş oluyoruz.

async:true ile asynchronous (arka planda denilebilir) bir şekilde işlemi gerçekleştirmiş oluyoruz. false olsaydı serverdan tüm data gelene kadar sayfadaki tüm işlem donmuş olurdu. success: ile data başarılı bir şekilde geldiğinde, bu datayı formatlayıp sayfaya sunacak function’u belirtmiş oluyoruz.

$("#Sonuclar") ile id’si olan HTML elementini (örnekte <div> elementi) alıp içindeki testini belirliyoruz. for döngüsü içerisinde serverdan List<IslemBilgisi> olarak çevirdiğimiz listenin (JSON formatı olarak array) üzerinden geçiyoruz. Önemli olan nokta ise bu arrayin herbir elementi object olarak gelmiş oluyor. Yani server tarafında IslemBilgisi sınıfında tanımladığımız IslemAdı ve SayfalanmisMemoryBuyuklugu’nu attribute olarak kullanabiliyoruz. $("#Sonuclar").append ile de #Sonuclar div’inin içerisinde (dışına değil) tüm datayı gösterebiliyoruz.


Bookmarks


« Önceki Konu | Sonraki Konu »
Seçenekler

Yetkileriniz
Sizin Yeni Konu Acma Yetkiniz var yok
You may not post replies
Sizin eklenti yükleme yetkiniz yok
You may not edit your posts

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodları Kapalı
Trackbacks are Kapalı
Pingbacks are Kapalı
Refbacks are Kapalı