ajax (asynchronized javascript)

1. 비동기적으로 서버와의 통신을 javascript로 처리하여 화면 전환없이 데이터를 받아와서 처리하는 방식을 말한다.

2. 동기방식과 비동기 방식
   1) 동기
   - 서버와 클라이언트가 같은 속도로 연계하는 것
   ex) 웹 화면에서는 form데이터를 입력하고 submit후, 다시 화면이 전환되면서 서버에서 만들어진 화면을 사용하는 경우
   ex) id를 입력했을 때, 화면이 refresh되지는 않지만 서버에서 데이터를 가져올 때(js)까지, 다른 작업을 하지 못하는 것을 말한다.
   ** ex) 파일업로드시, 파일이 서버에 다 전송되어서 해당 파일 정보가 있을 때, 다운로드 하게 하거나 이미지를 볼 수 있게 해야한다 -> 이력서 사진 첨부 시
   

   2) 비동기식
   - 서버와 클라이언트가 같은 속도로 연계하지 않는 것
   ex) 편지를 우체통에 넣기만 하고 다른 일을 하다가 오면 처리하는 것을 말한다
   ex) 검색처리하고, 다른 기능을 처리하면서 검색이 완료되었을 때, 화면에 로딩되어 보이게 하는 것을 말한다.
   ps) 비동기식으로 처리하면 해당 비동기 처리 과정의 이벤트 처리와 이벤트핸들러 함수를 선언하여 호출해야한다.

3. 주요 핵심 코드
   1) XMLHttpRequest
   화면 전환없이 서버에 있는 자원들을 가지고 오는 js 내장 객체(동기/비동기 가능)
   2) 객체 생성
   var xhr = new XMLHttpRequest()
   3) 옵션 설정
   xhr.open("get/post방식","서버의 자원", 동기/비동기여부boolean)
   // 비동기식이 true
   4) 전송처리 메서드
   xhr.send()
   5) 서버에서 해당 자원이 전송해주는 데이터 받는 메서드
   xhr.responseText()
   6) 비동기식일 때, 처리하는 이벤트 및 이벤트 핸들러 함수(비동기식일 때)
   xhr.onreadystatechange=function(){
   xhr.readyState : 서버와 통신을 단계별로 코드값으로 가져온다.
   0: 객체를 만듦, 1,2 데이터 받을 준비, 3:서버에서 데이터를 일부받음,
   4: 서버에서 데이터를 모두 받음
   xhr.status : http응답코드 200~299 - 정상적으로 받음. 일반적으로 200으로 설정
   ps) xhr.responseText()로 받는 결과 내용은 비동기식 기능메서드 안에서 정상적으로 데이터를 다 받았을 때 처리한다.
   }

   ** 화면 리프레시랑 동기/비동기는 다른 개념