Ajax

Ajax란(Asynchrononus JavaScript and XML) 란?

• HTML, CSS, JavaScript를 활용해 동적이면서 인터랙티브한 사용자 화면 조작을 포함하면서 서버와 비동기 데이터 통신을 통해 응답성 좋은 데이터 처리를 가능하게 하는 웹 개발 기법
• 페이지를 새로고침하지 않고도 서버와 데이터를 주고 받을 수 있따는 의미

Ajax 사용이유

• 새로고침(refresh)을 통해 새로운 콘텐츠를 반영해야하는 정적인 페이지가 아니라 생동감있는 동적인 웹 페이지를 만들수 있다.
• 전체 페이지에서 실제로 변경되어야할 내용이 특정 부분에만 해당된다면 이 영역의 데이터만을 따로 서버에서 받아올 수 있으므로 경우에 따라 서버의 네트워크 부하를 최대한 줄일 수 있다.(변경되는 영역의 데이터만 받기 때문에 경우에 따라서 트래픽이 현저히 줄어든다.)
• 사용자 요청에 대한 응답성이 빨라진다.
• 데이터를 처리할 때 각종 효과를 추가해 인터랙티브한 화면을 만들 수 있다.
• 데이텉 요청이 비동기로 처리되므로 사용자는 서버에서 응답이 오기 전까지 다른 작업을 하면서 기다릴 수 있다.

알고있어야 하는 내용

• XMLHttpRequest객체 : 클라이언트와 서버 간의 데이터 요청 및 응답 처리를 담당하며, 가장 먼저 생성해야 하는 객체다. Ajax의 핵심
• GET방식, POST방식 : 서버에 보낼 데이터를 URL에 포함시켜서 보낼지(GET 방식), 아니면 요청 메시지 몸체에 담아서 보낼지(POST)
• 동기, 비동기 : 서버에 요청을 보내고 서버 측 응답이 올 때까지 다음 코드를 실행하지 않고 무작정 기다릴 것인지(동기), 아니면 다른 것을 처리하면서 서버 측 응답이 왔다는 소식을 브라우저에 의해 이벤트로 받을 것인지(비동기) 선택해야한다. Ajax의 A는 비동기를 의미한다.
• 데이터 교환 방식 : 서버에서 클라이언트 요청에 대한 응답을 보내는 방식을 정한다. 데이터를 하나로 모두 묶어서 보낼 것인지(CSV, Comma Separated Value) 아니면 널리 사용하는 XML 형식으로 보낼지 또는 리터럴(Literal) 방식의 자바스크립트 객체를 의미하는 JSON(JavaScript Obejct Notation) 방식으로 보낼지 설정한다.

Ajax를 이용한 클라이언트와 서버 간의 데이터 연동

1. XMLHttpRequest(요청)객체를 생성

XMLHttpRequest 객체가 가지고 있는 기능 : onreadystatechange 이벤트, open() 메서드, send() 메서드

Ajax 작업은 요청객체를 생성하는 것으로 시작하며, 나머지 작업에서 모두 이 객체에서 제공하는 기능을 이용한다.

 

2. 처리 결과를 받을 이벤트 리스너 등록

서버에서 보내는 데이터를 받기 위한 이벤트 리스너를 등록한다.

 

3. 서버로 보낼 데이터 생성

서버에 요청하면서 추가적으로 보내야 할 내용이 있으면 이곳에서 생성하며, 이 경우 '&'를 구분자로 "key=value&key=value"와 같은 식으로 문자열을 만든다. 만약, 서버에 보낼 데이터가 없다면 이 단계는 생략한다.

 

4. 클라이언트와 서버 간의 연결 요청 준비(open() 메서드 이용)

서버로 보낼 데이터 전송 방식 선택(GET, POST방식), 서버응답(동기, 비동기) 선택

 

5. 실제 데이터 전송

4단계까지는 일종의 준비단계이다. 준비단계가 끝나고 실제 통신을 시작하려면 XMLHttpRequest 객체에서 제공하는 send() 메서드를 호출해야 한다.

 

6. 응답처리

5단계에서 send()가 실해오디면서 클라이언트와 서버 사이에서 미리 약속한 방식으로 몇 번에 걸쳐 데이터를 주고 받게 된다.

 

7. 데이터 처리

클라이언트와 서버 간의 아무런 이상없이 정상적으로 끝났다면 이후 서버에서 받은 데이터 형식 방식에 따라 데이터를 가공해서 사용하게 된다.