[Javascript] XMLHttpRequest 통신

// XMLHttpRequest 객체 생성
var xmlHttpRequest = new XMLHttpRequest()

• XMLHttpRequest
  Ajax와 같이 비동기적으로 서버와 브라우저가 데이터를 주고받는 방식에서 사용하는 API
  전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있습니다
  
  
  

// onreadystatechange 이벤트 핸들러 작성
xmlHttpRequest.onreadystatechange = function(){
	// 서버상에 문서가 존재하고 요청한 데이터 서버 처리가 완료되어 응답할 준비 완료
	if(xmlHttpRequest.readyState == 4){
		if(xmlHttpRequest.status == 200){
			callbackFunction(0, xmlHttpRequest.responseText);
		}else{
			callbackFunction(xmlHttpRequest.status, xmlHttpRequest.statusText);
		}
	}
};

• XMLHttpRequest.onreadystatechange
  readystate 속성이 변경될떄 호출 할 함수를 정의합니다
  
  
• XMLHttpRequest.readyState
  요청상태를 unsigned short로 변환
  0: open() 전
  1: 로딩 중
  2: 로딩 완료
  3: 서버 처리 중
  4: 서버 처리 완료
  
• xmlHttpRequest.status
  요청 응답상태를 갖는 unsigned short로 변환
  200: 성공
  403: 접근거부 에러
  404: 파일, 페이지 없음
  500: 문법 오류
  
  
• xmlHttpRequest.responseText
  요청에 대한 응답을 텍스트로 갖는 DOMString 반환
  서버에서 전송한 데이터를 text 형식으로 담고 있습니다
  
  
  

xmlHttpRequest.open("POST", url, true);
xmlHttpRequest.setRequestHeader("Content-type", "application/json");
xmlHttpRequest.send( params );

• xmlHttpRequest.open
  open("전송방식", "경로", 비동기 사용여부)
  비동기식 요청 초기화 설정
  비동기식으로 요청을 보내면 js는 서버 응답을 기다리며 다른 일을 할 수 있습니다
  
  
• xmlHttpRequest.setRequestHeader
  지정한 헤더의 텍스트를 갖는 문자열 반환
  요청 헤더에 내용 추가(key, value)
  데이터 타입 형식 지정
  
• xmlHttpRequest.send
  요청 보냄
  
  
  

- 전체코드

var xmlHttpRequest = new XMLHttpRequest()

xmlHttpRequest.open("POST", url, true);
xmlHttpRequest.setRequestHeader("Content-type", "application/json");
xmlHttpRequest.send( params );

xmlHttpRequest.onreadystatechange = function(){
	if(xmlHttpRequest.readyState == 4){
		if(xmlHttpRequest.status == 200){
			callbackFunction(0, xmlHttpRequest.responseText);
		}else{
			callbackFunction(xmlHttpRequest.status, xmlHttpRequest.statusText);
		}
	}
};