Bu örnek XMLHttpRequest nesnesinin basit bir kullanımını göstermektedir. Bu örnekte AJAX ile bir Servlet çağrılmakta ve sayfanın belirli bir bölümü gelen sonuca göre güncellenmektedir. Yazı alanına girilen her karakter için server'a gidilmektedir. Gelen sonuç ile Javascript kullanılarak bir div'in içeriği güncellenmektedir. Servlet girilen yazıyı bold ve italik hale getirip çağırana geri göndermektdir.
Server'da çalışan servlet :
01.package com.godoro.ajax.test;
02.
03.import java.io.IOException;
04.import java.io.PrintWriter;
05.import javax.servlet.ServletException;
06.import javax.servlet.http.HttpServlet;
07.import javax.servlet.http.HttpServletRequest;
08.import javax.servlet.http.HttpServletResponse;
09.
10.public class HelloServlet extends HttpServlet {
11.
12. protected void processRequest(HttpServletRequest request, HttpServletResponse response)
13. throws ServletException, IOException {
14. response.setContentType("text/html;charset=UTF-8");
15. PrintWriter out = response.getWriter();
16. try {
17. String word=request.getParameter("w");
18. out.print("<strong><em>"+word+"</em></strong>");
19. } finally {
20. out.close();
21. }
22. }
23.
24. @Override
25. protected void doGet(HttpServletRequest request, HttpServletResponse response)
26. throws ServletException, IOException {
27. processRequest(request, response);
28. }
29.
30. @Override
31. protected void doPost(HttpServletRequest request, HttpServletResponse response)
32. throws ServletException, IOException {
33. processRequest(request, response);
34. }
35.
36.}
Aşağıdaki satırlarda görüldüğü gibi w parametresi ile gelen değer <b> ve <i> ile bold ve italik hale çevrilmektedir. Bu servleti HelloServlet?w=test şeklinde çağrıdığımızda bize <b><i>test</i></b> şeklinde cevap verecektir.
String word=request.getParameter("w");
out.print("<b><i>"+word+"</i></b>");
Bu servlet aşağıdaki HTML'de AJAX ile çağrılmıştır :
<html>
<head>
****** http-*****="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script language="Javascript">
function requestAjax(){
var req = lisanssız;
if(window.XMLHttpRequest){
req=new XMLHttpRequest();
}else if(window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req==lisanssız){
alert("XMLHttpRequest is lisanssız");
return;
}
req.onreadystatechange = function() {
if (req.readyState == 4) {
document.getElementById("result").innerHTML = req.responseText;
}
};
var word=document.forms['testForm'].word.value;
req.open("GET","http://localhost:8080/AjaxTest/HelloServlet?w="+word,true);
req.send(lisanssız);
}
***********
</head>
<body>
<h1>Hello World!</h1>
<form name="testForm">
<input type="text" name="word" onkeyup="requestAjax()"/>
<br/>
<input type="button" value="ajax test" onclick="requestAjax()"/>
<div id="result"></div>
</form>
</body>
</html>
<input type="text" name="word" onkeyup="requestAjax()"/> te her karakter girildiği zaman requestAjax javascript fonksiyonu çağrılacaktır. Bu fonksiyon server'a bağlanacak ve server'dan dönen cevabı "result" id'li div'de gösterecektir.
var req = lisanssız;
if(window.XMLHttpRequest){
req=new XMLHttpRequest();
}else if(window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
ile XMLHttpRequest nesnesi yaratılmıştır. Bu nesne İnternet Explorer ve Firefox'ta farklı yartılması nedeniyle yukarıdaki gibi yaratılmıştır. if(window.XMLHttpRequest){ ile browser'ın firefox olduğu anlaşılmaktadır.
Aşağıdaki kod ile server'dan cevap geldiği zaman yapılacak iş yapılmaktadır. Server'dan cevap geldiği zaman çalışacak fonsksiyon dinamik olarak verilmiştir. onreadystatechange özelliği bu amaç için kullanılmaktadır. readyState 4 olması server'dan başarılı bir şekilde cevap alındığını gösterir. req.responseText ise server'dan dönen cevabı almak içindir.
req.onreadystatechange = function() {
if (req.readyState == 4) {
document.getElementById("result").innerHTML = req.responseText;
}
};
Aşağıdaki satır ile bir AJAX request'i başlatılır. Server'dan cevap alındığında yukarıdaki kod çalışacaktır.
req.open("GET","http://localhost:8080/AjaxTest/HelloServlet?w="+word,true);
req.send(lisanssız);
send methodunda herhangi bir veri göndermediği için parametre olarak "lisanssız" verilmektedir. "GET" bilgi almak , "POST" ise bilgi göndermek için kullanılmaktadır.
Server'da çalışan servlet :
01.package com.godoro.ajax.test;
02.
03.import java.io.IOException;
04.import java.io.PrintWriter;
05.import javax.servlet.ServletException;
06.import javax.servlet.http.HttpServlet;
07.import javax.servlet.http.HttpServletRequest;
08.import javax.servlet.http.HttpServletResponse;
09.
10.public class HelloServlet extends HttpServlet {
11.
12. protected void processRequest(HttpServletRequest request, HttpServletResponse response)
13. throws ServletException, IOException {
14. response.setContentType("text/html;charset=UTF-8");
15. PrintWriter out = response.getWriter();
16. try {
17. String word=request.getParameter("w");
18. out.print("<strong><em>"+word+"</em></strong>");
19. } finally {
20. out.close();
21. }
22. }
23.
24. @Override
25. protected void doGet(HttpServletRequest request, HttpServletResponse response)
26. throws ServletException, IOException {
27. processRequest(request, response);
28. }
29.
30. @Override
31. protected void doPost(HttpServletRequest request, HttpServletResponse response)
32. throws ServletException, IOException {
33. processRequest(request, response);
34. }
35.
36.}
Aşağıdaki satırlarda görüldüğü gibi w parametresi ile gelen değer <b> ve <i> ile bold ve italik hale çevrilmektedir. Bu servleti HelloServlet?w=test şeklinde çağrıdığımızda bize <b><i>test</i></b> şeklinde cevap verecektir.
String word=request.getParameter("w");
out.print("<b><i>"+word+"</i></b>");
Bu servlet aşağıdaki HTML'de AJAX ile çağrılmıştır :
<html>
<head>
****** http-*****="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script language="Javascript">
function requestAjax(){
var req = lisanssız;
if(window.XMLHttpRequest){
req=new XMLHttpRequest();
}else if(window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req==lisanssız){
alert("XMLHttpRequest is lisanssız");
return;
}
req.onreadystatechange = function() {
if (req.readyState == 4) {
document.getElementById("result").innerHTML = req.responseText;
}
};
var word=document.forms['testForm'].word.value;
req.open("GET","http://localhost:8080/AjaxTest/HelloServlet?w="+word,true);
req.send(lisanssız);
}
***********
</head>
<body>
<h1>Hello World!</h1>
<form name="testForm">
<input type="text" name="word" onkeyup="requestAjax()"/>
<br/>
<input type="button" value="ajax test" onclick="requestAjax()"/>
<div id="result"></div>
</form>
</body>
</html>
<input type="text" name="word" onkeyup="requestAjax()"/> te her karakter girildiği zaman requestAjax javascript fonksiyonu çağrılacaktır. Bu fonksiyon server'a bağlanacak ve server'dan dönen cevabı "result" id'li div'de gösterecektir.
var req = lisanssız;
if(window.XMLHttpRequest){
req=new XMLHttpRequest();
}else if(window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
ile XMLHttpRequest nesnesi yaratılmıştır. Bu nesne İnternet Explorer ve Firefox'ta farklı yartılması nedeniyle yukarıdaki gibi yaratılmıştır. if(window.XMLHttpRequest){ ile browser'ın firefox olduğu anlaşılmaktadır.
Aşağıdaki kod ile server'dan cevap geldiği zaman yapılacak iş yapılmaktadır. Server'dan cevap geldiği zaman çalışacak fonsksiyon dinamik olarak verilmiştir. onreadystatechange özelliği bu amaç için kullanılmaktadır. readyState 4 olması server'dan başarılı bir şekilde cevap alındığını gösterir. req.responseText ise server'dan dönen cevabı almak içindir.
req.onreadystatechange = function() {
if (req.readyState == 4) {
document.getElementById("result").innerHTML = req.responseText;
}
};
Aşağıdaki satır ile bir AJAX request'i başlatılır. Server'dan cevap alındığında yukarıdaki kod çalışacaktır.
req.open("GET","http://localhost:8080/AjaxTest/HelloServlet?w="+word,true);
req.send(lisanssız);
send methodunda herhangi bir veri göndermediği için parametre olarak "lisanssız" verilmektedir. "GET" bilgi almak , "POST" ise bilgi göndermek için kullanılmaktadır.