Jeonghun (James) Lee: Javascript 과 AJAX 와 차트(Chart) 관련 자료

5/26/2016

Javascript 과 AJAX 와 차트(Chart) 관련 자료

1. HTTP의 기본개념

HTTP는 기본적으로 Client가 Methods기반의 TEXT를 Server에게 보내면 Server가 해당하는 일을 처리하고 Server 상태정보와 함께 관련된 값을 전송을 해주는 것이다.

예를들면 Client가 GET or POST로 Server에게 보내면 200 OK 함께 통신의 성공여부와 함께 관련 데이타를 보내주는 것이다.

  https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
  https://ko.wikipedia.org/wiki/HTTP

HTTP Protocol을 이해하면, SIP/RTSP등 IETF에서 만든 Protocol을 기본적으로 쉽게 이해하며, Protocol 구조가 TEXT기반으로 거의 유사하다

1.1 AJAX의 기본개념

AJAX (Asynchronous JavaScript and XML)의 약어로 Client와 Server 양쪽에서 사용되어지는 Web 기술이다.

기존은 HTTP 1.1 기준으로 Web browser에서 HTTP를 이용하여 Client가 Server에게 Request (Get or Post)보내면 이에 해당하는 응답(200 OK) 함께 해당 HTML 을 제공해주는 방식이었다.
(물론 HTML과 CSS , Javascript 이 전부포함하여 전체 Web Page, 즉 HTML를 제공해준다)

하지만 기존의 HTTP에는 근본적인 문제가 있다. Client가 Server로부터 주기적으로 관련 Data를 받고자 한다면, Web Server 부하가 심해진다.
왜냐하면, Web의 통신주체는 항상 Client이며, 관련된 Data 및 Web Page의 변경을 원한다면 Client가 요구가 있을 경우 변경되는 것이 HTTP Protocol의 문제이다.

이런 문제를 조금이나마 극복하고자 나온 기술이 AJAX이며 그 기술은 다음과 같다.
전체 Web Page를 Refresh or Update를 하는 것이 아니라 부분적으로 가능한 것이다.
이는 기존의 Web에서 Client가 값을 얻고 저장하는 방식이 GET/POST 방식을 넘어 다른 매개체를 이용하여 Web Server에게 통신을 하는 것이다.

1.2 기존 Web 모델과 AJAX Engine 모델 비교

아래의 두 개의 Web Server 모델을 간단히 비교 분석을 해보자

좌측은 기존에 사용되었던 Web Server와 Client모델이며, 항상 Client가 요구시에만 Web Page의 반응을 하는 구조를 가지고 있다.

우측은 AJAX Engine지원이되는 모델이며 이는 Browser(Client)와 Web Server가 동시에 지원이 가능해야한다.
우선 기존모델에는 Web Server을 지원을 하며, 이와 더불어 AJAX Engine이라고 하는 것이 별도로 존재한다.
이는 기본의 Client와 Server 통신을 확장되어 Javascript에 의해 JSON, XML, HTML으로 Data를 Server에 전송하고 응답이 가능하다.

아래의 링크에도 자세한 설명이 포함이 되어있다.

https://en.wikipedia.org/wiki/Ajax_(programming)

아래의 그림을 보고 확장된 기능을 정확히 알아보자. Client는 Server의 상태를 매번 정확히 알고 싶을 경우가 있을 것이다.
이때 기존의 경우는 매번 HTTP를 Request를 해서 값을 얻어 전체 Web Page를 매번 가져와야한다.
하지만, AJAX를 이용한다고 하면, Client는 Javascript을 이용하여 주기적으로 해당값들을 Refresh가 가능하다. 이는 시스템의 부하의 영향이 달라진다.

이 과정을 살펴보면, Client는 Web Server로 전송하는 Request Data를 JSON/XML/HTML로 전송하여, 특정 HTML을 Refresh를 해주면 된다.
(Javascript의 value값을 Refresh가 가능하고, HTML의 값이 가능하다는 소리이다.)

http://stackoverflow.com/questions/11028122/how-update-panel-do-partial-postback-and-server-side-function-is-invoked-and-con

AJAX 관련 자료 (일반적인 개념 및 관련자료)

  https://developer.mozilla.org/ko/docs/AJAX/Getting_Started
  https://taegon.kim/archives/206

1.2 AJAX 통신 DATA 매개체

Web Client는 Web Server로 부터 Data를 얻고 설정하기 위해서는 별도의 통신 매개체를 필요하며, 이는 Client와 Server가 서로 호환이 되어야한다.

현재 알고 있는 방식으로는 Web Client는 XML/JSON/HTML 방식으로 DATA를 요구하고 Web Server를 이해 해당하는 함수를 호출하여 Data값을 전송을 한다.

쉽게 예를 들면, Javascript의 특정변수 값을 주기적으로 받고자 하면, XML로 이를 넣어 Server에게 보내며, Server는 이에 관련된 Refresh하는 것이다.
많이 XML을 이용하여 Server의 원하는 Data를 얻겠지만 JSON이라는 것을 이용하여 얻는다고고 한다.

  https://www.w3schools.com/xml/ajax_intro.asp

A. JSON(JavaScript Object Notation)의 개념

  http://www.json.org/json-ko.html
https://ko.wikipedia.org/wiki/JSON

B. AJAX에서 JSON을 이용하여 Data 가져오기

  http://code.jquery.com/
http://et-day.tistory.com/entry/Javascript-ajax-%EB%A1%9C-JSON-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0

C. JQUERY-JSON GET, POST

  http://api.jquery.com/jquery.getjson/
https://api.jquery.com/jquery.post/

1.3 AJAX의 사용법

이 에 대해 좀 더 자세히 알고 싶다면, XmlHttpRequest 관련하여 검색을 해보거나, AJAX로 검색을 해보면 자세한 설명이 잘 나올 것이다.
많은 사람들이 JQUERY Library를 이용하여 사용하는 것 같으며 이와 관련부분을 알아보자.
상위 사이트에서 알아보자

아래의 그림을 설명과 Client와 Server를 보고 참고만 하자
  https://en.wikipedia.org/wiki/DWR_(Java)

좌측의 메뉴 AJAX HOME부터 차례대로 예제를 실행 TEST가 가능
  http://www.w3schools.com/ajax/default.asp
  http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

2. AJAX 적용소스 (Chart관련부분)

아래의 Chart 소스는 AJAX를 적용했던 Chart 소스였으며, 이전에 이를 이용하여 Active-X와 연결하여 사용했던 일이 있다.
아래의 소스가 너무 좋은 예제이어서 지금도 기억을 하고 있다.

  http://www.flotcharts.org/
http://www.flotcharts.org/flot/examples/realtime/index.html

이외에도 구글에서도 다양한 Chart를 제공을 한다.

2.1 기타 Javascript Chart 소스 및 참고 소스

SVG와 VML관련 자료 및 Chart

SVG를 이용하여 Chart or 간단한 그림을 만드는 법을 소개하고 있다.
http://mobicon.tistory.com/311

Google AJAX

http://www.htmldrive.net/items/show/1291/-CSS3-and-jQuery-Interactive-Graph
https://developers.google.com/speed/libraries/#jquery

Web Design 및 관련 Interface 참고 사이트

http://blog.outsider.ne.kr/422
http://iyfnzgb.com/?pid=9PO1H9V71&dn=webdesigneraid.com

Node.js 와 AJAX 차이

https://stackoverflow.com/questions/12089982/difference-between-ajax-and-node-js

Node.js

  https://www.w3schools.com/nodejs/default.asp

3. ESP8266 AJAX

ESP8266는 WIFI관련 제어모듈이며, (AP/STA 제어가 가능) 이곳에 HTTP Server도 지원이 가능하다 물론 모듈형태로 제공이되어 Firmware Upgrade로 가능하다

아래예제들을 보며 느낀 것이 최근나온 모델은 별도의 많은 연산이 필요 없다면 MCU 조차 필요가 없을 것 같다.

이에 관련응용은 참으로 신기할 뿐이며, AJAX 및 Web socket이라는 것을 처음알게된 사이트이며, 정말 감사할 뿐이다.

  http://www.hardcopyworld.com/gnuboard5/bbs/board.php?bo_table=lecture_esp&wr_id=39
  http://www.hardcopyworld.com/gnuboard5/bbs/board.php?bo_table=lecture_esp&wr_id=41