Ajax란?

* Ajax란?

- Ajax(Asynchronous JavaScript and XML)란, 비동기 방식의 JavaScript와 XML을 의미함.

- 동기 방식과 비동식 방식의 차이점 -> 동기 방식의 경우는 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있지만, 비동기 방식은 그와 반대로 신호를 보냈을 때 응답 상태와 상관 없이 다음 동작을 수행할 수 있음.

- Ajax를 이용한는 주목적 -> 화면 전환 없이 클라이언트(방문자 컴퓨터) 측과 서버(서비스를 제공하는 컴퓨터) 측 간의 XML, JSON(JavaScript Object Notation), 텍스트, (X)HTML 등의 정보를 교환하기 위해서.

- Ajax를 이용하면 방문객이 보는 컴퓨터에서 서버(Server)에 자료를 요청할 때 화면 전환 없이 요청한 자료를 전송 받을 수 있음.

- 또한 자료를 요청하면 시간이 소요되는데, Ajax를 이용하면 방문객이 기다릴 필요 없이 다른 작업을 바로 수행할 수 있음.

 

[Ajax 사용 전 방식]

 

- Ajax를 사용하지 않았을 경우에는, 방문자(Clinet)가 자료를 요청하면 반드시 서버(Server) 컴퓨터를 거쳐야만 자료를 요청할 수 있었음.

- 이 방식으로 자료를 요청하면, 잠시 페이지가 서버 스크립트(Server Script) 페이지로 갱신되어 화면이 깜빡거리고, 그동안 사용자는 어떤 작업도 할 수 없게됨.

 

[Ajax 사용 후 방식]

 

- Ajax를 사용해 방문자가 서버(Server)에 자료를 요청했을 경우, 서버 스크립트(Server Script) 페이지를 거치지 않아도 자료를 받아 올 수 있음.

- 방문자(Client)는 서버에 자료를 요청하는 사이에도 다른 작업을 할 수 있음.

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

- 페이스북의 댓글 기능과 구글(Google) 지도 등에도 사용됨.

 

* 웹 서버 설치하기

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

- 완성된 웹 문서를 컴퓨터에 저장만 해둔다면 외부에 있는 방문자는 완성된 웹 문서의 서비스를 받을 수 없음.

- 외부에 있는 방문자가 완성된 웹 문서를 볼 수 있도록 하려면 웹 서버를 구축하고 웹 서버에 완성된 (X)HTML 문서를 저장해야 함.

- Ajax를 이용하여 방문객이 폼에 입력 요소를 작성하여 데이터를 전송하고 응답을 요청하는 테스트를 해 보려면, 웹 서버도 필요하지만 데이터를 전송하여 요청한 응답을 전송해 줄 액션 페이지(Action Page)도 필요함.

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

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

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

- 서버를 구축하여 웹 서비스를 제공하는 방법에는 APM(Apache PHP MySQL)을 이용하여 서버를 직접 본인 컴퓨터에 설치하는 방법과, 외부에 구축된 서버인 웹 호스팅을 임대하여 이용하는 방법이 있음.4

- 외부 서버 컴퓨터에 일정한 저장 공간을 임대하여 서비스를 제공하는 것을 '웹 호스팅'이라고 함.

 

* 서버 측 스크립트 언어란?
- 프로그래밍 언어는 크게 클라이언트 측(Client Side) 스크립트 언어와 서버 측(Server Side) 스크립트 언어로 나누어짐.

- 대표적인 클라이언트 측 언어로는 자바스크립트가 있고, 서버 측 스크립트 언어로는 PHP, ASP, JSP가 있음.

- 클라이언트 측 스크립트 언어의 경우는 방문자의 컴퓨터에서 프로그래밍이 수행되지만, 서버 측 스크립트 언어는 서버에서 프로그래밍이 수행됨.

- 그러므로 사이트에서 동적인 사용자 환경을 개발할 때는 주로 클라이언트 측 언어를 사용하고, 서버 측 데이터 베이스에서 저장된 데이터를 불러오거나 또는 방문객이 전송한 데이터를 저장할 때는 주로 서버 측 스크립트 언어를 사용함.

- 예)

사이트 방문객이 로그인 폼에 아이디와 비밀번호를 입력하였다.

작성을 완료한 후 로그인 버튼을 눌렀을 때 등록된 회원인지를 검사하기 전에, 먼저 올바른 아이디와 비밀번호의 형식에 맞게 작성했는지 검사가 이루어져야 함.

이때는 방문자 컴퓨터에서 프로그래밍이 수행되어 올바른 아이디와 비밀번호 형식인지 체크해도 되므로 클라이언트 측 언어인 자바스크립트 또는 제이쿼리를 사용함.

그리고 이어서 형식에 올바르게 아이디와 비밀번호를 작성하였다면 액션(Action) 페이지인 서버 사이드 측 스크립트 페이지에 방문자가 입력한 아이디와 비밀번호 데이터를 전송하여 데이터베이스에 일치하는 아이디와 비밀번호가 존재하는지의 여부를 검사함.

검사해서 만일 존재할 경우에는 "ㅇㅇㅇ님 방문을 환영합니다!"라고 값을 되돌려 주고, 존재하지 않을 경우에는 "아이디 또는 비밀번호가 일치하지 않습니다."라고 값을 되돌려 줌.

 

* 웹 서버와 웹 호스팅의 차이점

- 웹 서버와 웹 호스팅은 둘 다 방문객인 클라이언트(Client)에게 웹 서비스를 제공함.

- 하지만, 웹 서버의 경우는 사용자가 직접 컴퓨터에 서버(Server)를 구축하여 웹 서비스를 제공하므로 웹 서버에 대한 전문 지식이 있어야 하며, 전용 회선을 갖추고 있어야 사용할 수 있음.

- 웹 호스팅의 경우는 이미 서버가 구축된 외부 컴퓨터에 다수의 이용자가 소량의 저장 공간을 나눠 임대하여 사용하는 것을 가리킴.

- 그러므로 서버에 대한 전문 지식이 없어도 사용할 수 있으나, 저장 공간 용량의 제한이 있다는 단점이 있음.

 

 

내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)