Merhaba arkadaşlar.Bugünlerde ajax a merak sardım.Bu merakımı bilinen servislerin api leriyle oynaşmakla gideriyorum.Script edasında bir Youtube müzik arama sayfası yaptım.Youtube API JSON ile çalışıyor script.Aslında başlığa video çekimi demişim ama veri çekimi demek daha doğru olurmuş.



jquery :
Bu kısımda şunları yaptık :
form submit edildiğinde belirlediğimiz inputtaki aranacak kelimeyi aldık.Bu kelimeyi encodeURIComponent ile adres çubuğuna uygun hale getirdik.Ardından da http://gdata.youtube.com/feeds/api/v...category=Music adresinde arama yaptırdık.Gelen verileri de $.ajax() get fonksiyonuyla alıp,$.each() ile ekrana yazdırdık.

$(document).ready(function() {
    $("#muzikara").submit(function() {
    $("#video").html('');
    var k = $("#kelime").val();
    var a = encodeURIComponent(k);
    var adres = 'http://gdata.youtube.com/feeds/api/videos?q='+a+'&max-results=24&v=2&alt=jsonc&category=Music';
        $.ajax({
        type: "GET",
        url: adres,
        dataType:"jsonp",
        success: function(sonuc) {
            if(sonuc.data.items)    {
                $.each(sonuc.data.items, function(i,data) {
                var video_id = data.id;
                var video_baslik = data.title;
                var video_resim = data.thumbnail.sqDefault;
                var video_izlenme = data.viewCount;
                var final="<li><a title='"+video_izlenme+" izlenme' id='muzik"+video_id+"' href='http://youtube.com/watch?v="+video_id+"'><img src='"+video_resim+"' />"+video_baslik+"</a></li>";
                $("#video").append(final);
                });
            } else {
                $("#video").html("<div id='video_yok'>video yok</div>");
            }
        }
        });
    });
});

html :

<form id="muzikara" onsubmit="return false">
    <input type="text" id="kelime" />
    <input type="submit" id="ara" value="ara"/>
</form>
<div id="alan">
    <ul id="video"> </ul>
</div>

css :

body {background:#86C9EF;font-size:13px;color:#fff;font-family:verdana;}
ul,li {list-style:none;margin:0;padding:0;}
li {float:left;width:120px;padding:5px;background:#fff;height:150px;margin-right:20px;margin-bottom:20px;}
li a{color:#333;font-weight:bold;text-decoration:none;position:relative;}
li a:hover:after{position:absolute;content:attr(title);font-size:10px;left:110px;top:-40px;background:#333;color:#fff;z-index:9999;padding:2px;line-height:18px;width:120px;}
#muzikara,#video {margin-top:20px;margin-left:20px;width:700px;}
input[type=text] {padding:5px;border:2px solid #222;background:#fff;font-size:18px;font-weight:bold;width:300px;}   
input[type=submit] {padding:5px;background:#333;cursor:pointer;color:#fff;border:0;font-size:18px;font-weight:bold;}

Demo için tıklayınız,dosyayı indirip incelemek için tıklayınız.

Kaynak : http://blog.ozergul.net/youtubedan-j...uery-ajax.html
Sorularınızı varsa sorabilirsiniz.