AJAX Öneri Kaynak Kodu

AJAX Öneri Örneğinin Kaynak Kodu

Aşağıdaki kaynak kodlar önceki sayfadaki AJAX örneğine aittir.

Kodları kopyalayıp siz de deneyebilirsiniz.

AJAX HTML Sayfası

Bu HTML sayfasıdır. Bu sayfa basit bir HTML formu ve bir JavaScript koduna bağlantı içerir.

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>

<form> 
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">

</form>

<p>Öneriler: <span id="txtHint"></span></p>

</body>
</html>

JavaScript kodu aşağıda gösterilmektedir.

AJAX JavaScript

Bu, "clienthint.js" dosyasındaki JavaScript kodudur:

var xmlHttp

function showHint(str)
{
if (str.length==0)
{ 
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
} 
var url="gethint.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

AJAX Sunucu Sayfası - ASP ve PHP

Ajax sunucusu olarak bir kısıtlama yoktur. AJAX sayfaları herhangi bir internet sunucusu tarafından sunulabilir.

Önceki bölümdeki örnekte JavaScript kodu tarafından çağrılan sunucu sayfası "gethint.asp" adında basit bir ASP dosyasıdır.

Aşağıda biri ASP diğeri PHP ile yazılmış iki sunucu sayfası kodu örneği verilmiştir.

AJAX ASP Örneği

"gethint.asp" sayfasındaki kod bir Internet Information Server (IIS)
sunucusu için VBScript 'de yazılmıştır. Bu sayfa bir isim dizisini
kontrol edip uygun olanları istemciye döndürmektedir:

<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"

'get the q parameter from URL
q=ucase(request.querystring("q"))

'lookup all hints from array if length of q>0
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if

'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then 
response.write("no suggestion")
else
response.write(hint)
end if
%>

AJAX PHP Örneği

Yukarıdaki kodun PHP ile yazılmış hali:

Not: Örneği PHP ile çalıştırmak için, "clienthint.js"
dosyasındaki url değişkeninin değerini "gethint.asp" den "gethint.php"
ye değiştirmeyi unutmayın.

PHP Örneği

<?php
header("Cache-Control: no-cache, must-revalidate");

 // Date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}

//output the response
echo $response;
?>

Eğitim ajax ajax asp örneği ajax html sayfası ajax php örneği

Hancı Eğitim