Ajax ile tıpkı PHP'de olduğu gibi sayfaları, include tarzında istediğiniz yere açtırabilirsiniz.
Bunun için şu adımları uygulayın.
Sayfayı nerede açtırmak istiyorsunuz? örneğin:
<div id="icerik">Burada ilk yazılar olacak ve sayfa linki tıklandığında bunun yerine açacak</div>
Yukarıda açıkladığım gibi sayfada kendinize hangi sayfanın nerde açılacağını id bilgisi ile tanımlamanız gerekir.
Sadece div ile sınırlı değilsiniz örneğin TABLO Taglarınıda kullanabilirsiniz.
<td id="icerik" width="80%" height="443" valign="top">
Şimdi örnek uygulamamızı yazalım.
Aşağıdaki uygulamada ben örnek üç sayfa hazırladım.
sayfa1.htm
sayfa2.htm
sayfa3.htm
Bunların her birine yazıları yazdım.içinde HTML de olabilir yani görsel olabilir,hazırlayabilirsiniz.
Ajax kodlarında sayfaları çağıran ajaxsayfa() fonksiyonunu linkler için şöyle düzenledim.Bunları daha sonra index.html adlı sayfaya yerleştireceğiz.Yada dilediğiniz bir sayfaya.
<a href="#" onClick="ajaxsayfa('sayfa1.htm', 'icerik');">sayfa1.htm</a><br>
<a href="#" onClick="ajaxsayfa('sayfa2.htm', 'icerik');">sayfa2.htm</a><br>
<a href="#" onClick="ajaxsayfa('sayfa3.htm', 'icerik');">sayfa3.htm</a><br>
Burada ajaxsayfa() fonksyonun içinde iki değer var biri sayfanın adı diğeri sayfanın açılacağı id bilgisi.
Şimdi de index.html sayfasının bütün kodlarını bir arada verelim.
<html><head>
<meta http-equiv="Content-Language" content="tr">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Ajax ile Yeni Site</title>
<script type="text/javascript">
function ajaxsayfa(url, divid){
document.getElementById(divid).innerHTML="Sayfa Yükleniyor..."
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, divid)
}
page_request.open('GET', url, true)
page_request.send(null)
}
function loadpage(page_request, divid){
if (page_request.readyState == 4 && (page_request.status==200 window.location.href.indexOf("http")==-1))
document.getElementById(divid).innerHTML=page_request.responseText
}
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse"
bordercolor="#111111" width="94%" height="518">
<tr>
<td width="22%" height="74"> </td>
<td width="78%" height="74">
<h1>Sitemmiz.com</h1>
</td>
</tr>
<tr>
<td width="16%" height="443" valign="top">
<a href="#" onClick="ajaxsayfa('sayfa1.htm', 'icerik');">sayfa1.htm</a><br>
<a href="#" onClick="ajaxsayfa('sayfa2.htm', 'icerik');">sayfa2.htm</a><br>
<a href="#" onClick="ajaxsayfa('sayfa3.htm', 'icerik');">sayfa3.htm</a><br>
</td>
<td id="icerik" width="80%" height="443" valign="top">
ilk yazılar yani ana sayfa yazıları burada olacak içinde resinde olabilir ,dilediğin gibi bir yazı kaoyabilirsin.
</td>
</tr>
</table>
</body>
</html>
Uygulamamız hazır artık, ajax kullanarak sayfaları istediğiniz bir yerde açtırabilirsiniz. Bu uygulama tabiki basit bir uygulamadır. Örneğin sayfa yükleniyor bilgisi eklenebilir.Özellikle sayfa boyutu büyükse eklemek gerekir. Buna benzer ek bilgileri uygulamayı kullanmak isteyenler geliştirebilirler.
No comments:
Post a Comment