Skip to content

JavaScript ile Uzak Adresten Veri Çekmek

Merhaba arkadaşlar,

Bu makalemde JavaScript ile farklı bir domain’den nasıl veri çekeceğinizi anlatıyorum. Bildiğiniz gibi domain’ler farklı oldukları zaman javascript ile işlem yapmak güçleşiyor.

Şimdi iki tane domain hayal edin. Birinde javascript kullanacağız, diğerinde ise PHP kullanacağız. JavaScript kullandığımız domain abc.com olsun. Diğer domain de def.com olsun. def.com’daki bilgleri abc.com’a çekmek için JSONP’siz $.post, $.get, $.ajax yöntemlerini kullanabilir miyiz? Kesinlikle hayır. Bu fonksiyonlarla harici bir domainden asla veri çekemeyiz. Bu noktada bizim yardımımıza $.getJSON() fonksiyonu koşuyor. Aslında bu da aşağıda göreceğiniz Ajax fonksiyonunun kısaltılmış halidir:

$.ajax({
 url: url,
 dataType: 'json',
 data: data,
 success: callback
});

$.getJSON ile farklı bir domain’e GET methodu ile veri gönderip oradan gelecek olan JSON datayı işleyebiliriz. Şimdi abc.com’dan şöyle bir sorgu göndereceğiz def.com’a: $.getJSON(“http://def.com/trkodlama.php?jsoncallback=?”);. Hemen abc.com adresimizin javascript kısmını kodlayalım

// Bu kodu yazarken sayfanıza jquery yi eklediğinizi varsayıyorum.
$(document).ready(function () {
	var _this = $(this);
	$.getJSON("http://def.com/trkodlama.php?jsoncallback=?", function(data) {
		$.each(data.urunler, function(i,urun){
			icerik = '<p>' + urun.baslik + '</p>';
			icerik += '<p>' + urun.aciklama+ '</p>';
			icerik += '<img src="' + urun.resim + '" alt="">';
			icerik += '<br>';
			$(icerik).appendTo("body");
		});
	});
});

Şimdide def.com/trkodlama.php dosyasının kodlarını verelim:

<?php
$dizi = Array('urunler' =>
    Array(
        0 => Array(
            'baslik'    => 'Ürün 1',
            'aciklama'  => 'Kaliteli bir ürün',
            'resim'     => '/resim/15/1.jpg'
        ),
        1 => Array(
            'baslik'    => 'Ürün 2',
            'aciklama'  => 'Kalitesiz ama ucuz bir ürün',
            'resim'     => '/resim/15/2.jpg'
        )
    )
);
echo json_encode($dizi);
?>

Kullanımı bu şekilde, umarım faydalı olur arkadaşlar,
Kolay gelsin,

TR Kodlama GitHub'da!

TR Kodlama'da yer alan makaleleri GitHub üzerinden düzenleyebileceğinizi biliyor muyudunuz? Harika değil mi? Bu makale ile ilgili düzenleme yapmak isterseniz aşağıdaki butona tıklayınız!

GitHub'da Görüntüle ve Düzenle!