Ajax(XMLHTTPRequest 통신)

Ajax(Asynchronous Javascript And XML)

• 웹페이지에서 데이터를 갱신할 때, 웹페이지 전체를 새로고침 없이 데이터를 갱신할 수 있는 기술
• XMLHttpRequest 객체를 사용해서 서버와 통신한다.
• XML, Plain Text, JSON 포맷의 데이터를 주고 받을 수 있다.

HttpRequest 만드는 방법

open(param1, param2, param3)

• param1(필수): HTTP 요구 방식(request method), GET, POST, HEAD 중 하나의 방식을 사용(대문자 사용 필수).
• param2(필수): 요청하는 URL.
• param3(선택): 비동기식(Asynchronous) 여부, true가 기본값.

send("data")

• POST 방식으로 요청한 경우 서버로 보내고 싶은 데이터를 입력.
  예: send("name=value&anothername="+encodeURI(param1)+"&so=on");
• 만약 POST 방식으로 보내려 한다면, send()를 호출하기 전에 아래와 같은 형태로 send()로 보낼 쿼리를 이용해야 한다.
  예: xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
• JSON, XML 포맷도 가능.

서버 응답 처리

xhr.readyState(요청 상태값)

• 0 : request가 초기화되지 않음
• 1 : 서버와 연결
• 2 : 서버가 request를 받음
• 3 : request 처리 중
• 4 : request 처리 완료

xhr.status(응답 상태 코드)

• 200 : 이상없음
• 404 : not found
• 500 : Internal Server Error

var xhr = new XMLHttpRequest();
if (xhr.readyState === XMLHttpRequest.DONE) {
  // 이상 없음, 응답 받았음
} else {
  // 아직 준비되지 않음
}

if (httpRequest.status === 200) {
    // 이상 없음!
} else {
    // 요구를 처리하는 과정에서 문제가 발생되었음
}

비동기

console.log('Hi');

setTimeout(function callback(){
    console.log('there');
}, 5000);

console.log('Seogineer');

실행 순서

1. main(); stack에서 실행
2. log('Hi'); stack에서 실행 후 out
3. setTimeout callback(); stack에서 실행 후 out되지만 webapis에서 timer가 5초를 계산하고 있음.
4. log('Seogineer'); stack에서 실행 후 out
5. 5초 경과 후 callback()은 webapis에서 task queue로 이동하여 대기한다.
6. event loop는 task queue에 대기중인 callback()을 stack에서 실행
7. log('there'); stack에서 실행 후 out
8. callback(); stack에서 실행 후 out

소스코드

ajax 통신 vs html 통신

• javascript의 ajax 통신은 xhrRun 함수를 실행하면 ajax 통신이 수행되며 웹페이지가 새로고침되지 않는다.
• html의 통신은 실행 버튼을 눌러 submit을 하면 웹페이지가 새로고침된다.

function xhrRun(param1, param2){
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
      if (xhr.status == "200") {    //응답 상태 코드 검사
        console.log("success");
      }
    }
    xhr.open("GET", "type?id=" + encodeURI(param1) +"&type=" + encodeURI(param2));
    //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');    //POST 방식으로 요청할 경우
    xhr.send();
}

<form action="type" method="get">
  <input name="id" value="param1">
  <input name="type" value="param2">
  <input type="submit" value="실행">
</form>

참조

https://www.boostcourse.org/web316/lecture/16701
https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest
https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started
비동기 - https://www.youtube.com/watch?v=8aGhZQkoFbQ