본문 바로가기
Programming/Node.js

[Node.js] JSON 데이터 Ajax에서 처리하기

by 코딩의성지 2019. 12. 22.

하이 ~~!!!

 

보통 웹페이지를 개발하다 보면 웹페이지를 비동기방식으로 처리해야할 때가 있다.

 

비동기 방식은 웹페이지를 리로드 하지 않고 데이터를 불러오는 방식을 의미한다. 기본적으로 Http 프로토콜은 클라이언트 쪽에서 request를 보내고 서버 쪽에서 response를 받으면 연결이 끊기기 때문에 화면을 갱신하기 위해서는 페이지 자체를 갱신해줘야한다. 이는 엄청난 자원낭비라고 할 수 있다. 

 

비동기 방식으로 여러분들이 처리를 해주면 필요한 데이터만 받아서 갱신하기 때문에 자원과 시간을 아낄 수가 있다. 

 

Ajax

 

Ajax가 바로 이 비동기 방식을 지원한다. Ajax는 java script 의 라이브러리중 하나인데 Asynchronous Javascript And Xml 의 약자이다. 오늘은 node.js 에서 클라이언트랑 서버간의 json을 주고 받는 걸 해볼예정이다.

 

우선 아래의 코드를 한번 작성해보자. ㅎㅎ 좀 길다.. ㅜㅡㅜ

간단하게 설명을 하자면 form 에 있는 데이터를 받아와서 서버로 request를 날리고 서버에서 json 형태로 데이터를 만들어서 response 해주면 그걸 비동기식으로 화면에 뿌려주는 소스다. 간단하게 말했는데 코드가 꽤 길다 ㅜㅡㅜ ㅎㅎ

혹시 소스를 보고 모르는 부분은 댓글로 남겨주길 바란다.

 

 

그리고 우리가 구동시키는 웹서버 데몬에다가 이러한 post 함수를 하나 추가해주자.

위에서 말한 것처럼 json 형태로 reponse 를 날려주는 부분이다.

 

 

이렇게하고 위에서 만든 ajaxtest.html을 브라우저 상에서 구동해보자.

이렇게 한 뒤에 send를 날려보면 ...!!! 

 

 

짠 !! 화면을 리로딩 하지 않고도 이렇게 결과가 출력되는 걸 볼 수 있다. ㅎㅎㅎ

 

오늘 포스팅은 여기서 마치겠다. 그럼 즐거운 코딩하자 !! ㅎㅎ

반응형

댓글