[Do it!] 09. 제이쿼리 비동기 방식 연동 [1.Ajax]

Ajax란?

Ajax(Asynchronous Javascript and XML)란 비동기 방식의 Javascript와 XML을 가리킴

동기 방식은 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있음

비동기 방식은 신호를 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있음

Ajax를 사용하는 이유는 화면 전환 없이 클라이언트(사용자 컴퓨터)와 서버(서비스를 제공하는 컴퓨터) 간에 XML, JSON(JavaScript Object Notation), 텍스트, HTML등의 정보를 교환하기 위해서

Ajax를 이용하면 서버에 자료를 요청할 때 화면 전환없이 요청한 자료를 전송받을 수 있음

자료를 요청할 경우 어느 정도 시간이 소요되는데 반해 Ajax를 이용하면 사용자가 기다릴 필요 없이 다른 작업을 바로 수행할 수 있음

 

Ajax 사용 전 방식

Ajax를 사용하지 않았을 경우 사용자가 자료를 요청하면 반드시 서버 컴퓨터를 거쳐야만 자료를 요청할 수 있음

이 방식으로 자료를 요청하면 잠시 페이지가 서버스크립트 페이지로 갱신되어 화면이 깜박거리고 그 동안 사용자는 어떤 작업도 할 수 없음

 

Ajax 사용 후 방식

Ajax를 사용해 사용자가 서버에 자료를 요청한 경우 서버스크립트 페이지를 거치지 않아도 자료를 받아올 수 있음

사용자는 서버에 자료를 요청하는 사이에도 다른 작업을 할 수 있음

카페나 블로그의 게시글에 댓글을 달 때 페이지 전환 없이 바로 할 수 있는 것도 Ajax를 사용했기 때문

페이스북의 댓글 기능과 구글 지도 등에도 사용되고 있음

 

웹 서버 설치하기

웹 서버는 웹 서비스를 제공하는 컴퓨터

완성된 웹 문서를 컴퓨터에 저장만 해둔다면 외부에 있는 사용자는 완성된 웹 문서를 볼 수 없어 서비스를 받을 수 없음

외부에 있는 사용자가 완성된 웹 문서를 볼 수 있도록 하려면 웹 서버를 구축하고 웹 서버에 완성된 HTML 문서를 저장해야함

Ajax를 이용해 사용자가 폼에 입력 요소를 작성해서 데이터를 전송하고 응답을 요청하는 테스트를 수행하기 위해 웹 서버 + 액션 페이지도 필요함

액션 페이지 : 데이터를 전송하여 요청한 응답을 전송해 줄 페이지

일반적으로 액션 페이지는 서버 측 스크립트 페이지인 PHP, ASP, JSP를 이용해 작성함

서버측 스크립트 페이지는 전송된 데이터를 이용하여 정상적인 데이터인지 검사한 후 응답값을 되돌려 전송해줌

서버 측 스크립트 페이지는 서버 컴퓨터에 저장되어 있어야 정상적으로 작동함