Merhaba arkadaşlar bu yazımda kendi oluşturduğumuz json dosyasından nasıl verileri çekebileceğimizi anlatıcam . İlk önce bir json dosyası oluşturalım . Ben .txt uzantılı bir json dosyası oluşturuyorum .
İstediğimiz kadar kullanıcı ekleyebiliriz . Ben şimdilik 3 tane ekliyorum . Şimdi index dosyamızı yazalım . Gereken html taglarımızı açalım . Body içerisinede id 'si istediğiniz bir isim olan bir div açalım .
Yaptıktan sonra script taglarımızın içine ajax isteğimizi başlatalım .
Teker teker satırları inceleyelim.
İlk olarak bir fonksiyon oluşturalım. XMLHttpRequest xml nesnemi kullanarak bir hr adından bir obje oluşturuyorum . XMLHttpRequest ' i kullanmamın amacı gereksiz kodlamadan kurtamasıdır . Developerlar arasında bir rüya olarak adlandırılır. Gelelim ne işe yaradığına
- Web sayfalarını yeniden yüklemeye gerek kalmadan günceller.
- Sayfa yüklendikten sonra serverdan veri istegi gönderir .
- Sayfa yüklendikten sonra serverdan veri alır .
- Arkaplanda servera veri gönderir.
hr nesne oldugundan XMLhttpRequest 'in metodlarını kullanabilirim . open metodumu kullanarak gereken detayları yazıyorum .
Type get olucak belirtilen Url 'den verileri almamız için . URL : json.txt ve async : true yapıyoruz . True ile belirtilen http istegi eş zamanlı olarak işlenir.
header : belirtilen header adı
value : belirtilen header değeri , bizim değerimiz json
onreadystateschange her an değişen readystates özellikleri fonksiyon olarak depolar.
readystates : 0 ile 4 arasında değişen XMLHttpRequest durumlarını tutar.
0 : istek başlatılamadı . (request not initialized )
1 : server iletişim kuruldu. (server connection established)
2 : istek alındı . (request received )
3 : istek işleniyor. (processing request )
4 : istek bitirildi ve cevap hazır (request finished and response is ready)
status :
200 : "OK"
404 : Sayfa bulunamadı (Page not found)
onreadystateschange olayı ile server cevabı işlenmeye hazır olduğunda neler olacağını belirtiyoruz .
readystates : 4 ve status : 200 olduğunda cevap hazır duruma geliyor.
data adında bir değişken oluşturuyoruz ve bu değişkene string olarak parse ediceğimiz JSON ' ı atyoruz.
results adında bir değişken oluşturuyorum ve bu değişkenime id'si result olan div e ulaşmasını sağlıyoruz . Artık results değişkenim ile div 'in içindeyim .
result degişkenimle div'im içine obj değişkeni kullanarak verilerimi html olarak yazdırıyorum .
herhangi bir değer göndermeyeceğimizden null yapıyoruz.
Böylece kodlamamız bitmiştir . Unutmadan belirteyim yerel bir sunucuda kodları çalıştırmalıyız.Ajax işlemleri kullandığımızdan .
Umarım yararlı olmuştur . İyi çalışmalar...
{
"k1":{
"kullanici" : "Ahmet" ,
"yas" : "22" ,
"sehir" : "Ankara"
},
"k2":{
"kullanici" : "Ayşe" ,
"yas" : "29" ,
"sehir" : "İzmir"
},
"k3":{
"kullanici" : "Jhon" ,
"yas" : "25" ,
"sehir" : "Barcelona"
}
} İstediğimiz kadar kullanıcı ekleyebiliriz . Ben şimdilik 3 tane ekliyorum . Şimdi index dosyamızı yazalım . Gereken html taglarımızı açalım . Body içerisinede id 'si istediğiniz bir isim olan bir div açalım .
<html>
<head>
<script type ="text/javascript">
</script>
</head>
<body>
<div id="results"></div>
</body>
</html>Yaptıktan sonra script taglarımızın içine ajax isteğimizi başlatalım .
function ajax_get_json(){
var hr = new XMLHttpRequest();
hr.open("GET","json.txt","true");
hr.setRequestHeader("Content-type","application/json",true);
hr.onreadystatechange = function (){
if(hr.readyState == 4 && hr.status == 200 ) {
var data = JSON.parse(hr.responseText);
var results = document.getElementById("results");
//results.innerHTML = ("Kullanici :"+data.kullanici + " <br/> Yaş : " + data.yas+ " <br/> Şehir : " + data.sehir);
for (var obj in data) {
results.innerHTML += data[obj].kullanici +" "+ data[obj].yas + " yaşında " +data[obj].sehir + " yaşıyor . <hr/>" ;
}
}
}
hr.send(null);
results.innerHTML =""
} Teker teker satırları inceleyelim.
İlk olarak bir fonksiyon oluşturalım. XMLHttpRequest xml nesnemi kullanarak bir hr adından bir obje oluşturuyorum . XMLHttpRequest ' i kullanmamın amacı gereksiz kodlamadan kurtamasıdır . Developerlar arasında bir rüya olarak adlandırılır. Gelelim ne işe yaradığına
- Web sayfalarını yeniden yüklemeye gerek kalmadan günceller.
- Sayfa yüklendikten sonra serverdan veri istegi gönderir .
- Sayfa yüklendikten sonra serverdan veri alır .
- Arkaplanda servera veri gönderir.
hr nesne oldugundan XMLhttpRequest 'in metodlarını kullanabilirim . open metodumu kullanarak gereken detayları yazıyorum .
hr.open("GET","json.txt","true"); hr.open(method,url,async); Type get olucak belirtilen Url 'den verileri almamız için . URL : json.txt ve async : true yapıyoruz . True ile belirtilen http istegi eş zamanlı olarak işlenir.
hr.setRequestHeader("Content-type","application/json",true); setRequestHeader(header,value,async) header : belirtilen header adı
value : belirtilen header değeri , bizim değerimiz json
hr.onreadystatechange = function (){
} onreadystateschange her an değişen readystates özellikleri fonksiyon olarak depolar.
if(hr.readyState == 4 && hr.status == 200 ) { readystates : 0 ile 4 arasında değişen XMLHttpRequest durumlarını tutar.
0 : istek başlatılamadı . (request not initialized )
1 : server iletişim kuruldu. (server connection established)
2 : istek alındı . (request received )
3 : istek işleniyor. (processing request )
4 : istek bitirildi ve cevap hazır (request finished and response is ready)
status :
200 : "OK"
404 : Sayfa bulunamadı (Page not found)
onreadystateschange olayı ile server cevabı işlenmeye hazır olduğunda neler olacağını belirtiyoruz .
readystates : 4 ve status : 200 olduğunda cevap hazır duruma geliyor.
var data = JSON.parse(hr.responseText); data adında bir değişken oluşturuyoruz ve bu değişkene string olarak parse ediceğimiz JSON ' ı atyoruz.
var results = document.getElementById("results"); results adında bir değişken oluşturuyorum ve bu değişkenime id'si result olan div e ulaşmasını sağlıyoruz . Artık results değişkenim ile div 'in içindeyim .
for (var obj in data) {
results.innerHTML += data[obj].kullanici +" "+ data[obj].yas + " yaşında " +data[obj].sehir + " yaşıyor . <hr/>" ;
} result degişkenimle div'im içine obj değişkeni kullanarak verilerimi html olarak yazdırıyorum .
hr.send(null);herhangi bir değer göndermeyeceğimizden null yapıyoruz.
Böylece kodlamamız bitmiştir . Unutmadan belirteyim yerel bir sunucuda kodları çalıştırmalıyız.Ajax işlemleri kullandığımızdan .
Umarım yararlı olmuştur . İyi çalışmalar...
