프로필카테고리질문하기
로그인 계정 만들기

Ajax 는 무엇이고 어떻게 사용할 수 있나요?

04 개월 전

자바스크립트에서 Ajax는 무엇이고 어떻게 사용할 수 있나요?

답변하기 의견 추가
의견 (0)
더 많은 의견 보기

답글 (1)

Ajax (Asynchronous JavaScript and XML, 비동기 자바스크립트와 XML) 는 비동기적인 웹 어플리케이션을 만들기 위해 사용되는 기술이에요.

Ajax를 사용하여 페이지를 새로고침하거나 iframe 같은 방법으로 손을 더럽힐 필요 없이 백그라운드에서 서버로 데이터를 보내고 받을 수 있어요.

AJAX 사용 패턴: Facebook

간단한 예로는 페이스북이 있어요.

1. 뉴스 피드의 끝으로 스크롤하면 페이지를 넘길 필요 없이 Ajax를 사용하여 더 많은 컨텐츠를 불러와서 보여줘요. (무한 스크롤)

2. 뉴스 피드에서 댓글 버튼을 클릭하면 페이지를 이동할 필요 없이 Ajax를 사용하여 댓글을 불러와서 보여줘요.

3. 좋아요 버튼을 클릭하면 새로고침할 필요 없이 Ajax를 사용하여 서버로 요청을 전송해요.

AJAX 예제

자바스크립트로 간단히 Ajax를 하는 방법을 설명해볼게요. 아래의 form을 Ajax로 바꿔볼거에요.

<form action="ajaxTest.php" method="POST"> <input type="text" name="firstName"> <input type="text" name="lastName"> </form>

먼저 요청을 받을 서버의 ajaxTest.php 를 만들어야겠죠:

/* ajaxTest.php 서버 사이드 스크립트 */ $firstName = $_POST["firstName"]; $lastName = $_POST["lastName"]; echo "Hello, {$firstName} {$lastName}";

그 다음 자바스크립트를 사용하여 Ajax 요청을 만들 수 있어요.

취향에 따라 아래의 그냥 자바스크립트 또는 jQuery 중 하나를 선택하세요.

AJAX 예제: 그냥 자바스크립트 AJAX
아래의 방법으로 다른 라이브러리 없이 자바스크립트만으로 Ajax를 구현할 수 있어요.
/* javascript */ var xhr = new XMLHttpRequest(); xhr.open('POST', 'ajaxTest.php'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function () { if(xhr.readyState !== 4) return; // readyState 4: 완료 if(xhr.status === 200) { // status 200: 성공 console.log(xhr.responseText); //결과: Hello, Albert Einstein. } else { console.log('에러: ' + xhr.status); } }; xhr.send('firstName=Albert&lastName=Einstein'); // firstName, lastName 전송
AJAX 예제: jQuery AJAX

퓨어 자바스크립트 예제를 보고 충격을 받은 jQuery 팬이라면 걱정마세요. jQuery로 더 쉽게 Ajax를 하는 방법도 있어요.

$.post('ajaxTest.php', { firstName: 'Albert', lastName: 'Einstein' }).done(function(data) { console.log(data); //결과: Hello, Albert Einstein. }).fail(function(data) { console.log('에러: ' + data); });
의견 추가
의견 (0)
더 많은 의견 보기