티스토리 뷰

spring boot

[Java] Ajax란??? + Ajax 활용 예[출처] [Java] Ajax란? + Ajax 활용

햄밥김치참치버거 2026. 4. 12. 02:19

Asynchronous(비동기식)

Javascript (자바스크립트)

And (와)

XML

Ajax는 Javascript의 라이브러리 중 하나이며 비동기식 자바스크립트와 xml의 약자입니다.

브라우저가 가지고있는 XMLHttpRequest 객체를 이용

전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

Javascript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술

: 자바스크립트를 통해 서버에서 데이터를 요청하는 것

​

비동기 방식을 설명

동기 방식 ❘❘ 비동기 방식의 속도 비교

 

Ajax의 종류는

GET, POST, PUT, DELETE가 있습니다.

 

Ajax를 사용하는 이유??

단순히 WEB화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우,

페이지 전체를 새로고침하지 않기 위해 사용한다 볼 수 있습니다.

​

기본적으로 HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고

서버 쪽에서 Response를 받으면 이어졌던 연결이 끊어지게 됩니다.

그래서 화면의 내용을 갱신하기 위해선 Request하고 Response하고

그러고 페이지 전체를 갱신하게 됩니다.

​

이렇게 할 경우엔, 자원, 시간 낭비를 합니다.

​

Ajax는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록

XMLHttpRequest객체를 통해 서버에서 Request합니다.

​

이 경우엔, JSON 이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에

그만큼 자원,시간을 아낄 수 있습니다.

 

Ajax의 동작원리

① : 먼저 사용자에 의한 요청 이벤트가 발생한다.

② : 요청 이벤트가 발생하면 이벤트 핸들러라는 것에 의해 자바스크립트가 호출된다.

③ : 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보낸다.

       (이때 웹 브라우저는 요청을 보내고 서버의 응답을 기다릴 필요 없이 다른 작업을 처리할 수 있다.)

④ : 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리한다.

⑤, ⑥ : 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달한다.

⑦ : 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출한다.

⑧ : 웹 페이지가 필요로했던 부분만 다시 로딩되어 표시된다.

 

아래는 Ajax를 이용한 로그인 방법 예제입니다.

<script type="text/javascript" src="../resources/js/jquery-3.6.4.js"></script>
<script type="text/javascript">
	$(function() {
		$('#b1').click(function() {
			var id = $('#id').val();
			var pw = $('#pw').val();
			
			if(id != '') {
				if(pw != ''){
					$.ajax({
						url:"login",
						type:'post',
						data:{
							id: id,
							pw: pw
						},
						success: function(result) {
							console.log(result)
							location.href = document.referrer;
							
						},//success
					})//ajax
				}else {
					alert("비밀번호를 입력해주세요");
				}
			}else{
				alert("아이디를 입력해주세요");
			}
		})
	})
</script>

-우선 Ajax를 사용하기 위해서는 jquery가 필요합니다-

 

<body>
		<div id="newMessagePushAlarm"></div>
			<div id="content">
		     	<div id="loginbox" >
		<h2>로그인</h2>
		<!-- <div class="container"> -->
			    <input id="id" type="text"  placeholder="아이디를 입력해주세요." style="width: 350px; height: 40px; background: #F6F6F6"> 
				<input id="pw" type="password" placeholder="비밀번호를 입력해주세요." style="width: 350px; height: 40px; background: #F6F6F6">			
			<!-- <button type="submit" class="container" style="width:-50px">서버로 전송</button>-->
			
			<button id="b1" style="width: 350px; height: 40px; background : #693FAA; color: #FFF; cursor: pointer;">로그인</button>				
			<br>
                </div>
			</div>
</body>

 

body 부분에서 id , pw 값을 받습니다.

​

  • AJAX로 서버에 로그인 요청을 보냅니다.
  • Controller -> MemberService -> MemberServiceImpl로 요청이 처리됩니다.
  • MemberServiceImpl에서 처리 결과를 @ResponseBody로 반환합니다.
  • AJAX에서 성공적으로 응답을 받으면 success 콜백에서 페이지를 리다이렉트하거나 다른 작업을 수행, 진행합니다.
  •  

Controller

@ResponseBody
	@RequestMapping(value ="/login" , produces = "application/text; charset=utf8")  
	public String login(@RequestParam("id") String id,@RequestParam("pw") String pw, HttpSession session) {
		return memberService.login(id, pw, session);
	}

 

Service

String login(@RequestParam("id") String id,@RequestParam("pw") String pw, HttpSession session);

 

ServiceImpl

@ResponseBody
    public String login(@RequestParam("id") String id,@RequestParam("pw") String pw, HttpSession session) {
	

       
        if (check != null) {
        	   ==================
                return "성공";
            } else {
                return "비밀번호가 다릅니다.다시 확인해 주세요.";
            }
        }else {
            return "존재하지 않는 아이디입니다.";
        }
    }

 

 

참고자료:

https://yunamom.tistory.com/98

 

AJAX란 무엇인가요?

✨AJAX (Asynchronous Javascript And XML) AJAX란, JavaScript의 라이브러리중 하나이며 비동기식 자바스크립트와 xml 의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고

yunamom.tistory.com

https://jbground.tistory.com/4

 

[Web] Ajax 완벽 정리, 다양한 예제 포함

Ajax 데이터 보내고 받기, Ajax Controller 데이터 받기, Ajax 데이터 배열로 보내기 등 다양한 경우에 대해 예제를 통해 알아보겠다. 목차Ajax란?Ajax 기본Ajax 설정Ajax 메소드 종류Ajax 예제 1. Ajax란? Ajax

jbground.tistory.com

https://velog.io/@hahan/Ajax%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C

 

Ajax란 무엇일까?

Ajax > 비동기 자바스크립트와 XML(Asynchronous Javascript And XML)을 말한다. Ajax는 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하며 XML 뿐만 아니라 HTML, JSON, 일반 텍스트 형식 등을 포함한 다양한 포맷

velog.io

 

'spring boot' 카테고리의 다른 글

[자바] 스케쥴러(Scheduler)를 이용한 회원상태(휴먼) 업데이트  (0) 2026.04.12
[자바] bcrypt 란?, bcrypt를 이용한 비밀번호 암호화  (0) 2026.04.12
[Spring Boot] Selenium(셀레니움) 연습(네이버 영어사전 가져오기)[출처] [Spring Boot] Selenium(셀레니움) 연습(네이버 영어사전 가져오기)  (0) 2026.04.12
[Java] 세션, 쿠키  (0) 2026.04.12
[JAVA] 큐 , 데큐  (0) 2026.04.12
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함