JavaScript - ajax

• Asynchronous Javascript And XML의 줄임말
• 동적 웹페이지를 구성하는 프로그래밍 방식.
• 전체 페에지가 다시 로드되지 않고 HTML페이지의 일부 혹은 DOM만 업데이트하므로서 좀 더 복잡한 웹페이지를 만들 수 있으며 부드러운 사용자경험을 줄 수 있다.
• 웹페이지 일부가 리로드되는 동안에도 코드가 계속 실행되어 화면의 멈춤 없이 비동기식으로 작업할 수 있다.
• 화면을 새로 고치지 않고도 서버와 통신하고 데이터를 교환하고, 페이지를 업데이트 할 수 있다.

 

HTTP 요청만들기

const httpRequest = new XMLHttpRequest();

 

HTTP요청에, 서버에서 response를 받은 것을 처리할 JavaScript함수를 지정한다.

httpRequest.onreadystatechange = () => {
  // Process the server response here.
};

위 코드는 익명함수를 넣었지만, 함수를 기명함수를 넣어도 된다.

 

HTTP요청의 헤더를 설정한다.

httpRequest.setRequestHeader(
  "Content-Type",
  "application/x-www-form-urlencoded",
);

 

open()메서드를 사용해서 실제 요청을 보낸다.

httpRequest.open("GET", "http://www.example.org/some.file", true);
httpRequest.send();

 

 

• open()메서드는 첫번째 파라미터로 HTTP요청 메서드의 종류를 대문자로 적는다.
• 두번째 파라미터로 요청 보낼 URL을 적는다.
• 세번째 파라미터로는 이 요청이 비동기인지의 여부를 적는다.(true면 비동기.)

 

 

응답이왔다면, 응답의 상태값을 확인해야한다.

if (httpRequest.readyState === XMLHttpRequest.DONE) {
  // Everything is good, the response was received.
} else {
  // Not ready yet.
}

readyState의 값

• 0(초기화되지 않음) 또는 ( 요청이 초기화되지 않음 )
• 1(로드 중) 또는 ( 서버 연결 설정됨 )
• 2(로드됨) 또는 ( 요청 수신됨 )
• 3(대화형) 또는 ( 요청 처리 중 )
• 4(완료) 또는 ( 요청이 완료되고 응답이 준비됨 )

 

status 를 확인한다.

if (httpRequest.status === 200) {
  // Perfect!
} else {
  // There was a problem with the request.
  // For example, the response may have a 404 (Not Found)
  // or 500 (Internal Server Error) response code.
}

 

 

 

 

 

 

참조:

https://developer.mozilla.org/ko/docs/Glossary/AJAX