현재 가지고 있는 자바스크립트 책들이 jquery를 사용하는 것을 기준으로 설명이 되어 있어서 $.ajax 함수만 설명이 되어 있다. 공부를 겸해서 바닐라 JS로만 프로젝트를 작성하는 연습을 하고 있기에 조금 찾아 보았다.
자바스크립트에는 XMLHttpRequest라는 API가 있다. XML이라는 이름 처럼 원래는 XML을 전송하는 목적이었지만 json이나 일반적인 텍스트는 물론 파일까지도 전송이 가능하다. ajax라는 이름도 비동기 자바스크립트와 XML(Asynchronous JavaScript And XML)다.
ajax를 통해 웹사이트와 서버간에 비동기적으로 통신이 가능하다. 페이지 새로고침이나 변경 없이 통신이 가능하다는 것이다. 몇년 전부터 계속 화두가 되고 있는 싱글 페이지 애플리케이션(Single Page Application, SPA)같이 페이지의 전환이 없는 서비스의 경우에는 유용하게 사용할 수 있다. 로그인 처리나 파일 전송을 할 때 사용할 수 있다.
이 글에서는 자바스크립트와 php를 사용하여 진행되었다.
ajax_test.html
<input type="button" value="ajax 테스트" id="ajax_btn">
<script>
var btn = document.getElementById("ajax_btn");
btn.addEventListener("click", () => {
//XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();
//요청을 보낼 방식, 주소, 비동기여부 설정
xhr.open('GET', './ajax.php?id=asdf', true);
//요청 전송
xhr.send();
//통신후 작업
xhr.onload = () => {
//통신 성공
if (xhr.status == 200) {
console.log(xhr.response);
console.log("통신 성공");
} else {
//통신 실패
console.log("통신 실패");
}
}
});
</script>
ajax.php
<?php
$id = $_GET['id'];
echo "GET 방식 ajax 요청 : ".$id;
?>버튼을 누르면 ajax로 서버에 GET 방식으로 요청을 하고 요청한 값을 php에서 그대로 반환하는 코드이다.
XMLHttpRequest()를 실행하여 통신에 사용될 XMLHttpRequest(XHR) 객체를 생성한다. 생성된 객체에 .open()으로 요청을 초기화한다. open('전송 방식', '요청할 주소', '비동기 여부')형식으로 작성한다.
GET 방식임을 확인하기 위해 쿼리로 id값을 추가하였다.
.send()로 요청을 전송하고 .onload로 통신 후 처리가 완료되면 실행할 작업을 설정한다.
.status는 XHR객체의 응답 상태를 반환한다. 통신이 성공하면 200을 반환하므로 if(xhr.status == 200)의 의미는 통신이 성공하였을 경우를 의미한다.
성공하였다면 ajax.php에서 id값을 받은 후 그대로 반환한다. 그리고 console.log로 그 값을 출력한다.
.response를 사용하면 요청 후 서버에서 전송한 데이터를 사용할 수 있다.
개발자 도구에서 확인을 해 보면 정상적으로 작동이 되는 것을 확인할 수 있다. 네트워크 항목에서 XHR을 누르면 ajax.php에 요청이 된 것이 보인다.
POST 방식도 GET 방식과 거의 같지만 한 가지 추가를 해 주어야 한다. 바로 헤더 설정이다.
<input type="button" value="ajax 테스트" id="ajax_btn">
<script>
var btn = document.getElementById("ajax_btn");
btn.addEventListener("click", () => {
//XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();
//요청을 보낼 방식, 주소, 비동기여부 설정
xhr.open('POST', './ajax.php', true);
//HTTP 요청 헤더 설정
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//요청 전송
xhr.send("id=post_ajax");
//통신후 작업
xhr.onload = function () {
//통신 성공
if (xhr.status == 200) {
console.log(xhr.response);
console.log("통신 성공");
} else {
//통신 실패
console.log("통신 실패");
}
}
});
</script><?php
$id = $_POST['id'];
echo "POST 방식 ajax 요청 : ".$id;
?>기본적으로 GET방식과 같지만 setRequestHeader()로 요청 헤더를 설정해 주어야 한다. 이 요청이 어떤 타입인지 명시를 해 두어야 서버에서 데이터를 제대로 받을 수 있다.
전송할 데이터도 주소가 아닌 .send()메소드 안에 넣어서 전송을 해야 한다.
