AJAX(Asynchronous Javascript And XML)란?

이동준·2023년 8월 2일

자바스크립트

목록 보기

25/28

AJAX란?

AJAX란, 자바스크립트의 라이브러리 중 하나이며 비동기식 자바스크립트와 XML의 약자이다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여, 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법으로 자바스크립트를 사용한 비동기 통신, 클라이언트와 서버간의 XML 데이터를 주고받는 기술이다. 쉽게 말하자면 자바스크립트로 서버에 데이터를 요청하는 것이다.

AJAX를 사용하는 이유?

단순하게 웹 화면에서 무언가를 부르거나 데이터를 조회하고 싶은 경우, 페이지 전체를 새로고침하지 않기 위해서 사용한다. 기본적으로 HTTP 프로토콜은 클라이언트쪽에서 request 를 보내고 서버쪽에서 response 를 받으면 이어졌던 연결이 끊어지게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request 를 하고 response 를 하며 페이지 전체를 갱신하게 된다. 이렇게 할 경우, 엄청난 자원낭비와 시간낭비를 초래할 것인데, AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 request 한다. 이 경우 JSON이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

AJAX의 장단점

AJAX의 장점

웹페이지의 속도 향상
서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어듬
기존 웹에서는 불가능했던 다양한 UI를 구현 가능하게 해줌

AJAX의 단점

히스토리 관리가 안됨
페이지 이동없는 통신으로 인한 보안상의 문제 발생
연속으로 데이터를 요청하면 서버 부하 증가
XMLHttpRequest 를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않음 (요청이 완료되지 않은 상태에 사용자가 페이지를 떠나거나 오작동 할 우려 발생)
AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있음
HTTP 클라이언트 기능이 한정되어 있음
지원하는 Charset이 한정되어 있음
Script로 작성되므로 디버깅이 용이하지 않음
동일 출처 정책(same-origin policy)으로 인해 다른 도메인과는 통신이 불가능

JQuery를 이용한 AJAX 사용법

기본 문법


$.ajax({
    type : 'post',           // 타입 (get, post, put 등등)
    url : '/test',           // 요청할 서버url
    async : true,            // 비동기화 여부 (default : true)
    headers : {              // Http header
      "Content-Type" : "application/json",
      "X-HTTP-Method-Override" : "POST"
    },
    dataType : 'text',       // 데이터 타입 (html, xml, json, text 등등)
    data : JSON.stringify({  // 보낼 데이터 (Object , String, Array)
      "no" : no,
      "name" : name,
      "nick" : nick
    }),
    success : function(result) { // 결과 성공 콜백함수
        console.log(result);
    },
    error : function(request, status, error) { // 결과 에러 콜백함수
        console.log(error)
    }
})

type : GET 또는 POST 지정
url : ajax로 요청할 대상 URL 지정
async : 동기, 비동기 지정(boolean)
dataType : 받아올 테이터의 자료형 지정
data : 요청 할때 보낼 데이터 지정
success : ajax 요청 성공시 실행할 이벤트 지정 (function, array)
error(xhr, status, error) : ajax 요청 실패 시 실행할 이벤트 지정(function)
complete : ajax 요청 완료시 실행할 이벤트 지정(function)

AJAX 사용 예시

//   요청한 데이터 : {"member_list":[
//    {"id":"aa1","pw":"bb","addr":"cc","tel":"dd"},
//    {"id":"aa2","pw":"bb","addr":"cc","tel":"dd"},
//    {"id":"aa3","pw":"bb","addr":"cc","tel":"dd"}
//  ]}
 
<script>
$(document).ready(function(){
    $("#listButton").click(getMemberList); //id="listButton"인 태그에 click하면 function getMemberList() 실행
});
function getMemberList(){
    $.ajax({
        url:"list.jsp",                    //list.jsp에 AJAX요청
        success:function(data){
            let obj=JSON.parse(data);      //data를 받아와서 JSON형태로 변환
            let array=["<ol>"]; 
            obj["member_list"].forEach(
                    member =>  array.push("<li>"+member.id+"</li>")    
                    //JSON에 있는 member.id의 value를 li태그에 넣어서 array에 넣어줌
            );
            array.push("</ol>");                                   
 
            $("#result").html(array.join(""));  
            //array의 요소들을 다 합쳐서 하나로 만든후 id="result"인 태그에 html로 출력
        }
    });    
}
</script>

<body>
    <a href="#" id="listButton">회원리스트</a><br/>
    <div id="result">이곳에 회원 목록을 출력하세요</div>
</body>