Ajax

Asynchronous JavaScript and XML

 

서버에 비동기로 요청을 전송하고 응답받는 기술

 

ajax 기술을 사용하면 페이지를 새로 고치지 않고 페이지의 일부를 변경하여 출력할 수 있음

→ 백그라운드로 요청과 응답이 이뤄지고 화면이 갱신됨

 

내부적으로는 XMLHttpRequest를 사용하여 서버와 통신

→ XMLHttpRequest는 MS에서 개발한 동적 통신 방법이며, 원격지의 XML 데이터를 호출할 수 있음

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send();

 

 

ajax 메서드

$.get()	GET방식으로 요청을 전송
$.post()	POST방식으로 요청을 전송
$.getJSON()	GET방식으로 요청하고 JSON으로 응답을 수신
$.load()	요청에 대한 응답을 받은 후 요소에 배치
$.ajax()	다양한 방식으로 요청을 전송

 

 

 

 

$.get()

$.get(url,[,data],[,success_callback(data,textStatus, jqXHR)][,dataType])

url	요청을 전송할 주소
data	서버에 전송할 데이터 (string 또는 map)
success_callback	성공할 때 실행할 콜백함수
dataType	서버에서 전송한 데이터타입

 

 

$.post()

$.post(url,[,data],[,success_callback(data,textStatus, jqXHR)][,dataType])

url	요청을 전송할 주소
data	서버에 전송할 데이터 (string 또는 map)
success_callback	성공할 때 실행할 콜백함수
dataType	서버에서 전송한 데이터타입

 

 

$.ajax()

$.ajax( {settings} )

▼ 대표적인setting값들

url :	요청을 전송할 주소
method :	요청 방식
data :	서버에 전송할 데이터 (string 또는 map) => 파라미터가 됨
success :	성공 할 때 실행할 콜백함수
dataType :	서버에서 전송한 데이터 타입
contentType :	서버에 전송할 contentType
error :	요청이 실패할 때 실행할 콜백함수
beforeSend :	전송하기 전에 실행할 콜백함수