Öncelikle AJAX’ın bir programlama dili değil bir kısaltma olduğunu belirtmek isterim. Özellikle öğrencilerimden “Hocam AJAX ile uygulama yazdım, şöle şöle sıkıntı yaşıyorum” gibi geri dönüşler alıyorum. AJAX ile kod yazılmaz, uygulamamızda AJAX kullanabiliriz.
AJAX, “Asynchronous JavaScript and XML” kelimelerinin baş harflerinden oluşur. Yani bir programlama dili değil, var olan birden fazla teknolojinin birlikte kullanılmasına verilen genel bir isimdir. Genellikle dinamik bir web sayfasındaki bilgileri güncellerken sayfanın tamamının yenilenmesi yerine sadece belirli bir kısmının güncellenmesi için kullanılır.
Ajax kullanabilmek için HTML ya da XHTML ve JavaScript / DOM bilmek gerekir. Bunun yanına biraz da CSS bilgisi eklerseniz çok etkin web sayfaları tasarlayabilirsiniz.
[box type=”info”] Günümüzde altyapı olarak AJAX kullanan birçok framework vardır. Örneğin yukarıda bahsettiğim teknolojilerin hiçbirini bilmeden JSF kullanarak AJAX altyapısı ile sayfalarınızı geliştirebilirsiniz.[/box]
AJAX, Google’ın arama sonuçlarını önermeye başlaması ile ünlü oldu diyebiliriz. En başta Google olmak üzere (Maps, Gmail vs.), Youtube, Facebook, Yahoo gibi firmalar AJAX’ın gücünü görerek bu teknolojiyi neredeyse her yerde kullanmaya başlamışlardır.
Gmail ya da Yahoo hesabınızla giriş yaptığınızı düşünün. O sırada yeni bir mail aldığınızda sayfanızın sadece gelen kutusu güncellenecek, kalan kısmı olduğu gibi kalacaktır. Facebook’ta arkadaşlarınızla konuşurken, mesaj atarken ya da bir içerik paylaşırken de aynı şey söz konusu olacaktır.
Kısaca güzeldir, kullanılmalıdır.
Peki hiç bilmeyen birisi AJAX’ı JSP sayfasında nasıl kullanacak? Bu yazımda en basit haliyle kullanımını göstereceğim.
AJAX’ın temel taşı XMLHttpRequest nesnesidir. Bu nesnenin günümüzde bütün tarayıcılar tarafından desteklendiğini söyleyebiliriz. Sadece Internet Explorer 5 ve 6 versiyonlarında desteklenmemiş onun yerine ActiveXObject nesnesi kullanılmıştır. Fakat Microsoft hatasını geç de olsa anlayarak XMLHttpRequest nesnesi kullanmaya başlamıştır.
XMLHttpRequest nesnesi arka planda sunucudaki kodla (Servlet sınıflarını düşünebilirsiniz) iletişime geçerek istemci tarafındaki bilgilerin güncellenmesini sağlar. Bunu yaparken de web sayfasının sadece belirli bir kısmınının içeriğinin değişmesine olanak sağlar.
Tarayıcının XMLHttpRequest nesnesini destekleyip desteklemediğini anlamak için aşağıdaki gibi bir kod yazabiliriz.
[codesyntax lang=”javascript” lines=”no”]
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
[/codesyntax]
Sunucuya istek gönderebilmek için XMLHttpRequest nesnesinin open() ve send() isimli iki metodu kullanılır.
open() metodu 3 tane parametre alır. İsteği gönderdiğimiz HTTP metodu, isteği gönderdiğimiz sayfa ya da sınıf ve isteğin asenkron ya da senkron gönderildiğini belirten boolean bir değer.
send() metodu ise isteği göndermek için kullanılır. HTTP metodu olarak POST kullanıldığında ise – metoda parametre olarak – sunucuya gönderilecek değerler verilir.
[box type=”info”] HTTP metodu olarak hangi yöntemin kullanılacağına kendiniz karar vermelisiniz. Aralarındaki fark “GET – POST İstekleri” adlı makalemde ele alınmıştır.[/box]
AJAX’ta GET metodu ile istek göndermek için ;
[codesyntax lang=”javascript” lines=”no”]
xmlhttp.open("GET","servletIsmi",true);
xmlhttp.send();
[/codesyntax]
POST metodu ile istek göndermek için ise ;
[codesyntax lang=”javascript” lines=”no”]
xmlhttp.open("POST","servletIsmi",true);
xmlhttp.send();
[/codesyntax]
kullanılır. Sunucuya parametre göndermek için GET metodunda ;
[codesyntax lang=”javascript” lines=”no”]
xmlhttp.open("GET","servletIsmi?isim=Erkin",true);
xmlhttp.send();
[/codesyntax]
ve POST metodunda,
[codesyntax lang=”javascript” lines=”no”]
xmlhttp.open("POST","servletIsmi",true);
xmlhttp.send("isim=Erkin");
[/codesyntax]
kullanılır.
İsteği yukarıdaki gibi gönderdiğimizde bazen tarayımız parametreleri cashlediği için aynı sonucu alırız. Bunun için isteğin her seferinde farklı bir parametre değeri ile gönderilmesi gerekir. En sağlam rasgele değer üretme yöntemi, o anın tarih saat bilgisini rasgele üretilmiş bir ondalikli sayıyla çarpmaktır. Dolayısıyla parametre gönderirken kodu aşağıdaki gibi yazabilirsiniz.
[codesyntax lang=”javascript” lines=”no”]
xmlhttp.open("GET"," servletIsmi?t=" + (new Date().getTime() * Math.random()),true);
xmlhttp.send();
[/codesyntax]
Gönderilen parametrenin sunucuda ille de kullanılması gerekmez. Biz yukarıdaki kod ile her seferinde farklı bir değer gönderdiğimiz için tarayıcının çerez saklama işinden kurtulmuş oluruz.
open() metodundaki son parametre, isteğin senkron ya da asenkron gönderilmesi ise tamamen yazılımcının insiyatifindedir. Senkron gönderilen isteklerde sunucudan cevap dönmesi beklenir. Ancak genellikle sunucuda veri tabanına bağlanarak dönen değerleri sayfada göstermek gibi zaman alan işler yapılır. Bu yüzden son parametre genellikle true verilir ki JSP sayfamızdaki JavaScript kodu sunucu işini yaparken çalışmaya devam etsin.
Peki sayfamızdaki kod çalışırken sunucudan cevap döndüğünü nasıl anlayacağız? Bunun için onreadystatechange adında bir event vardır. Hazır olma durumu her değiştiğinde bu event tetiklenir. Toplamda 5 farklı durumu vardır.
0: istek yaratılmadı
1: sunucu bağlantısı kuruldu
2: istek alındı
3: istek işletiliyor
4: istek işi bitti ve cevap hazır halde
Cevabın geldiğini bu durumları kontrol ederek anlayabiliriz. Örneğin,
[codesyntax lang=”javascript” lines=”no”]
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("bilesenId").innerHTML=xmlhttp.responseText;
}
}
[/codesyntax]
Yukarıdaki kodda readyState 4 ise yani cevap hazır ise ve status 200 ise yani sayfa bulunmuş ve bir sıkıntı yoksa sayfamızdaki bilesenId id’li bileşen değerini sunucudan gelen değerle güncelle demiş olduk.
[box type=”info”] status sadece 200 ve 404 değerlerini alır. 200 bir sıkıntı olmadığını, 404 ise sayfanın bulunamadığını belirtir.[/box]
Şimdi basit bir uygulama yazalım. JSP sayfamızda bir tane buton olsun. Tıkladığımızda sayfanın tamamı yenilenmeden alt kısıma sunucudan aldığımız text içeriği yazdıralım.
JSP Sayfası :
[codesyntax lang=”asp” lines=”no”]
<%@ page language="java" contentType="text/html; charset=ISO-8859-9" pageEncoding="ISO-8859-9"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function ajaxMetodu() {
var xmlhttp;
if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("bilesenId").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","sunucudakiSinif",true);
xmlhttp.send();
}
</script>
</head>
<body>
<input type="button" value="AJAX ile bilgi getir" onclick="ajaxMetodu()"/>
<div id="bilesenId"></div>
</body>
</html>
[/codesyntax]
Servlet :
[codesyntax lang=”java” lines=”no”]
package servlets;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/sunucudakiSinif")
public class AjaxDeneme extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
out.println("Sunucudan gelen icerik !!!");
}
}
[/codesyntax]
Dikkat ederseniz butona tıkladığımızda istek sunucudan dönecek ve tarayıcı sayfanın tamamını yenilemeyecektir. Sayfanın görüntüsü de aşağıdaki gibi olacaktır.
AJAX kullandığımızda sunucudan dönen verilerin tipi text tabanlıdır. Yani veriler String ya da XML olarak gelir. Fakat kullanılan Jackson, Google GSon, JSON.simple gibi 3. parti AJAX kütüphaneleri sayesinde nesneleri de web sayfalarımızda rahatça kullanabilmekteyiz.
javauzmani 