AJAX üzerine internette bulunmayacak şey yok gibi. Her teknik blogdan bir yazı fışkırıyor, tüm üst düzey web siteleri illa ki bir bölümlerinde bu eski teknolojiden faydalanıyor. İşin teorik kısımlarını bu işin profesyonellerine bırakıp, pratikler ile AJAX` ı örneklemenin zamanı geldi. Internette bulduğum kaynakların çoğu, konuyu PHP ile anlatmış, eski dost ASP` yi biraz arka plana atmış olduğu için belki Türkçe kaynak sıkıntısı olabilir. Üç bölüm halinde yazmayı planladığım yazılarda AJAX` ı nasıl ASP ile kullanabileceğimizi, kendi karşılaştığım problemleri ve bunların çözümlerini sıralamaya çalışacağım.
AJAX ile ilgili bir şeyler yapmak için ilk önce bilinmesi ve anlaşılması gerekenin
Javascript ve DOM olduğu konusunda sanırım hemfikiriz. Bu yüzden ilk yazıda sadece Javascript ile bir hazırlık kodu ve fonksiyonu yazacağız, kodlarımızı nasıl kısaltabileceğimiz konusunda kafamızı yoracağız. Yazıda mümkün olduğu kadar Türkçe kullanmaya çalışacağım ama malum, bizim icat ettiğimiz bir şey olmadığı için çoğu ismi orjinal ve en bilinen hali ile kullanmak durumundayım. Örneğin property yerine özellik, object yerine nesne, method yerine metod kullanabilirken maalesef document object model yerine belge nesne modeli demeyeceğim. Script yerine betik kullanırken, genel kabul görmüş textbox yerine yazı kutusu ya da event handler yerine olay yakalayıcısı demeyeceğim. Neyse; başlayalım bakalım!
JS(javascript) ile DOM(Document Object Model) arasındaki iletişim aslında oldukça basit. HTML sayfasındaki her eleman bir nesne olarak değerlendiriliyor. Her nesnenin de belirli metodları, özellikleri ya da tanımlı durumlar karşısında çalışan olayları(event) var. Bunların ayrıntılarına, neyin nasıl olduğuna girmeyeceğim. Sadece hatırlamak ve üzerinde çalışacağımız örneğin temelini oluşturmak amacıyla şunu yazayım. Üstünde bir bilgi giriş formu olan bir web sayfasının yaklaşık görüntüsü şu şekildedir:
<?xml version="1.0" encoding="iso-8859-9" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="tr" xml:lang="tr">
<head>
<meta http-equiv=`content-language` content=`TR`>
<meta http-equiv=`content-type` content=`text/html; charset=windows-1254`>
<meta http-equiv=`content-type` content=`text/html; charset=iso-8859-9`>
</head>
<body>
<form name="frmMain" id="frmMain" method="post">
<label for="txtName">Adı:</label>
<input type="text" name="txtName" id="txtName" /><br />
<label for="txtSurName">Soyadı:</label>
<input type="text" name="txtSurName" id="txtSurName" /><br />
<input type="button" name="btnSend" id="btnSend" value="Gönder" onClick="s();"/>
</form>
<script language="javascript">
<!--
function s(){
alert("Elveda uzay, elveda feza...");
}
//-->
</SCRIPT>
</body>
</html>
Buradaki butonda bulunan "
s();" fonksiyonu ekrana sadece bir uyarı verecek ve işini bitirecektir. En çok yapılan işlemlerden olan formun değerlerinin doğrulanması ve daha sonra sunucuya bu bilgileri gönderme ile ilgili şöyle bir değişiklik yapılabilir. Diyelim ki ad ve soyad girilmezse kullanıcıya uyarı vermek isteyelim. Bu durumda fonksiyonumuzu şöyle değiştirmemiz gerekir:
<script language="javascript">
<!--
function s(){
if ((document.getElementById("txtName").value=="") ||
(document.getElementById("txtSurName").value==""){
alert("Ad ve soyad doldurulmalıdır.");
}
}
//-->
</script>
Web sitesi yaparken bir amacımız da "istemciye mümkün olduğu kadar az byte göndermek" olacağı için, istemci bazlı kodlamalarda en kısa kodları kullanmamız gerekiyor. Örneğimizde "
document.getElementById("txtName").value" satırı sayfadaki bir nesnenin değerine ulaşmamızı sağlıyor. Peki biz bunu kısaltabilir miyiz? Belki de şöyle:
<script language="javascript">
<!--
function $(o){
return document.getElementById("txtName");
}
function s(){
if (($("txtName").value=="") ||
($("txtSurName").value==""){
alert("Ad ve soyad doldurulmalıdır.");
}
}
//-->
</script>
Burada yaptığımız tek şey dokümandaki bir elemanı nesne olarak döndüren bir fonksiyon yazmak ve kendi kodumuzda da bu fonksiyonu çağırmak. İlk etapta bu kadar kısa bir şey için fazladan bir fonksiyon yazmak garip gelebilir. Ama bu fonksiyonları ilerde kullanacağımız bir kütüphanede saklayacağımızı düşünürsek ve aynı sayfada iki değil de elli defa "
document.getElementById("")" yapacağımızı düşünürsek kârda olduğumuz anlaşılacaktır. Kodu kısaltma konusunda bu örnekte iki şey yapmış oluyoruz. İlk yaptığımız butonun onClick fonksiyonda ismi tek karakter vermek, diğeri de son yazdığımız fonksiyonu ilgili yerlerde kullanmak. Burada verdiğim kodun farklı bir uygulamasını mükemmel denilebilecek bir "JS framework" olan
ProtoType` da görmüştüm. Devam yazılarında biz de buna benzer bir kütüphane oluşturacağız. Bir sonraki yazıda ASP neyi nasıl çalıştırır konusuna bakmaya çalışacağız...
JS ile ilgili şu kaynaklara da bir göz atmakta fayda var;
http://developer.mozilla.org/en/docs/JavaScript
http://jszen.blogspot.com/
http://developer.yahoo.com/javascript/
http://www.w3schools.com/js/
ECMAScript standartı (PDF)
Kelimeler: Açık Kaynak,
AJAX,
ASP,
CSS,
Firefox,
GNU,
IIS,
Internet Explorer,
Javascript,
Microsoft,
Mozilla,
Netscape,
Open Source,
Site dizayn,
W3C,
Web sitesi,
XHTML
« AJAX üzerine...
|
ASP Uzantisi »