유혁의 개발 스토리

[Spring] Ajax란 무엇인가, 사용법 본문

Spring

[Spring] Ajax란 무엇인가, 사용법

유혁. 2018. 4. 9. 15:58

 

 - Ajax(Asynchronous JavaScript and XML)는 비동기적인 웹 제작을 위한 기법이다.

 

 

간단히 설명하면 특정 페이지의 데이터 변화가 존재할 때, 페이지를 refresh 해야 적용이 된다. 데이터의 변화가 많다면 지속적인 새로고침기능을 수행해 주어야한다. 매우 불편한 진실이고 트래픽이 증가하게되어 비효율적인 로딩이 너무 많아진다. 데이터만을 바꾸고싶은데 다른 이미지라던지 View를 이루고있는 틀을 다시 로드한다는건 쓸데없는 자원낭비이다. 이것을 막기위해 Ajax라는것을 쓴다. 동적으로 페이지를 변화시켜주는 기능이라 생각하면 이해가 빠를 것이다.

 

예를들어 파일업로드 중 Progress Bar를 이용해 수치를 보고싶다고 가정하면, 1% 2% 될때마다 페이지를 reload 할것인가? 하.. 답이 안나온다. ajax를 이용해 데이터를 동적으로 변화시켜 주면 확실히 깔끔한 View를 볼 수 있다.

 

Spring 을 이용하였고 jquery를 이용해 ajax를 호출해보겠다.

 

 

간단한 Ajax 예제 소스이다.

 

데이터 타입을 json형식으로도 전송이 가능하다.

5번째  data : alldata부분은 값을 전달할 변수이다. ajax가 시작하기전에 var allData = "~~~"; 라고 선언하면 된다.

URL에 요청을 하여 allData의 값을(~~~)의 값을 /test/page1 Controller 에게 전달해준다.

Controller의 요청이 끝나면 success : function(data){ } Controller 에서 제공한 내용을 data에 할당 하게되며 받은 데이터를 이용할 수 있다.

 

간단한 설명이다.

 

dataType의 종류는 html,javascript, text, xml, jsonp 등 있고, 커스터마이징도 가능한것 같다. 하지만 json, text 가 자주사용되는 것으로 파악된다.

 

ajax는 success 말고 다른 옵션도 존재한다.

 

beforeSend:function(){} //ajax를 요청하기 전에 실행

success:function(){} // 정상적으로 수행이 완료됬을때 실행

error:function(){} // 오류가 발생했을 때

complete:function(){} // 정상 비정상 상관없이 실행이 완료될 때

 

success = done

error = fail

complete = always

 

같은 뜻이다 done fail always로 사용해도 된다.

 

추가적인 옵션들도 있으나 생략한다. 검색하면 많이나옴.!

 

 

 - 예 제

 

var allData = "test1=1&test2=2"; 라고 입력하고 Controller에서 받아보자

 

 

AjaxHome으로 이동하면 바로 /ajax 페이지로 Ajax로 요청한다.  말이조금 헷갈리면

 

/AjaxHome 페이지로  이동하면 /test/test 경로의 html페이지를 열어준다. /test/test 페이지의 html(jsp)페이지에서

 

.ready()를 통해 바로 ajax통신을 하게된다 버튼으로 바꾸겠습니다. 헷갈릴 수 있으니

 

test.jsp

 

<!DOCTYPE html>
<html>
<head>
<title>Ajax Test</title>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

<script>
 $(function() {
  $('#AjaxStart').click(function() {
   var allData = "test1=1&test2=2";
   $.ajax({
    type : "POST",
    //dataType: "json",
    dataType : 'text',
    data : allData,
    url : "~~~/ajax",
    success : function(data) {
     alert(data);
    }
   });
  });
 });
</script>

</head>
<body>
 <button  id="AjaxStart">Ajax Start</button>
</body>
</html>

버튼을 이용해서 클릭하면 /ajax 컨트롤러로 들어가게되며 allData값을 getParameter로 받을 수 있다. 데이터를 가공하여 success에 data 로 전달이 가능한 구조를 가지고 있다.

 

 

 

'Spring' 카테고리의 다른 글

[Spring Framework] 1. Spring Framework 구조  (0) 2021.05.18
[Spring MVC] Java 네이버 로그인 연동 완벽정리(네아로)  (7) 2018.04.18
[Spring] MultipartHttpServletRequset을 이용한 다중 파일 업로드  (2) 2018.04.04
[Spring] 스프링 외부 URL 리다이렉트(Redirect to external URL)  (0) 2017.09.07
[Spring] MVC 패턴 이해  (0) 2017.07.19
'Spring' Related Articles more