Google Search API ile ajax arama

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "Google Search API ile ajax arama"

Aysu Topal
8 yıl önce
İzleme sayısı:

1 Google Search API ile ajax arama 14 Ağustos Salı 12 Eğer bir kaynak arıyorsanız, indexlerin güncelliği, genişliği gibi nedenlerden dolayı, diğer arama motorları yerine Google'ı tercih etmek, iyi bir karar olarak düşünülebilir. Yaptığınız Google aramalarını programatik olarak yapmak ve sonuçları herhangi bir şekilde kullanmanın sayısız örneği verilebilir. Örneğin, sayfanıza site içi arama eklemek istiyorsunuz. Sayfanıza ait içeriği eğer Google zaten tarıyorsa, site içi aramanız aslında basit bir Google araması ile yapılabilir. Biliyorsunuz Google'da "site:mfyz.com" şeklinde arama yapılacak domaini filtreleyebiliyorsunuz. Dolayısıyla site içi aramanızı, herhangi bir algoritma yazmaya gerek kalmadan, hatta sadece tarayıcıda javascript ile yapabilirsiniz. Google'un istemci altyapıları için sunduğu JSON tabanlı bir arama APIsi var. Bu api sayesinde normal bir Google araması yapabiliyorsunuz. Bu API'yi basit bir HTTP isteği ile kullanabiliyorsunuz. Herhangi bir Google araması yapıyormuş gibi bir sorgu gönderip cevabını json olarak alıp işleyebiliyorsunuz. Aramanızı bu URL'e gerekli parametreleri ekleyerek yaptığınızda Google en fazla 8 sonuç verecek şekilde dönüyor. Cevap olarak dönen JSON içeriği uzun olduğu için burada göstermeyeceğim. Ama birkaç parametreyle gelen sonuç kümesini kullanabilir, sayfalama ve sonuç boyutu gibi parametreler ile sayfalama yapabilirsiniz. Asıl kullanacağınız sonuç değeri, arama sonuçlarının bulunduğu response.responsedata.results sonuç kümesi olacaktır. Basit bir nesne dizisi olan bu değeri javascript ile ekrana doğrudan basabilir veya sunucu taraflı bir kod ile işleyebilirsiniz. Sayfa 1 / 5

düşünülebilir. Yaptığınız Google aramalarını programatik olarak yapmak ve sonuçları herhangi bir şekilde kullanmanın sayısız örneği verilebilir. Örneğin, sayfanıza site içi arama eklemek istiyorsunuz.

2 Google bu API ile tek istekte en fazla 8 sonuç döndürüyor. Nedenini kesin bir şekilde bilmiyorum fakat güvenlik nedeniyle olduğunu tahmin ediyorum. Eğer 8'den fazla sonuç göstermek istiyorsanız birden fazla api çağrısı yapmak zorundasınız veya istemci tarafında sayfalama yaparak sonuçları sayfalama ile gösterebilirsiniz. Sayfalama için API çağırısında göndereceğiniz start parametresi, arama sonuçlarının başlangıç sırasını belirtiyor. Eğer belirtilmezse geçerli değeri 0 olacaktır. Bundan sonra 8, 16, şeklinde ikinci, üçüncü sayfaya ait sonuçları, ek çağrı yaparak yükleyebilirsiniz. Burada kontrol etmeniz gereken tek şey, toplam bulunan sonuç kümenizde yeterli sonuç olup olmamasıdır. Yani eğer kullanıcı son sayfada ise "Sonraki Sayfa" linkini göstermemeniz gerekir. Basit bir sayfalama için; toplam sayfa say?s? = toplam sonuç say?s? / sayfa ba??na dü?en sonuç s ay?s? bölümünün üste yuvarlanması ile bulunur. Bunu Google size toplam bulunan sonuç sayısını tahmini şekilde söylüyor. Sonuç kümesindeki response.responsedata.cursor.estimatedresultcount parametresi size sayısal olarak tahmini sonuç sayısını söyleyecektir. Sayfa sayısını hesaplayarak gerekli sayfalama navigasyonunu oluşturabilirsiniz. Örneği kodlayalım Yazının başlarında verdiğim site içi arama örneğini javascript ile kodlayalım. Doğrudan tüm kodu verip açıklayacağım. <!doctype html> <html> <head> <title>page</title> <script type="text/javascript" src=" </head> <body> <input type="text" placeholder="search" id="searchinput" /> <input type="button" value="search" id="searchbutton" /> Sayfa 2 / 5

Sayfalama için API çağırısında göndereceğiniz start parametresi, arama sonuçlarının başlangıç sırasını belirtiyor. Eğer belirtilmezse geçerli değeri 0 olacaktır. Bundan sonra 8, 16, 24.

3 <ul id="searchresultslist"></ul> </body> </html> HTML tarafında ihtiyacınız olan iki ana parça, arama formu ve sonuçları listeleyeceğiniz bir tablo veya liste. Javascript tarafını jquery kullanarak yazarak HTTP çağrısını, JSON sonucunu işleme, html elemanlarını yönetme gibi birçok kısmı kolayca halledebilirsiniz. İlk yapmamız gereken şey arama formundan arama sorgusunu yakalamak ve arama butonundaki tıklama hareketini yakalamak olacak. Bunun için butonun tıklama olayını yakalayıp text alanının içeriğini alıyoruz. $(function(){ $('#searchbutton').click(function(){ search(); ); ); function search(){ query = $('#searchinput').val(); $('#searchresultslist').html('<li class="loading"><span>aran?yor... ( Google Search)</span></li>'); loadresults(query, 0); Google'un arama APIsini basit bir HTTP isteği ile kullanacağımızı söylemiştim, sonuç bir json nesnesi olduğu için jquery'nin http istek yardımcı methodlarından getjson methodunu kullanarak hem isteği yönetebilir hem de cevabı işleyebiliriz. function loadresults(query, start){ var apiurl = ' v=1.0&callback=?'; $.getjson(apiurl, { q: query + ' site:mfyz.com', Sayfa 3 / 5

İlk yapmamız gereken şey arama formundan arama sorgusunu yakalamak ve arama butonundaki tıklama hareketini yakalamak olacak.

4 rsz: 8, start: start, function(response){ var results = response.responsedata.results; move(); $('#searchresultslist.nextpage, #searchresultslist.loading').re resultshtml = ''; if(results.length){ for(var i=0; i < results.length; i++){ r = results[i]; resultshtml += '<li><a href="' + r.unescapedurl + '"><span class="title">' + r.title + '</span><span class="preview">' + r.content + '</span></a></li>'; if (response.responsedata.cursor.estimatedresultcount > 8) { resultshtml += '<li class="nextpage"><a href="#" ' + 'onclick="loadresults('' + query + '', ' + (start + 8) + ');">Daha fazla sonuç göster</a></li>'; else { //resultshtml = '<li class="notfound">arad???n?z kriterde içerik bu lunamad?.</li>'; $('#searchresultslist').append(resultshtml); ); Yukarıdaki javascript methodu basit bir HTTP çağrısı yapıp gelen json cevabını işliyor. Basitçe bir liste elemanı (ul) içeriği oluşturuyoruz. Gelen sonuç dizisini bir HTML koduna dönüştürüyoruz. Methodun sonunda ise oluşturulan HTML kodunu liste elemanınımıza ekliyoruz. Bu methodda gördüğünüzü ilk parametre, arama formundan gelen arama sorgusu, Sayfa 4 / 5

content + '</span></a></li>'; if (response.responsedata.cursor.

5 Powered by TCPDF ( ikinci parametre ise, sayfalama için Google APIsine gönderilecek olan sonuç başlangıç indeksi. Bu sayede bu fonksiyonu tekrar çağırarak ikinci, üçüncü ve diğer sayfalardaki arama sonuçlarını yükletebiliyoruz. İlk arama yapılırken yani yukarıda ilk verdiğim javascript kodunda çağırılan arama methodu "0" başlangıç parametresi ile çağrılıyor. Bu methodda dikkatinizi çekmiş olan bir nokta da arama parametresin sonuna "site:mfyz.com" eklemiş olmam. Sorguya eklenen bu kısım, yapılan aramanın sonuçlarında sadece o domain'deki sayfaları döndürmesini sağlayacaktır. Yukarıdaki HTML çıktısını CSS ile işleyebilirsiniz veya arama formunu "ara" butonu ile değil eş zamanlı arama gibi her tuşa basıldığında belirli bir zaman aşımı ile girilen kelimeyi yakalayıp arama yapabilirsiniz. Bu yazı adresinden indirilmiştir. Sayfa 5 / 5

İlk arama yapılırken yani yukarıda ilk verdiğim javascript kodunda çağırılan arama methodu "0" başlangıç parametresi ile çağrılıyor.

Benzer belgeler

Facebook connect ile kullanıcı giriş çıkış

Facebook connect ile kullanıcı giriş çıkış 12 Mayıs Salı 09 Diğer Dökümanlar http://mfyz.com/facebook-connect-ile-kullanici-giris-cikis Facebook Connect Nedir? Facebook, uzun süredir api'si dışında connect