FRONT-END/JQUERY

[jQuery] AJAX

썬키 2023. 2. 8. 21:51
AJAX

 

AJAX(Asynchronous JavaScript And XML)는 웹 브라우저의 기본 객체인

XMLHttpRequest를 이용해서 클라이언트와 서버가 비동기 방식으로 데이터를 주고 받는 것을 의미한다.

(* 비동기 방식: 웹 브라우저의 페이지 전환 없이 서버와 통신하는 방식)

 

AJAX 사용법

 

AJAX 통신 방식을 사용하기 위해서는 JavaScript, jQuery, Axios 세 가지 방법을 이용할 수 있는데

이번에는 jQuery 라이브러리를 활용하여 AJAX 통신 방식에 관해 포스팅 할 예정이다.

 

 

1. 문법

 

// jQuery 라이브러리를 CDN 방식으로 이용
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<body>
<button>Click me!</button>

</body>

<script>
$(document).ready(()=>{
	$("button").on("click", function() {
        // jQuery를 이용한 AJAX
        $.ajax({
        url : 클라이언트 측에서 서버에 요청한 URL,
        datatype : url에 위치한 데이터의 형식(JSON이 아닐 때에는 생략이 가능),
        
        // 성공적으로 요청이 이루어졌을시에 실행할 함수
        success : 함수,
        // 요청 실패시에 실행할 함수
        error : 함수
        })
    }
});
</script>

 

전체적인 문법은 위와 같으며, Attribute를 하나씩 따져가면서 서버와 비동기적으로 통신을 해보자.

 

2. 데이터 요청하기

 

 $.ajax({
	url: 'https://jsonplaceholder.typicode.com/comments,
    .
    .
})

 

첫 번째 Attribute인 url의 값은 위와 같이 입력한다.

위의 url로 이동하면 JSON 포맷 형식으로 데이터가 존재하는 것을 확인할 수 있다.

 

 

 $.ajax({
	url: 'https://jsonplaceholder.typicode.com/comments,
	datatype: 'JSON',
	.
	.
})

 

해당 url의 데이터 타입이 JSON이므로 datatype 값은 "JSON" 이라고 입력한다.

요청이 성공하면 해당 url의 데이터를 가지고 브라우저에 새로고침 없이 전송하면 AJAX 방식이 성공한 것이다.

 

3. 데이터 응답하기

 

 $.ajax({
	url: 'https://jsonplaceholder.typicode.com/comments,
        datatype: 'JSON',
    	.
        .
        success: function(data) {
        	console.log(data);
        },
        error : function() {
        	console.log('요청이 잘못됨');
        }
})

 

우선, 요청한 데이터가 잘 넘어 왔는지 어쨌는지 확인하기 위해

success, error의 값으로 함수를 지정했다.

 

 

개발자도구에서 확인한 결과, 요청한 url에 존재하는 데이터가 잘 넘어온 것을 확인할 수 있다.

그럼 이 데이터를 브라우저에 출력하기 위해 하나의 <p> 태그를 작성하고, 그 안에다 넣어보자.

 

4. 응답받은 데이터 출력하기

 

<body>
<button>Click me!</button>
<p id="pid"></p>
<script type="text/javascript">
$(document).ready(()=>{
	$("button").on("click", function(){
		$.ajax({
			url : 'https://jsonplaceholder.typicode.com/comments',
			datatype : 'JSON',
			success : function(data){
				//console.log(data);
				let json = JSON.stringify(data);
				$("#pid").text(json);
			},
			error : function() {
				console.log("error");
			}
		})
	});
});
</script>
</body>

 

 

위처럼 코드를 작성하면 웹 브라우저의 새로고침 없이 <p>에 데이터가 잘 출력이 된 것을 확인할 수 있다.

저작자표시