Ajax
Java ile Ajax nasıl yazılır?
AJAX deyince aklınıza ne geliyor bilmiyorum ama benim ne kadar nerd olmama rağmen futbol takımı geliyor. Ha hazır futbol demişken burdan hemen Jasfid ve Vinnie kardeşlerime yerleştireyim :) Doomdeath 2 - Geri kalan manyaklar 0 :) AJAX deyince o kadar ok kafam karışıyordu ki. Size öyle bir döküman yazdım ki oha bu muymuş bu kadar kolay mı? diyeceksiniz. Haydi başlayalım.
AJAX nedir? - Asynchronous JavaScript Technology and XML
Ne işe yarar - çok işe yarar ama en belirgin bugün de özelliğini yapacağımız uygulama olarak sayfayı tamamen yenilemeden belli bir kısım veriyi serverdan alarak sayfayı değiştirmeye yarar.
Şimdi bunları not edelim mantık bundan ibarettir.
1. Istemcide bir olay olur.(HAREKET YAPMA)
2. XMLHttpRequest objesi oluşturulur.
3. XMLHttpRequest objesi bir çağrım yapar.
4. Istem bir servlet tarafından karşılanır.
5. Servlet bir XML dökümanı ieren sonucu geri dner.
6. XMLHttpRequest objesi callback() fonksiyonunu cağırr.
7. HTML DOM yenilenir. (KRALINI GöRüRSüN)
Ben buna hareket yapma kralını görürsün diyorum ki çok akılda kalıcı .)
Evet Şimdi ne yapıcağız. Bir tane jsp bir tane servlet oluşturalım. index.jsp
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>JSP Page</title>
<script language=”JavaScript”>
var req; //request değişkeni tanımlandı.
function validate() {
var idField = document.getElementById(”userid”); /userid attribute alındı.
var url = “validate?id=” + encodeURIComponent(idField.value); //url validate?id=xxx şekline geldi
if (typeof XMLHttpRequest != “undefined”) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject(”Microsoft.XMLHTTP”);
}
req.open(”GET”, url, true); //url yani servlet get methodu yapılıyor
req.onreadystatechange = callback; // donus olduğunda callback fonksiyonu çağrılıyor
req.send(null);
}
function callback() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = req.responseXML.getElementsByTagName(”message”)[0]; //dönen xml den veri alındı
setMessage(message.childNodes[0].nodeValue); // alınan veri bu methoda yollanıp HTML DOM updatelendi
}
}
}
function setMessage(message) {
var mdiv = document.getElementById(”userIdMessage”); //önceden ayarlanan div alındı.
if (message == “invalid”) {
mdiv.innerHTML = “<div style=\”color:red\”>Invalid User Id</ div>”;
} else {
mdiv.innerHTML = “<div style=\”color:green\”>Valid User Id</ div>”;
}
}
</script>
</head>
<body>
test yapalım.
<input type=”text” size=”20″ id=”userid” name=”id” onkeyup=”validate();”>
<div id=”userIdMessage”></div> //HTML DOM iin updatelencek kısım önceden burda bulunduruldu.
</body>
</html>
servlet
/*
* Validate.java
*
* Created on March 5, 2007, 1:32 PM
*/
import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
/**
*
* @author doomy
* @version
*/
public class Validate extends HttpServlet {
private ServletContext context;
private java.util.HashMap users = new java.util.HashMap();
public void init(ServletConfig config) throws ServletException {
super.init(config);
this.context = config.getServletContext();
users.put(”greg”,”account data”);
users.put(”duke”,”account data”);
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String targetId = request.getParameter(”id”);
if ((targetId != null) && !users.containsKey(targetId.trim())) { // (greg or duke) değil ise
response.setContentType(”text/xml”);
response.setHeader(”Cache-Control”, “no-cache”);
response.getWriter().write(”<message>valid</message>”);
} else {
response.setContentType(”text/xml”);
response.setHeader(”Cache-Control”, “no-cache”);
response.getWriter().write(”<message>invalid</message>”);
}
}
}
Şimdi anlatalım. textbox ın onkeyup actionı gerekleştiğinde validate fonksiyonunu çağırır. Bu fonksiyon userid parametreli kısımm yani textboxın değerini alır validate servletine gönderir. Burdan sonuc XML olarak geri gönderilir. Bu işlem gerçekleşince ise callback fonksiyonu çağrılır.
Callback fonksiyonu ise gelen XML dkmanının message tagli elemanın değerini alır. setMessage fonskiyonuna gönderir. Bu fonksiyon ise HTTP DOM ile sayfayı updateler. Bu updatelenme sırasında tüm sayfa updatelenmez sadece ilgili div updatelenir.
Social Bookmarking
Powered by FireStats
September 25th, 2007 at 7:24
Oha, bu muymuş?
Bu kadar kolay mı?
September 25th, 2007 at 7:27
teknik olarak mantık bundan ibaret. Evet “Manyak” di mi :)
April 15th, 2008 at 15:47
guzel anlatim tesekkurler ama ben calistirdigimda sadece invalid yaziyor input kutusu dahi yok
targetId null gorunuyor
July 10th, 2008 at 21:28
http://java.manyaklari.org/2008/07/zk-ajax-and-mobile-framework.jsp
bence buna bakın :)
May 7th, 2009 at 17:09
bu siteyi yeni gordum bu yazi da cok isime yariycak.
ben de diyordum bi ben miyim java diye tutturan. demek manyaklık derecesinde javacı olan baskaları da varmıs :)