Asp'de Ajax ile Arama

Konu: Asp'de Ajax ile Arama Perş. Ara. 31, 2009 5:46 am

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

sanalkurs.net anlatımıdır

Kod:: <!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

Kod:: <%
'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

Kod:: <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>

<%
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

Kod:: /*
* 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!

[Linkleri görebilmek için üye olun veya giriş yapın.]

SanalKurS.Net Anlatımıdır Teşekkürler