AJax1. 기본 개념

목차

1. Ajax란?
2. HTTP 요청객체 생성
3. 서버로 부터 받은 응답 처리 방법

#1. AJAX란?

• Asynchronous JavaScript and XML의 줄임말
• 즉, 서버와 통신하기 위해 자바스크립트의 특정함수 인 XMLHTTPRequest 객체를 사용한다는 뜻
• AJAX는 JSON, XML, HTML, and text files를 포함한 다양한 형식으로 정보를 주고받을 수 있다
• 가장 두드러지는 특징은 '비동기' 통신이란 점.
• 즉 전체 브라우저 페이지를 새로고침할 필요 없이 서버와 통신하고, 데이터를 주고받으며 페이지를 업데이트 할 수 있다
• Ajax는 어플리케이션을 좀 더 빠르고, 유저의 행동의 더 반응적이게 만들었다.
• 과거의 Ajax모델에서는 XML을 통하여 정보를 담았지만, 요즘에는 JSON을 주로 사용한다.

AJAX로 할 수 있는 주요 내용:

• 페이지 재로딩 없이 서버에 요청 보내기
• 서버로부터 데이터 받고 작업하기

#2. HTTP request(요청) 객체를 생성하는 방법

1. 객체 생성

const xhr = new XMLHttpRequest

2. open메서드 호출

xhr.open('POST','http://www.localhost:3000/login',true);

-매개변수 : 3가지

1. 요청 메서드 : GET, POST, HEAD 기타 등등 서버가 지원하는 다른 메서드들, HTTP 스탠다드에 의하면 메서드는 대문자로 작성하는 것을 권장. 그렇지 않을 경우 파이어 폭스 같은 일부 브라우저에서는 요청을 진행하지 않을 수도 있다.
2. 요청을 보낼 url : 보안문제로 인해 기본적으로 제3자 도메인에 있는 URLs은 호출할 수 없다. 페이지의 정확한 도메인명을 작성하지 않으면 '접근 불가' 에러 발생할 수도 있다. url 작성 시, www도 잊지 말고 작성하도록 하자.
3. 비동기 여부 : 디폴트가 true이며 생략가능하다. 3번 매개변수가 true이면 클라이언트는 서버의 응답을 받기 전이라 할 지라도 페이지와 상호작용할 수 있다.

3. send메서드 호출

xhr.send();

-매개변수 : 요청을 POST할 때, 서버에게 보낼 데이터.
단, 폼 데이터의 경우 서버가 해석할 수 있는 형식으로 보내져야 한다.
예를 들어,

• 쿼리스트링
• JSON
• XML
• multipart/form-data 등

데이터를 POST하고 싶다면, 요청 객체의 MIME 유형을 설정해야 할 수도 있다.
3번의 send 메서드를 호출하기전에

---

2-2. 쿼리스트링으로 보내진 폼 데이터에 대한 send() 메서드 호출 전 헤더 설정 메서드 호출

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

---

#3. 서버로부터 받은 response(응답) 처리

1. 서버로 부터 받은 응답에 대한 처리를 다룰 함수 선언

xhr.onreadystatechage = functionName ;

Ajax 통신으로 request를 보내면, response를 돌려받을 것이다.
그 때 XMLHttp 요청 객체에게 어떤 자바스크립트 함수가 서버로 부터 받은 response를 다룰 지 정해야 한다.

그 정하는 행위는 XMLHttp 요청 객체에 대한 속성인 onreadystatechage를 설정하는 것으로 가능하다..

위의 블럭에서 함수 호출이 아닌 함수에 대한 참조를 할당한 것이기 때문에 속성값으로 함수명을 작성한 것에 주목.
또한 아래와 같이 함수명 작성이 아닌, 익명함수로 작성하는 방법도 가능하다

xhr.onreadystatechange = function() {
	//서버의 response에 대한 처리를 다룰 블럭
}

2. 처리에 대한 내용 작성 (※비동기 요청일 경우 유의미함/즉, 요청객체의 open 메서드 3번 매개변수가 없거나, True값 인 경우)
2-1. 요청의 상태 확인

xhr.readyState

num	상태
0 (uninitialized)	request not initialized
1 (loading)	server connection estalished
2 (loaded)	request received
3 (interactive)	processing request
4 (complete)	request finished and response is ready

2-2. HTTP 응답의 상태 코드 확인

XMLHttpRequest.status

num	대략적인 의미(정확한 내용은 개별 코드에 따라 다름)
100 - 199 ( 정보 응답 )	요청을 받았으며 프로세스를 계속 진행함
200 - 299 ( 성공 응답 )	요청을 성공적으로 받았고, 성공적으로 처리함
300 - 399( 리디렉션 메세지 )	요청 완료를 위해 클라이언트의 추가 작업이 필요함
400 - 499 ( 클라이언트 에러 응답 )	요청의 문법이 잘못되었거나 요청을 처리할 수 없음
500 - 599( 서버 에러 응답 )	요청은 유효했으나 서버가 요청에 대한 처리 불가능

2-3. 서버가 보낸 데이터에 접근하는 두 가지 방법
(1) 서버의 응답을 스트링으로 반환

XMLHttpRequest.responseText

(2) 자바스크립트 DOM 함수로 사용 가능한 XMLDocumnet 객체로 반환

XMLhttpRequest.responseXML