Ajax 란 무엇이고, jQuery를 이용한 Ajax 사용법

Ajax (Asynchronous JavaScript and Xml) 란?

- Ajax는 Asynchronous JavaScript and Xml의 약자로 비동기식 서버와 통신하는 방식입니다. 

이 때 XML을 이용하고, 최근에는 JSON (JavaScript Object Notation)을 많이 사용합니다.

비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미를 지닙니다.

(비동기성을 통해 페이지 전체를 refresh 하지 않고 일부분만 업데이트를 할 수 있습니다.)

결과가 주어지는 시간이 길어져도 그 시간 동안 다른 작업을 할 수 있으므로 조금 더 효율적으로 자원을 사용할 수 있는 장점이 있습니다.

jQuery를 이용한 Ajax

jQuery에서는 ajax() 함수를 사용하면 매우 편리하게 서버와 통신할 수 있습니다.

버튼을 클릭했을 때 ajax 호출하는 예제를 통해 사용법과 옵션에 대해 알아보겠습니다.

$('.btn').click(function() {

$.ajax({

// 요청할 url을 입력합니다.

url : requestUrl,

// 통신 타입을 설정합니다. POST 또는 GET을 사용할 수 있습니다.

      type : 'POST',

// 비동기 호출 전송 설정 값으로 true/false 를 선택하고 기본값은 true입니다.

async : true,

// 서버에 요청 시 전송할 파라미터를 기입합니다. (key / value 형식의 객체)

data : {name : "홍길동"},

// 응답 받을 데이터의 타입을 선택합니다. (xml / html / json / jsonp / script / text)

// 선언하지 않으면 default는 서버가 주는 응답의 mimetype을 기본으로 합니다.

dataType : "json",

// 요청에 대한 응답 제한 시간으로 단위는 millisecond 입니다.

timeout : 10000,    

// 서버에 데이터를 보낼 때 형식을 지정합니다.  기본값은 "application/x-www-form-urlencoded"입니다.

contentType : "application/json",

      

// HTTP 요청 전에 발생하는 이벤트 핸들러 입니다.

beforeSend : function() {

            

},

// HTTP 요청 성공 시 이벤트 핸들러 입니다.

success : function(data) {            

},

// HTTP 요청 실패 시 이벤트 핸들러 입니다.

error : function(request,status,error) {

},

// HTTP 요청 완료 시 이벤트 핸들러 입니다.

complete : function() {

}

});

});