FIF's 코딩팩토리

[JS]Ajax에 대하여 본문

Front-End/JavaScript(자바스크립트)

[JS]Ajax에 대하여

FIF 2019. 9. 9. 09:36
반응형

Ajax 소개

Ajax는 'Asynchronous JavaScript and XML'의 약자입니다.

Web에서 화면을 갱신하지 않고 Server로부터 Data를 가져오는 방법입니다.

Ajax의 동작원리는 Browser에서 서버로 보낼 Data를 Ajax Engine을 통해 Server로 전송합니다. 이 때 Ajax Engine에서는 JavaScript를 통해 DOM을 사용하여 XMLHttpRequest(XHR) 객체로 Data를 전달합니다.

이 XHR을 이용해서 Server에서 비동기 방식으로 자료를 조회해 올 수 있습니다.

Server에서 Data를 전달 할 때 화면전체의 HTML을 전달하지 않고 Text 또는 Xml형식으로 Browser에 전달합니다.

 

Ajax UML

왜 Ajax인가?

물론 Ajax는 Browser의 Version이 낮거나 Ajax를 지원하지 않는 Browser에서는 Ajax통신을 할 수 없으며 화면의 이동 없이 Data를 송수신하기 때문에 보안상에도 치명적인 문제를 일으킬 수 있습니다.

또한 Script기반이기 때문에 개발할 때 Debugging이 불편해서 어려움이 발생 할 수 있는 문제점이 존재합니다. 하지만 이러한 단점에도 불구하고 Ajax를 사용하면서 얻는 이득과 편리함이 훨씬 많기 때문에 많이 사용합니다.

Ajax를 사용하지 않은 Web Page에서는 앞에서 언급한 바와 같이 Server로 Data를 전송할 때마다 화면전체를 Refresh하는 방법을 사용합니다.

이런 이유로 사용자가 화면내에서 어떠한 작업을 진행하고 있는 경우에도 초기화 될 뿐만 아니라 화면전체 조회에 의해 Server에 부담을 주며 속도까지 느려지는 현상이 나타납니다.

만약, Ajax를 사용해서 Server와 Data를 주고받게 되면 Server에 보낼 필요한 핵심 Data만 전송하기 때문에 화면 깜빡임도 없으며, Server에 부담이 덜하고 속도문제도 해결할 수 있습니다.

 

두 번째 이유는 화면마다 특유의 기능을 동작하기 위해 설치하는 Active X가 있습니다.

이 Active X의 설치 없이는 해당 화면을 조회할 때 제약이 따르기도 하고, 화면마다 대부분 상이하기 때문에 여러 화면을 조회하다 보면 다수의 Active X를 설치하는 경우도 발생합니다.

이 때 Ajax를 사용하면 화면전체를 조회하지 않기 때문에 이러한 Active X를 설치하지 않고도 원하는 Data를 조회를 할 수 있습니다.

 

Ajax 사용방법

Ajax의 기본 Method를 이용해서 Server와 통신을 하면 상당히 복잡합니다.

이는 XMLHttpRequest를 직접 사용하기 때문인데, jQuery를 이용하면 100줄 정도의 Source를 몇 줄 만으로 간단하게 Server와 Data를 주고받을 수 있습니다.

사용방법은 JavaScript에서 jQuery 문법을 사용해서 다음과 같이 간단하게 구현할 수 있습니다.

// jQuery를 이용한 Ajax 기본 사용방법입니다.
$.ajax({
    // URL은 필수 요소이므로 반드시 구현해야 하는 Property입니다.
    url : '요청 URL 주소를 입력합니다.'
    // 다양한 속성들 중에서 필요한 Option을 선택해서 구현합니다.('[]'는 반복해서 사용할 수 있다는 의미입니다.)
    [, Options]
});

 

 

그렇다면 Server와 Ajax 통신시에 필요한 대표적인 Property에 대해 알아보도록 하겠습니다.

Property들은 필요에 따라 다수를 선택할 수도 있습니다.

  • type : 보내는 방식
  • url : 데이터를 보내는 주소
  • data : 보내려는 데이터 ⇒ “id” : “userid” 처럼 json 형식으로 보내는게 좋다
  • json 형태로 보내면 받는쪽에서는 파라미터에서 넘어온 값처럼 인식하고, jsp 에서는 getParameter(”파라미터명”) 을 사용할 수 있다
  • dataType : 응답 데이터 형식
  • async : 비동기여부 ⇒ true, false
  • success : ajax 통신 성공 시 실행 할 함수, 참고로 해당 매개변수에는 ajax 를 통해서 응답받은 데이터가 들어온다
  • error : ajax 통신 실패시 실행할 함수
  • complete : 성공 실패에 상관없이 무조건 실행할 함수
  • beforeSend : ajax 통신 보내기전에 실행할 함수

 

Ajax 사용 예

아래 코드를 보자면,

get 방식으로 데이터를 보내고, getJSON.jsp 에 전달합니다.

비동기화로 데이터를 보내고, 보내는 데이터는 id 와 pw 입니다.

마지막으로 html 로 데이터를 받습니다.

success 함수로 response 전달받는 데이터, http 코드, 요청한 데이터를 순서대로 alert 을 띄웁니다.

beforeSend 함수는 html 에 있는 이미지를 fadeOut 합니다.

complete 함수는 html 에 있는 이미지를 fadeIn 합니다.

<script>
	$(function(){
		$("#img").on("click", function(){
			var $img = $("#img");
			
			$.ajax({
				type: "GET", // GET, POST
				url: "getJSON.jsp", // 데이터를 전달할 url
				async : true, // 비동기화 동작 여부
				data : {"id":"aaa", "pw":"bbb"}, // 전달할 데이터
				dataType: "html", // 전달받을 데이터 타입
				
				beforeSend: function(){ // ajax 통신 시작 전
					$img.fadeOut(2000)
				},
				success : function(response, status, request){
					alert("success")
					alert("response : "+response);
					alert("status : "+status);
					alert("request : "+request);
					
					$img.css("width", "400px")
						.css("height", "400px")
				},
 				error : function(){ // 에러 발생시
					
				},
				complete: function(){ // ajax 통기 끝났을 때
					$img.fadeIn(2000)
				}
			})
		})
	})
</script>

 

중복체크 예제로 알아보는 Ajax

중복 검사 버튼을 눌렸을 때 ajax 통신이 실행되고, 아이디칸에 적은 값을 보내주고 그 값을 받아옵니다.

이때  success 함수의 매개변수에 응답보내준 값이 들어옵니다.

즉 success : function(data) 일 때 data 가 ajax 보낸곳에서 받아온 값입니다.

그 후 data 의 값에 따라서 중복 여부를 확인 후 div 에 내용을 출력합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
	$(function(){

		// 버튼 누를 필요 없이 실시간 이벤트
		$("#id").on("keyup", function(){
			var $checkID = $("#id").val();
			var params = "?id="+$checkID;
			
			var $msg = $("#msg");

			//console.log($checkID);

			if($checkID == ""){
				console.log("아이디 없음")
				return;
			}
			
			$.ajax({
				type : "POST",
				url: "./checkid.jsp",
				data : { "id" : $checkID },
				dataType : "html",
				async : true,
				success : function(data){
					console.log("data : "+data)
					if(data.trim() == "true"){
						$msg.html("<h4>아이디가 이미 존재합니다</h4>");
					}else{
						$msg.html("<h4>사용가능한 아이디입니다</h4>")
					}
				}
			})
		})
	})
</script>
<style>
	* {
		margin : auto;
	}
</style>
</head>
<body>
<h1><center>회원 가입</center></h1>
<form action="registerOk.jsp" method="get">
	ID: <input type="text" name="id" id="id">
	<input type="button" id="idcheck" value="중복확인"><span id="msg"></span>
	<br>

	이름: <input type="text" name="name">
	<br>

	비민번호: <input type="password" name="passwd">
	<br>

		<center>
			<input type="submit" value="가입하기">
			<input type="button" value="취소하기">
		</center>
	</form>
	
	
</body>
</html>
반응형
저작자표시 비영리

'Front-End > JavaScript(자바스크립트)' 카테고리의 다른 글

[JS]스프레드 오퍼레이터 - … 연산자  (0) 2023.02.13
[JS]백틱 `` 사용 - 템플릿 리터럴  (0) 2023.02.09
[JS]JavaScript 클로저(Closure) 란?  (0) 2019.08.14
[JS]JavaScript란?  (0) 2019.08.07
[JS]DOM과 JavaScript  (0) 2019.07.31
'Front-End/JavaScript(자바스크립트)' Related Articles more
Comments