Ajax 알아보기
Ajax 란 ? 브라우저 위에서 다양한 표현을 가능하게 하는 기술, 비동기적
비동기적 : 어떠한 기능을 실행했을 때, 데이터를 불러오는 동안 다른 기능 실행 가능
동기적 : 어떠한 기능을 실행했을 때, 데이터를 불러오는 동안 다른 기능 실행 불가능
쉽게 말해, DB를 실제로 처리하기 전에 마치 DB를 처리한 것 처럼 사용자에게 미리 보여주는 것이다.
DB 는 보통 화면이 reload (새로고침) 된 후에 처리된다.
하지만 사용자들은
자신이 실행한 기능이 실시간으로, 빠르게 실행이 되는 것을 내 눈으로 직접 보고 싶어할 것이다.
그러한 사용자들을 위해 구현하는 일종의 속임수(?) 이다.
실제로 DB 처리가 빠르게 되는 것은 아니다..ㅎ
에를 들어, 이런 식으로 화면에 상품이 나열되어 있다.
이 때, 사용자는 상품의 정보를 직접 수정하기를 원할 수도 있다.
그래서 상품 수정 버튼을 클릭하면,
수정 창이 뜨게 된다.
창 안에 본인이 원하는 상품의 정보 (이 예시에선 상품의 이름) 를 입력한 후, 수정 버튼을 클릭하면
새로고침 없이 바로 이름이 수정이 된다.
이 때, DB에 담긴 상품의 정보 (이 예시에선 상품의 이름) 는 아직 변경되지 않았다.
하지만 사용자에게 변경이 된 것처럼 미리 보여줌으로써, 기능이 바로 실행이 된 것처럼 느끼게 해준다.
예시 하나를 더 봐보자.
똑같은 웹 사이트 상에서 이번엔 상품을 정렬하고자 한다.
상단에 있는 '낮은 가격순' 버튼을 클릭하면 다음과 같이 상품이 낮은 가격의 상품부터 정렬이 되어 나타난다.
이 또한 ajax를 이용해 새로고침 없이 구현한 것이다.
이제 실제 코드를 보며 익혀보자.
코드 예시는 2번째 '정렬 기능' 의 예시이다.
1. 우선 정렬을 위해 Controller의 action을 하나 생성해준다.
sort 라는 action 안에 상품들을 가격순으로 정렬한 값을 다음과 같이 products_price 에 담았다.
그 다음, ajax를 사용하기 위해 json 형태로 값 (상품들을 가격순으로 정렬한 값) 을 render 해 줄 것이다.
만약, json 형태로 넘겨줄 값이 여러개 인 경우에는
다음과 같이 작성해주면 된다.
2. 그 다음 그 action 을 사용하기 위해 routing 을 해준다.
product 컨트롤러의 sort 액션은 /sort 라는 route 를 통해 데이터를 주고 받는다.
3. 이제 ajax를 구현할 것이다.
일반적인 ajax 문법은 다음과 같다.
url은 ajax를 통해 데이터를 주고 받을 url 을 의미한다.
type 은 데이터를 처리할 타입 (GET / POST / UPDATE / DELETE) 을 의미한다.
data는 조금 헷갈릴 수가 있는데,
B라는 값을 받아와서 A 데이터에 저장하는 것이다.
이 예시에서는, sort_price라는 함수를 불러올 때 B 값으로 "ok" 를 지정해 주었다.
이 ok 값은 ajax를 통해 A 라는 params 에 담기게 된다.
이 params 는 controller에서 사용할 수가 있다.
1번의 코드를 보면
if params[:A] == "ok"
라는 코드가 있다.
이 것은 즉, 'A라는 params의 값이 ok 라면'
이라는 의미이다.
이 예시에서는 A 값이 ok가 맞기 때문에 controller 안의 if 문이 실행될 것이다.
success:function(product) {} 는 데이터 처리가 성공했을 때 실행할 코드를 적는 block {} 이다.
이 때 function 안에 product는 controller에서 json 형태로 render 해준 값이다.
즉, 이 예시에서는 @products_price 값이 json 형태로 넘어와서
product에 @products_price 값을 넘겨주게 된다.
이와 같이 Controller, router, View, Model 을 통해 ajax가 구현이 된다.
이와 같은 MVC 개념을 익혀둔다면, ajax 이해가 좀 더 쉬울 것이다.
데이터 수정, 삭제, 생성과 같은 데이터 처리를 위해 자주 쓰이는 기술이기 때문에 실제 코드 작성을 통해 자주 익혀보아야 겠다.
