[JavaScript/Jquery] Ajax의 사용법?

* Ajax란?

Ajax는 페이지를 다시 로드하지 않고, JavaScript를 사용하여 클라이언트와 서버간에 비 동기적 통신을 통해 데이터를 주고받는 기술입니다. 

 

페이지를 리 로드하며 데이터를 가져오려 할 경우 데이터를 다시 불러와야 하기 때문에 다시 불러올 필요가 없는 이미지, 스크립트등의 기타 리소스도 가져오게 됩니다. 하지만 Ajax를 사용시 필요한 리소스만 불러와 빠르고, 페이지를 리로드하지 않기 때문에 자원낭비와 시간낭비를 하지 않습니다. 

 

※ Ajax 사용시 장점

- 필요한 리소스만 불러올 수 있기 때문에 반응 속도가 빠르다.

- 비 동기적 통신이기 때문에 사용자는 요청을 보내놓고 다른 동작이 가능하다.

- Ajax를 사용하지 않고서는 불가능한 기능이 구현가능하다( ex) Scroll Paging, 지도 ...)

 

※ Ajax 사용시 주의할 점

- Ajax를 통해 요청시 사용자는 진행 상황을 알수없다. -> 사용자가 진행 중에 연속으로 여러 번 요청하지 않도록 신경써야함.

 

---

*사용방법

※ Ajax 사용시 주의할 점

Ajax를 Javascript로 구현하여 사용하려면 코드 수가 굉장히 길어지게 됩니다.

 

그래서 일반적으로 Jquery를 사용하여 개발하게 됩니다.

$.ajax({
    url: "http://project/test/",
    type: "POST",
    dataType: "json",
    async: true,
    data: $("#form").serialize(),
    success: function(data){
		//성공했을때 실행 로직
        alert("성공");
    },
    error: function (request, status, error){        
		//실패햇을때 성공 로직.
        alert("실패");
    }
 });

url : 요청할 URL.
type : 데이터 전송방식. GET 또는 POST방식으로 요청 
datatype : 서버에서 받아올 데이터를 어떤 형태로 해석할 것인지. xml, json, html, script를 선택할 수 있다.

async : 비동기(true)/ 동기(false) 처리여부 (default:true)
data : 서버로 데이터를 전송할 때 사용한다. json, string .. 여러방식이 있다.
success : Ajax 통신에 성공했을 때 실행되는 콜백 함수.
error : Ajax 통신에 실패했을 때 실행되는 콜백 함수.

 

※ TIP) 비동기식 통신이지만 동기적(?) 통신을 하고싶을때.

 

async속성을 false로 주게되면 동기식 처리가 가능하다. 통신이 끝나고 다음로직을 처리하고 싶을 경우가 있을것이다. 

 

예를들어 서버에서 비동기 통신으로 데이터를 요청하고, 그것을 return하는 함수가 있다고 하자.

 

function checkId(){

 var serverData;
$.ajax({
    url: "http://project/test/",
    type: "POST",
    dataType: "json",
    async: false,
    data: $("#form").serialize(),
    success: function(data){
		serverData = data;
    },
    error: function (request, status, error){        
		//실패햇을때 성공 로직.
        alert("실패");
    }
 });
 
 return serverData;
 
 }

만약 이 코드에서 async속성을 true(default:true)로 주게 된다면 serverData = data; data가 담기는 로직이 실행되기 전에 return하므로 의도대로 로직이 실행되지 않기 때문에 이런 경우에 async속성을 변경하여 동기적으로 로직을 실행 할 수 있다.