[Javascript/Jquery] Ajax 사용법 정리(Ajax란?, Ajax 기본 형태, Ajax Option 정리, Ajax Get, Ajax Post)

---

1. Ajax란?

Ajax(Asynchronous Javascript and XML)는 비동기 방식으로(페이지의 전환 없이) http통신을 통해 데이터를 주고받으며,

http통신을 통해 데이터를 업데이트 시켜 주며, 화면의 일부분을 최신의 데이터로 리프레쉬 시켜줄 수 있는 개발방식입니다.

 

2. Ajax 기본 형태

    $.ajax({
        type: "get",             // http 타입
        url: "/ajaxTest",         // 호출 URL
        data: "",                 // URL호출시 보낼 파라미터 데이터
        dataType: "json",         // http 통신 후 응답 데이터 타입
        success: function(res){    // Ajax통신 성공 후 실행 함수
            console.log("success :: "+res);    // 서버에서 res값을 받아서 화면에 처리할 수 있다.
        }
    })

Ajax통신에 사용되는 기본 형태는 위와 같습니다.

 

이 형태에서 옵션값들을 변경하여 사용하면 됩니다.

 

주석으로 간단히 설명을 적어놓긴 했지만

 

간단히 한번더 각각 옵션에 대해 정리해 보겠습니다.

 

3. Ajax Option값 정리

 

1) type

type값은 http통신 타입입니다.

대표적으로 GET, POST가 주로 사용되며, PUT, DELETE도 사용할 수 있습니다.

 

 

2) url

http통신으로 호출한 url을 적는 값입니다.

 

 

3) data

http통신시 같이 보낼 파라미터값 정보입니다.

 

 

4) dataType

http 통신 후 서버에서 받은 데이터의 타입값입니다.

 

 

5) sucess

ajax통신이 성공적으로 완료되면 호출되는 함수 입니다.

ajax통신 후 서버에서 데이터를 받아 후 처리를 하는 부분입니다.

 

---

이상 간단히 Ajax에 대해 정리해 보았습니다.

 

피드를 마치겠습니다.