Asp'de Ajax ile Arama

Evet arkadaşlar bu dersimizde ajax ile arama sistemi yapmayı örneceksiniz!

Evet arkadaşlar bu dersimizde daha asp'de ajax ile arama yapma tekniğini örneceğiz.İlk önce tasarım sayfamızı yapalım.Sonra arama yapacağımız sayfa
ve baglanti sayfamız artık kodlamaya geçelim seslerini duyar gibiyim sizleri daha fazla sabırsızlatmadan başlıyorum.
Default.asp


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//tr"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr" lang="tr">

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

        <title>RIZA soylu Ajax Arama Uygulaması</title>

        <link rel="stylesheet" type="text/css" href="css/style.css" />

        <script type="text/javascript" src="http://www.google.com/jsapi"></script>

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

    </head>

<body>



        <table border="0" align="left" width="400">

    <tr>

<td width="50"><font face="Segoe UI" size="2" color="#F4F4F4"><b>



     

         ARA:</b></font></td>

<td>

          <input type="text" size="20" value="" name="uara" id="uara" onkeyup="lookup(this.value);"/>

            </td>

        </tr>

<tr>

<td></td>



        <td id="sonuc"><form id="searchfrom"></form></td>

    



</tr>



</table>



</body>

</html>


Evet arkadaşlar en başta java dosyamızı çağırdık.Evet asıl bomba bu dosya içinde ajax kodlamız bu dosya içinde arkadaşlar sakın karıştırmayalım ajax bir kodlama dili değildir.Xml ve JavaScrpit'in beraber kullanılmasıyla oluşan bir teknik!Bir input oluşturduk bunun id'sini ve adını uara yaptık burda id'si çok önemli çünkü aramamız inputun adına id'sine ve değerine göre yapılıyor.
Evet onkeyup="lookup(this.value);" ile ajaxımızı inputumuza tetikledik.
Şİmdi ise sonucumuzu yazdıracağımız sutunumuzu ve onun içine bu sonuçları görüntüleyecek bir form ekledim ben sutunumuzun id'sini sonuc yaptım.Form id'mizide searchform yaptım sizin istediğinize bağlı dilediğiniz adı yazabilirsiniz.Fakat bu değişiklikleri java dosyamızdada yapmanız gerekmektedir.Aksi Takdirde Arama Çalışmaz.Neyse Fazla Uzatmadan baglanti
sayfamızdanda Bahsedelim.
inc.asp

<%

'RIZA SOYLU AJAX ARAMA SİSTEMİ

FİLMMOLASİ.COM'DA EN GÜNCEL VE EN GÜZEL FİLMLER

BURDA

%>

<% 

Set kon = CreateObject("ADODB.Connection")

Set rs = server. CreateObject("ADODB.Recordset") 

kon.Open ("DRIVER={Microsoft Access Driver (*.mdb)};DBQ="& Server.MapPath("data.mdb")) 

Session.LCID = 1055

%>


Daha Sonrada Arama işleminin Yapılacağı Sayfamıza
search.asp

<style type="text/css">



#arama a       {  font-family: Segoe UI; font-size: 11px; color: #000000; font-weight: bold; text-decoration:none;}



#arama a:hover { font-family: Segoe UI; font-size: 11px; color: #FF0000; font-weight: bold; text-decoration:none;}



</style>

<style type="text/css">



#arama a       {  font-family: Segoe UI; font-size: 11px; color: #000000; font-weight: bold; text-decoration:none;}



#arama a:hover { font-family: Segoe UI; font-size: 11px; color: #FF0000; font-weight: bold; text-decoration:none;}



</style>

<!--#include file="inc.asp" -->

<% 

    Function TR(strGelen)

        TR = Replace(strGelen, "İ", "i")

        TR = Replace(TR, "ı", "i")

        TR = Replace(TR, "ç", "c")

        TR = Replace(TR, "Ç", "C")

        TR = Replace(TR, "ş", "s")

        TR = Replace(TR, "Ş", "S")

        TR = Replace(TR, "ü", "u")

        TR = Replace(TR, "Ü", "U")

        TR = Replace(TR, "ğ", "g")

        TR = Replace(TR, "Ð", "G")

        TR = Replace(TR, "ö", "o")

        TR = Replace(TR, "Ö", "O")

                

    End Function

Set rs=Server.CreateObject("Adodb.Recordset")

sql="select Top 6 * from kelimeler where kelime like '%"&request("queryString")&"%' order by filmbaslik asc"

Rs.Open sql, baglanti, 1, 3

%>

<table cellpadding="0" border="1" bgcolor="#ffffff" style="border:1px; border-color:#000000;"cellspacing="0" width="100%">

<% Do While not rs.eof %>

<tr>

<td  id="arama" onMouseOver="this.bgColor='#990000';" onMouseOut="this.bgColor='#F4F4F4';"><a href="detay.asp?ID=<%=rs("id")%>&No=<%=rs("id")%>">

<font size="2" color="#000000"><b><%=TR(rs("kelime"))%></b></font></a></td>

<td  id="arama" width="20" onMouseOver="this.bgColor='#990000';" onMouseOut="this.bgColor='#F4F4F4';"><a href="detay.asp?ID=<%=rs("id")%>&No=<%=rs("id")%>"><b>Hit:<%=rs("filmhit")%></b></a></td>

</tr>

<% 

rs.movenext

loop

%>

</table>


Evet bağlandı sayfamızıda halleddik Şimdi sıra asıl işlemde java dosyamızda yani ajax kodlarımızı içeren dosyamızda.
js.jsp

/*

* Author:      Marco Kuiper (http://www.marcofolio.net/)

*/

google.load("jquery", "1.3.1");

google.setOnLoadCallback(function()

{

    // Safely inject CSS3 and give the search results a shadow

    var cssObj = { 'box-shadow' : '#888 5px 10px 10px', // Added when CSS3 is standard

        '-webkit-box-shadow' : '#888 5px 10px 10px', // Safari

        '-moz-box-shadow' : '#888 5px 10px 10px'}; // Firefox 3.5+

    $("#sonuc").css(cssObj);

    

    // Fade out the suggestions box when not active

     $("input").blur(function(){

         $('#sonuc').fadeOut();

     });

});



function lookup(inputString) {

    if(inputString.length == 0) {

        $('#sonuc').fadeOut(); // Hide the suggestions box

    } else {

        $.post("search.asp", {queryString: ""+inputString+""}, function(data) { // Do an AJAX call

            $('#sonuc').fadeIn(); // Show the suggestions box

            $('#sonuc').html(data); // Fill the suggestions box

        });

    }

}


Evet arkadaşlar bu dosyaları Kullanmak istiyorsanız.Kaynak Dosyamızı Upload Ettim Ordan İndirip KullanaBilirsiniz!

  • Etiketler;
Rıza Soylu
Ankara'da dünyaya geldi. 2008 yılında tanıştığı web geliştiricisi bir arkadaşı vasıtasıyla kendisini geliştirirek HTML, ASP, ASP.net, jQuery, Javascript, CSS ve ActionScript öğrenmeye başladı. <p>2009 yılından bu yana önemli projelerde yer alan Rıza Soylu, bilgisini Sanalkurs'ta paylaşıyor ve çalışmalarını geliştirmeye devam ediyor.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Merhaba hocam siz bu scriptin çalıştığına emin misiniz?
Eminim kardeşim denenerek ders eklenmiştir!
merhaba, açılır kutu ile tablo adını seçerek sorgulama yapıyorum veritabanında var olan tabloyu sorguluyor fakat seçmiş olduğum tablo veritabanına yüklenmemiş ise tablo olmadığı için hata veriyor, sorgulamada tablo yok ise hata mesajı vermek istiyorum bu mümkünmüdür.

Yukarı Git