RESTful AJAX Kullanımı

3 Mart 2018 Yorum yap

Ajax , “Asynchronous JavaScript and XML” anlamına gelen birden dil ile uyumlu çalışan bir tekniktir.Ajax sayesinde bütün sayfası yükletmeden arka planda işlemlerimizi yapabiliriz.Sunucuya veri gönderme ekrana dinamik olarak veriler getirmek için kullanabiliriz.Bu yazımda üye giriş ekranı yapacağız ve üye girişini arkaplanda ajax sayesinde web servis üzerinde dinamik olarak kontrol edeceğiz.Proje üzerinden anlatmaya çalışalım.
1)Maven projesi oluşturalım ve kullanacağımız bağımlılıklarımızı pom.xml dosyamız içerisine ekleyelim.

[code lang=”xml”]
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>0006-com.enesbyc-RESTful-AJAX</groupId>
<artifactId>0006-com.enesbyc-RESTful-AJAX</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<properties>
<resteasy-version>3.0.4.Final</resteasy-version>
</properties>

<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>

<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>

<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>

<dependency>
<groupId>net.sf.scannotation</groupId>
<artifactId>scannotation</artifactId>
<version>1.0.2</version>
</dependency>

<dependency>
<groupId>org.jboss.resteasy</groupId>
<artifactId>resteasy-jaxrs</artifactId>
<version>${resteasy-version}</version>
</dependency>

<dependency>
<groupId>org.jboss.resteasy</groupId>
<artifactId>resteasy-jettison-provider</artifactId>
<version>${resteasy-version}</version>
</dependency>

<dependency>
<groupId>org.jboss.resteasy</groupId>
<artifactId>jaxrs-api</artifactId>
<version>${resteasy-version}</version>
</dependency>

<dependency>
<groupId>org.jboss.resteasy</groupId>
<artifactId>resteasy-jsapi</artifactId>
<version>${resteasy-version}</version>
</dependency>

</dependencies>
<build>
<sourceDirectory>src</sourceDirectory>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.5.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.0.0</version>
<configuration>
<warSourceDirectory>WebContent</warSourceDirectory>
</configuration>
</plugin>
</plugins>
</build>
</project>
[/code]

2)İkinci adımda web.xml dosyamız içerisine Resteasy kullandığımızı belirtmemiz gerekiyor.Web.xml dosyamız içerisini düzenleyelim.Ayrıca ajax kullanacağımızı belirtmemiz gerekiyor.Url mapping kısmında ise jsp sayfamız içerisinden ajax içerisine hangi url ile ulaşacağımızı belirtiyoruz.

[code lang=”xml”]
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>0006-com.enesbyc-RESTful-AJAX</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<!– Resteasy kullanimi icin gerekli –>
<context-param>
<param-name>resteasy.scan</param-name>
<param-value>true</param-value>
</context-param>

<context-param>
<param-name>resteasy.servlet.mapping.prefix</param-name>
<param-value>/rest</param-value>
</context-param>

<listener>
<listener-class>org.jboss.resteasy.plugins.server.servlet.ResteasyBootstrap</listener-class>
</listener>

<servlet>
<servlet-name>resteasy-servlet</servlet-name>
<servlet-class>org.jboss.resteasy.plugins.server.servlet.HttpServletDispatcher</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>resteasy-servlet</servlet-name>
<url-pattern>/rest/*</url-pattern>
</servlet-mapping>

<!– JavaScript-AJAX kullanimi icin gerekli –>
<servlet>
<servlet-name>resteasy-jsapi</servlet-name>
<servlet-class>org.jboss.resteasy.jsapi.JSAPIServlet</servlet-class>
</servlet>
<!– AJAX ile baglanti kuracagimiz url’i yaziyoruz Daha sonra bu url’i jsp sayfamiz icerisinde kullanacagiz–>
<servlet-mapping>
<servlet-name>resteasy-jsapi</servlet-name>
<url-pattern>/rest-js</url-pattern>
</servlet-mapping>

</web-app>
[/code]

3)Projemize sağ tıklayıp File -> New -> Other -> JSP File oluşturalım.JSP sayfamız içerisinde Form oluşturalım.Bu form içerisinde butonun onclick metodu ile JavaScript kodumuzu çalıştıralım.Buton post işlemi yaptığında script kodumuz içerisindeki checkLogin() metodumuz çalışacaktır.Bu metod servis ile bağlantı kurup değerleri kontrol edecektir.

[code lang=”javascript”]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!– Web.xml icerisindeki javascript url ile iletisim halinde olacagini belirtiyoruz–>
<script lang="javascript" src="./rest-js"></script>

<script>
function checkLogin() {

//Form icerisindeki username ve password id’lerine sahip degerleri aliyoruz.
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
//Alinan degerler WebService sinifina gonderiliyor.
var response = UserService.checkLogin({username : username,password : password});
//Servis uzerinden gelen cevap alert olarak karsimiza cikiyor
alert(response);

}
</script>

<title>enesbyc.com AJAX</title>
</head>
<body>
<h1>enesbyc.com AJAX</h1>
<form action="rest/user/check" method="post">
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username" id="username" value=""></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" value=""></td>
</tr>

<tr>
<td></td>
<td>
<input type="button" value="button onclick" onclick="checkLogin()">
</td>
</tr>
</table>

</form>

</body>
</html>
[/code]

4)com.enesbyc paketimizi oluşturalım ve içerisine UserService isimli sınıfımızı oluşturalım.Service sınıfımız içerisinde QueryParam anotasyonu ile script kodundan gönderdiğimiz parametleri okuma işlemini gerçekleştirelim.Ardından aldığımız verileri kontrol ederek response değeri return edelim.

[code lang=”java”]
package com.enesbyc;

import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.QueryParam;
import javax.ws.rs.core.Response;

// /rest/user geldiginde bu kismin tetiklenecegini belirtiyoruz
@Path("/user")
public class UserService {

// /rest/user/check geldiginde bu kismin tetiklenecegini belirtiyoruz
@POST
@Path("/check")
//AJAX ile verileri aldigimiz icin QueryParam anotasyonunu kullaniyoruz.
public Response checkLogin(
@QueryParam("username") String username,
@QueryParam("password") String password)
{
//Alinan degerleri kontrol edip response degeri donuyoruz.
if(username.equals("enesbyc") && password.equals("123456"))
return Response.status(200).entity("Service uzerinde kontrol edildi.Giris basarili").build();
else
return Response.status(201).entity("Service uzerinde kontrol edildi.Giris basarisiz").build();

}
}

[/code]

5)Projemize sağ tıklayıp Run as->Run on the Server seçelim.Projemiz açıldığında index.jsp dosyamız içerisindeki tasarladığımız ekranı göreceğiz.Username ve password alanları doldurduğumuzda karşımızda servis üzerinden return ettiğimiz değeri alert içerisinde görüntülenecektir.
ajax
Bir sonraki yazımda görüşmek üzere…

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir