JS : Event, AJAX, JSON

Event

HTML 문서를 객체화하는 DOM으로 인해, 자바스크립트와 같은 스크립팅 언어를 통해 HTML 문서 내에 특정 요소에 접근할 수 있게 됐다. 문서 전체를 다시 로딩하는 대신, 특정 요소에 접근 후 event를 부여하여 일부분만 변경할 수 있다. 클릭 이벤트, 마우스 이벤트, 스크롤 이벤트 등의 이벤트를 감지하고 그에 맞는 함수를 실행할 수 있다.

 

Addeventlistener

특정 요소에 이벤트를 부여할 때 사용하는 함수. 요소.addEventlistener (이벤트 종류, 함수)의 형태로 지정할 수 있다.

감지할 수 있는 이벤트의 종류로는 : click, dblclick, mousedown, mouseenter, mousemove 등이 있다. (참고)

 

AJAX

ajax는 Asynchronous Javascript and XML의 약자로, 브라우저 내의 객체인 XMLHttpRequest를 사용하여 전체 문서를 새로 재 로드하지 않고도 페이지의 일부만을 로드하는 방법을 뜻한다.

 

이전에는 클라이언트에서 request를 보내고, 서버에서 Response를 받으면 이어졌던 연결이 끊겼기 때문에, 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 받아와야했다. 따라서 페이지의 아주 작은 요소만을 불러오는 데에도 다시 페이지를 로드해야했기 때문에 불편함이 발생했는데, AJAX는 비동기적으로 데이터를 가져오도록하는 특성 때문에, 페이지 로딩 시간을 절약할 수 있는 방식이었다.

 

JSON

자바스크립트 객체 문법을 따르는 데이터 포맷을 말한다. 클라이언트와 서버에서 데이터를 주고받을 때 서로 다른 언어들 간의 데이터 교환 용이, 쉽고 단순하게 표기되어 개발자가 읽기 쉬운 정보만을 표기한다는 장점을 가지고 있다.

{
  "browsers": {
    "firefox": {
      "name": "Firefox",
      "pref_url": "about:config",
      "releases": {
        "1": {
          "release_date": "2004-11-09",
          "status": "retired",
          "engine": "Gecko",
          "engine_version": "1.7"
        }
      }
    }
  }
}