Ajax의 개요

Ajax는 설명을 더 해야 하겠지만 비동기 통신 방식입니다. 이때 서버와 통신하고 서버로부터 받아오는 데이터의 형식 중 하나가 JSON 데이터입니다. JSON 데이터는 너무 생소하기에 조금 살펴보는 시간을 가졌습니다.

이제 Ajax에 대해서 하나하나 살펴보아야 겠죠?

​

Ajax는 Asynchronous Javascript and XML의 약자로 자바스크립트와 XML을 이용하여 서버와 비동기 통신을 하는 방식입니다.

Ajax는 새로운 언어나 새로운 기술이 아니라 기존에 우리가 웹에서 잘 사용하던 HTML, CSS, JavaScript, DOM, XMLHttpRequest과 같은 언어와 기술을 잘 조합하여 사용하도록 합니다.

​Ajax는 개발자에게는 정말 꿈과 같은 기술입니다. 기존까지 우리가 사용하던 웹의 기술은 뭔가 수정하거나 조회하거나 다른 작업을 할 때마다 화면이 빤짝하면서 응답 페이지가 response 되었던 것을 기억하실 것입니다. 이는 서버에게 뭔가 요청하기 위해 작업했을 경우 전체 페이지를 다시 로딩해서 결과를 받아야 한다는 의미입니다.

Ajax를 이용하면 페이지의 리로딩 없이 웹 페이지를 수정할 수 있고, 페이지가 로딩된 후 서버로부터 데이터를 받아오거나 서버에게 데이터를 넘길 수 도 있습니다.

Ajax가 적용된 예를 살펴보도록 하겠습니다. 

구글 사이트에서 검색어를 입력하면 페이지 리로딩 없이 검색어 목록이 계속 변경됩니다. 이는 Ajax가 적용된 예입니다.

​

​

​가장 잘 구현되어 있는 곳이 구글맵입니다. daum 맵이나 네이버 맵도 마찬가지겠죠? 마커가 찍혀 있고 이동선이 출력되어 있어도 마우스로 드래그를 하면 드래그 한 지역의 지도가 보입니다. 물론 설정한 내용은 그대로 남아있습니다. 이렇게 화면 전체가 변경되지 않으면서 일부가 변경되는 것은 대부분 Ajax를 적용했다 생각하면 됩니다.

 

그러나 문제는 Ajax로 구현된 웹 페이지는 즐겨찾기에 추가할 수 없습니다. 또한 검색엔진으로 검색하거나 했을 때 검색되지 않습니다. 따라서 웹페이지를 작성 후에 많은 사람들이 검색엔진을 통해 검색하고 사용하기를 원한다면  Ajax를 이용하여 작업하지 않습니다.

​

수업할 때 보여드렸던 것처럼www.mnet.com에 접속해서 다음과 같은 화면을 즐겨찾기에 추가해 보도록 하겠습니다.

이 화면은 먼저 아티스트의 목록을 조회한 후 "TOP 100 진입곡"이라는 하이퍼링크를 클릭하면 보이는 화면으로, 서버 쪽에서 받아오는 데이터를 이용하여 보이도록 구성한 것입니다. 모든 아티스트 정보에서 아티스트명 아래쪽에 있는 링크를 클릭하면 수행되는 이 기능은 페이지의 새 로고 침 없이 즉, 이전에 요청했었던 내용이 없어지지 않고 처리가 됩니다. 내부적으로 어떤 기술을 써서 개발했는지 정확하게 알 수는 없으나 이러한 처리는 거의 Ajax기술을 이용하여 개발되어집니다.

 

새 브라우저를 열고 즐겨찾기에 추가한 화면을 요청하면 다음과 같이 Ajax로 처리했던 부분은 history에 남아있지 않으므로 나타나지 않는 것을 확인할 수 있습니다.

​

이런 문제점들 때문에 많은 웹의 사용자들이 검색해 보기를 원하는 검색, 목록, 상세보기 등은 Ajax로 구현하지 않고 등록, 수정, 결제내역 입력,... 기록을 사용자들이 남겨야 하는 것들은 Ajax로 구현하면 편리할 것입니다.

모든 내용을 입력하고 서버에 저장해야 하는 경우 뭔가 잘 못 입력되었거나 할 경우 서버에 접속했다가 응답이 되므로 모두 클리어가 되어 버립니다. 이 경우 Ajax를 이용한다면 화면에 사용자가 입력한 내용이 없어지지 않으니 편리할 것입니다.