자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신방식.
서버로부터 웹 페이지가 반환되면 화면 전체를 갱신 하는데 페이지 일부만 갱신하고도 동일한 효과를 볼 수 있도록 하는 것.
페이지 전체를 rendering 할 필요가 없고 갱신이 필요한 일부만 갱신하면 되므로 빠른 성능과 부드러운 사용자 경험의 이점이 있다.
브라우저는 XMLHttpRequest 객체를 이용하여 Ajax 요청을 생성하고 전송한다.
서버가 브라우저의 요청에 대해 응답을 반환하면 같은 XMLHttpRequest 객체가 결과를 처리한다.
// XMLHttpRequest 객체의 생성
const xhr = new XMLHttpRequest();
// 비동기 방식으로 Request를 오픈한다
xhr.open("method", "url");
// Request를 전송한다
xhr.send();위 코드는 브라우저와 서버가 통신 하기위해 ajax 요청을 생성하고 전송하는 것.
send의 인수로 서버로 전송할 데이터를 줄 수 있는데
method가 GET이면 send의 인수는 무시되고, POST면 request body에 담아 전송할 인수를 전달할 수 있다.
setRequestHeader 메소드는 HTTP Request Header의 값을 설정하는데, 반드시 open 메소드 호출 이후에 호출한다.
자주 사용하는 Request Header는 Content-type과 Accept가 있다.
Content-type은 Request body에 담아 전송할 데이터의 MIME-type의 정보를 표현한다.
MIME-type는 다음 3가지가 있다.
text : text/plain, text/html, text/css, text/javascript
Application : application/json, application/x-www-form-urlencode
File : multipart/formed-data
// json으로 전송하는 경우
xhr.open("POST", "/users");
// 클라이언트가 서버로 전송할 데이터의 MIME-type 지정: json
xhr.setRequestHeader("Content-type", "application/json");
const data = { id: 3, title: "JavaScript", author: "Park", price: 5000 };
xhr.send(JSON.stringify(data));Accept는 HTTP 클라이언트가 서버에 요청할 때 서버가 센드백할 데이터의 MIME-type으로 설정한다.
// 서버가 센드백할 데이터의 MIME-type 지정: json
xhr.setRequestHeader("Accept", "application/json");// XMLHttpRequest 객체의 생성
var xhr = new XMLHttpRequest();
// 비동기 방식으로 Request를 오픈한다
xhr.open("GET", "data/test.json");
// Request를 전송한다
xhr.send();
// XMLHttpRequest.readyState 프로퍼티가 변경(이벤트 발생)될 때마다 콜백함수(이벤트 핸들러)를 호출한다.
xhr.onreadystatechange = function(e) {
// 이 함수는 Response가 클라이언트에 도달하면 호출된다.
// readyStates는 XMLHttpRequest의 상태(state)를 반환
// readyState: 4 => DONE(서버 응답 완료)
if (xhr.readyState !== XMLHttpRequest.DONE) return;
// status는 response 상태 코드를 반환 : 200 => 정상 응답
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.log("Error!");
}
};XMLHttpRequest의 readyState가 4인 경우, 서버 응답이 완료된 상태이므로 이후 XMLHttpRequest.status가 200(정상 응답)임을 확인하고 정상인 경우, XMLHttpRequest.responseText를 취득한다.
XMLHttpRequest.responseText에는 서버가 전송한 데이터가 담겨 있다.