Basit anlamda AJAX javascipt ve XML'in birleşimidir. Browser tabanlı yazılım geliştirmek için birebirdir ve servera her seferinde bir çok istek göndermek yerine sayfayı değiştirmeden yada yeniden yüklemeden tek bir istek göndermeye yarar.
Örneğin kayıt sayfanız varsa kullanıcı formu gönderdiğinde databasee bağlanıp kullanıcı email adresini kontrol edersiniz. Eğer varsa geriye hata mesajı gönderirsiniz ve sayfa tümüyle yeniden yüklenir. Bunun yerine AJAX ile sayfayı yenilemen kullanıcı formu doldururken arka tarafta kontrol işlemini yapıp anında kullanıcıyı bilgilendirebilirsiniz.
Aslında AJAX XML tabanlı kullanılır fakat ben burada en basit olarak AJAX kullanımını göstererek AJAX mantığını anlamanızı sağlayacağım.
JavaScript ile istek gönderebilmek için XMLHttpRequest nesnesini kullanacağız.
var xmlHttp;
var requestType;
var div;
function createXMLHttpRequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest( url, qry, type , div) {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open(type, url, true);
if(type == 'POST') {
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send(qry);
} else {
xmlHttp.send(null);
}
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById(div).innerHTML = xmlHttp.responseText;
}
} else {
document.getElementById(div).innerHTML = 'Kontrol Ediliyor...';
}
}
function checkEmail()
{
qry = '&email=' + document.getElementById("email").value;
startRequest('checkEmail.PHP',qry,'POST','expEmailCheck');
}
Gördüğünüz gibi XMLHttpRequest nesnesini yaratırken ile olarak browserın nesnemizi destekleyip desteklemediğini kontrol ediyoruz ve desteklemıyorsa ActiveX ile oluşturuyoruz.
Şimdi varsayalım kullanıcımız email adresini girdi ve formun diğer bir alanına geçti. Bu geçiş sırasında bir arka planda email kontrolü yapacağız. Bunun için email alanını doldurup diğer bir alana geçtiğinde otomatik javascipt ile fonksiyonumu çalıştıracağız ve sonucu div kutucuğuna yazdıracağız.
<input type="text" name="email" id=email" onBlur="checkEmail();"><div id="expEmailCheck"></div>
Kullanıcı email adresini girip bir sonraki alana geçtiğinde otomatik olarak checkEmail JavaScript fonksiyonu çalışacak ve email alanındaki veriyi alıp checkEmail.PHP sayfasına post edecek. Bizim yapmamız gereken hangi sayfaya hangi verilerin post yada get methodu ile gönderileceğini belirtlemek ve sonucun nereye yazacağını belirtmek.
Gödüğünüz gibi bir de handleStateChange fonksiyonu mevcut. Burda işlem sırasında kullanıcıya kontrol ediliyor yazısını gösteriyoruz. işlem bittiğinde ise PHP sayfamızdan gelen sonucu göstereceğiz. Böylece kontrol işlemi uzun sürerse ekranda işlemin yapıldığına dair kullanıcıyı bilgilendirmiş olacağız.
PHP dosyamızda basit olarak
<?PHP
$email = $_POST['email'];
$db->query("SELECT email FROM users WHERE email = ".$db->check($email)."");
If($db->num_rows()>0)
Echo 'Bu email adresi ile bir kullanıcı mevcut lütfen başka emaıl deneyiniz.';
Else
Echo 'Email onaylandı';
?>
Gördüğünüz gibi gayet basit. Herhangi bir PHP dosyanızı herhangi bir anda sayfayı yenilemeden çalıştırmanız mümkün. Bu AJAX'ın en basit kullanımıdır. İlerki dökümanda XML ile kullanımını anlatacağım.
