Anasayfa > Kodlar, Kodlar > ASP’de Ajax ile arama

ASP’de Ajax ile arama

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
		});
	}
}
Kategoriler:Kodlar, Kodlar
  1. Henüz yorum yapılmamış.
  1. No trackbacks yet.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: