ajax 개념

ி 설명

웹페이지에서 일부 정보가 변경됐는데 전체 페이지를 로딩하는 것은 비효율적이다. 이때 최소한의 필요한 데이터만 

가져오도록 하는 기법이 바로 Ajax이다. Ajax는 Asynchronous JavaScript and Xml의 약자로 비동기식으로 서버와 

통신을 하는 방식이다. 즉, 웹 페이지를 갱신할 필요 없이 웹서버에게 정보를 요청하고 부분적으로 정보를 갱신한다.
통신할 때 사용하는 데이터 타입은 xml, 최근에는 json을 많이 사용하고 이를 이용해 html 전체 코드가 아닌 필요한 

데이터(xml 혹은 json)만 받으므로 통신량이 줄어든다. 자바스크립트를 통해 ajax를 사용하면 코딩량이 많아지므로 

jquery를 이용해 ajax를 구현하는게 효율적이다.

구글에서 검색어를 타이핑하면 해당 키워드로 시작하는 예상 검색어가 출력된다. 

검색창에 t를 입력하면 t라는 문자를 서버에 전송하며 화면 전환 없이 실시간으로 예상 검색어를 보여준다.
이러한 기능 또한 ajax의 대표적인 예시라고 볼 수 있다.

ி 예제

버튼을 클릭하면 ajax를 이용해 json으로 데이터를 송수신하는 기능을 구현할 것이다.
json은 Javascript Object Notification의 약자로 자바스크립트 객체를 문자열로 표현한 것이다.
웹 서버에서 클라이언트의 브라우저로 json을 전달하면 브라우저는 json을 자바스크립트로 파싱하여 문서로 해석한다.
json과 관련된 메서드는 객체를 json 문자열로 변환하는 stringify 함수와 문자열을 객채로 변경하는 parse 함수가 존재한다.

아래 샘플 코드를 통해 ajax 기능을 살펴보겠다.

7 - jquery 사용
10 - 사용자가 조회 버튼을 클릭하면 호출되는 함수이다.
12 - http 요청을 하기 위해 만든 객체이다.
14 - 서버에서 응답이 도착하면 콜백함수를 호출한다.
15 - XML http의 모든 응답이 완료되면 readyState 값 4를, 페이지 응답 성공은 http 상태 코드 200을 반환한다.
17 - json 데이터를 객체로 변경한다.
18~24 - json 데이터를 테이블에 모두 추가한다.
28~29 - json 파일을 요청한다.

json Example - https://www.javatpoint.com/json-example

클라이언트는 조회 버튼을 클릭하면 자바스크립트에 정의된 json 파일(json.txt)을 웹 서버에게 요청한다.
그리고 웹서버는 위 사진처럼 json.txt 파일을 응답하고 클라이언트 브라우저는 받은 json 파일을
자바스크립트를 통해 파싱하여 html에 추가한다.