언어공부/JavaScript&jQuery

제이쿼리(jQuery) 기초 문법 - 제이쿼리 비동기 방식 연동 (AJAX)

yeony 2021. 8. 9. 00:05

제이쿼리(jQuery) 기초 문법

제이쿼리 비동기 방식 연동 (AJAX)

Ajax(Asynchronous JavaScript and XML)란 비동기 방식의 Javascript와 XML을 가리킨다. 

 

  • 동기 방식 : 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있음.
  • 비동기 방식 : 서버에 신호를 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있음.

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

 

Ajax를 이용하면 사용자가 서버에 자료를 요청할 때 화면 전환 없이 요청한 자료를 전송받을 수 있다. 또한 자료를 요청할 경우 어느 정도 시간이 소요되는 데 반해서 Ajax를 이용하면 사용자가 기다릴 필요 없이 다른 작업을 바로 수행할 수 있다. 

 

Ajax 사용 전 방식

Ajax를 사용하지 않았을 경우에는 사용자(Client)가 자료를 요청하면 반드시 서버(Server)컴퓨터를 거쳐야만 자료를 요청할 수 있다. 이 방식으로 자료를 요청하면 잠시 페이지가 서버 스크립트(Server Script)페이지로 갱신되어 화면이 깜박 거리고 그동안 사용자는 어떤 작업도 할 수 없게 된다.

 

Ajax 사용 전 방식

 

Ajax 사용 후 방식

Ajax를 사용해 사용자가 서버(Server)에 자료를 요청할 경우 서버 스크립트(Server Script) 페이지를 거치지 않아도 자료를 받아올 수 있다. 즉 사용자(Client)는 서버에 자료를 요청하는 사이에도 다른 작업을 할 수 있다. 카페나 블로그의 게시글에 댓글을 달 때 페이지 전환 없이 바로 할 수 있는 것도 Ajax를 사용했기 때문이다. 그리고 페이스북의 댓글 기능과 구글 지도 등에도 사용되고 있다.

 

Ajax 사용 후 방식

 

 

웹 서버

Ajax를 테스트하려면 웹 서버(Web Server)가 필요하다. 웹 서버는 웹 서비스를 제공하는 컴퓨터를 말한다. 완성된 웹 문서를 컴퓨터에 저장만 하면 외부에 있는 사용자는 완성된 웹 문서를 볼 수 없어 서비스를 받을 수 없다. 외부에 있는 사용자가 완성된 웹 문서를 볼 수 있도록 하려면 웹 서버를 구축하고 웹 서버에 완성된 HTML 문서를 저장해야한다.

 

Ajax를 이용해 사용자가 폼에 입력 요소를 작성해서 데이터를 전송하고 응답을 요청하는 테스트를 수행하려면 웹 서버도 필요하지만 데이터를 전송하여 요청한 응답을 전송해 줄 액션 페이지(Action Page)도 필요하다.

이 때 일반적으로 이 액션 페이지는 서버 측 스크립트 페이지인 PHP, ASP, JSP를 이용해 작성한다. 서버 측 스크립트 페이지는 전송된 데이터를 이용하여 정상적인 데이터인지 검사한 후 응답값을 되돌려 전송해준다. 서버 측 스크립트 페이지는 서버 컴퓨터에 저장되어 있어야 정상적으로 작동한다.

 

* 서버 측 스크립트 언어

프로그래밍 언어는 크게 클라이언트 측 언어(JavaScript)와 서버 측 언어(PHP, ASP, JSP)로 나누어진다. 클라이언트 측 언어는 방문자의 컴퓨터에서 프로그래밍이 수행되지만, 서버 측 언어는 서버에서 프로그래밍이 수행된다. 그러므로 사이트에서 동적인 사용자 환경을 개발할 때는 주로 클라이언트 측 언어를 사용하고, 서버 측 데이터베이스에서 저장된 데이터를 불러오거나 사용자가 전송한 데이터를 저장할 때는 주로 서버 측 언어를 사용한다.

 

웹 서버와 웹 호스팅

서버를 구축하여 웹 서비스를 제공하는 방법에는 오토셋(Autoset)을 이용하여 서버를 직접 본인 컴퓨터에 설치하는 방법과 외부에 구축된 서버인 웹 호스팅을 임대하여 이용하는 방법이 있다. 

 

  • 웹 서버: 사용자가 직접 컴퓨터에 서버를 구축하여 웹 서비스를 제공하므로 웹 서버에 대한 전문 지식이 있어야 하며, 전용 회선을 갖추고 있어야 사용할 수 있다.
  • 웹 호스팅: 이미 서버가 구축된 외부 컴퓨터에 다수의 사용자가 소량의 저장 공간을 나눠 임대하여 사용하는 것을 말한다. 서버에 대한 전문 지식이 없어도 사용할 수 있다는 편리성은 있지만 저장 공간의 용량 제한이 있다.