XMLHttpRequest 와 객체 상태

XMLHttpRequest

웹 브라우저와 웹 서버 간에 메소드가 데이터를 전송하는 객체 폼의 API이다. 전체 페이지의 새로고침없이도 URL 로 부터 데이터를 받아올 수 있다.

XMLHttpRequest를 사용한 Ajax 프로그램은 다음와 같이 세 과정을 거치게 된다.

1. XMLHttpRequest 객체 구하기

2. 웹 서버에 요청 전송하기

1. open() 함수 : 요청의 초기화, HTTP 메소드, 접속할 URL입력

   XMLHttpRequest.open(method, url[, async[, user[, password]]])

   • 첫번째 매개변수 : 'GET','POST','PUT','DELETE'
   • 두번째 매개변수 : URL
   • 세번째 매개변수 : 동기/비동기 방식을 지정, default = true(비동기)

2. sand() 함수 : 웹서버에 요청 전송
   
   

3. 웹 서버에서 응답이 도착하면 화면에 반영하기

서버로부터 응답(response) 확인

• readyState 프로퍼티
  
  
• status 프로퍼티
  
  
• onreadystatechange 프로퍼티
  

readyState

값	상태	설명
0	UNSENT	XMLHttpRequest 객체가 생성된다
1	OPENED	open()메서드가 실행된다
2	HEADERS_RECEIVED	send() 메서드가 실행된다. header 및 status를 사용할 수 있다.
3	LOADING	Response's body를 받는 중이다. 만약 responseType: "text"이거나 빈 문자열인 경우 responseText 부분 텍스트로 응답해야 한다. 요청한 데이터를 처리 중이다.
4	DONE	가져오는 작업이 완료되었다. 데이터 전송이 성공적으로 완료되었거나, 실패했음을 의미한다. 응답할 준비가 완료됨을 의미한다.

onreadystatechange 이벤트

onreadystatechange 프로퍼티는 XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때마다 자동으로 호출되는 함수를 설정합니다.

Callback 함수

다른 함수의 파라미터로 넘겨지는 함수를 말한다.

status

서버의 응답상태를 나타낸다.

값	상태	설명
200	OK	요청성공
403	Forbidden	접근거부
404	NotFound	페이지 없음
500	Internal Server Error	서버오류

출처

• https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState
• https://m.blog.naver.com/PostView.nhn?blogId=dceye&logNo=50090851280&proxyReferer=https:%2F%2Fwww.google.com%2F
• http://www.tcpschool.com/ajax/ajax_server_response