AJAX & JSON

< AJAX : Asynchronous JavaScript And XML >

브라우저에서 페이지를 이동하지 않고 

자바스크립트를 통해 HTTP REQUEST를 보내고

그 응답을 받아 처리할 수 있는 기술

페이지 이동없이 서버와의 통신이 가능하여 

최근 대부분의 웹사이트가 사용하고 있다.

로컬의 파일을 받아오는 코드이다. 

* 브라우져에서 CORS ( 크로스 원본 요청 ) 이라는 것의 보안적 문제점 때문에 

  로컬 파일을 부르는 것을 막는데 크롬 기준으로 --allow-file-access-from-files 옵션을 통해

  해결 가능하다. *

첫째 줄을 보면 XMLHttpRequest 객체를 생성하고 있다.

XMLHttpRequest는 MS사에서 HTTP를 통해서 쉽게 데이터를 받도록 만든 객체 ( object ) 이다.

두번째 줄을 보면 open 메소드를 이용하고 있다.

해당 메소드를 Request를 만드는 함수라 보면 된다.

XMLHttpRequest.open(method, url, async, user, password)

api문서의 설명이다.

최소 method와 url 인자를 보내야 한다. 

async는 비동기적으로 처리할 여부를 묻고 있는데 기본 값은 true이다.

async값을 false로 하면 동기처리가 되며 잘 처리하지 못하면 UI가 멈추는 참사가 발생 할 수 있다.

비동기적으로 처리되기 때문에 자바스크립트 상에서 

send 메소드 후에 바로 response 내용을 보려하면 비어있는걸로 뜨게 된다.

세번째 줄을 보면 send 메소드를 통해 HTTP Request를 전달하고 있다.

XMLHttpRequest.send(body)

보낼 body가 없을 경우 기본 값 void로 send() 로도 처리 가능하다.

그렇다면 비동기 식 처리 상황에서 

리퀘스트의 이벤트를 어떻게 처리할까?

답은 이벤트 핸들러인 onreadystatechange 이다.

XMLHttpRequest.onreadystatechange = callback;

해당 이벤트 핸들러를 통해 이벤트가 처리되는 동안에 콜백함수 내에서 처리가능한 것이다.

그렇다면 이벤트가 처리되는 상태는 어떻게 알 수 있을까?

해당 객체의 필드 값인 readyState와 status가 있다.

readyState는 0,1,2,3,4의 5 단계로 나뉜다.

 0 : open 메소드 호출 전 객체가 생성된 상태

 1 : open 메소드 호출 후 리퀘스트가 초기화된 상태

 2 : 보낸 요청에 대해 응답에 헤더가 수신된 상태

 3 : 응답 메세지의 바디 부분이 수신중인 상태

 4 : 완료된 상태

또한 status는 HTTP STATUS CODE와 동일하다.

 200 : OK

 404 : NOT FOUND

 403 : Forbidden

 ...

 0 : 로컬 파일의 경우 이렇게 뜬다.

< JSON :  JavaScript Object Notification >

속성 - 값 쌍으로 이루어진 데이터 객체를 전달할 때 사용하는 데이터 포맷

Javascript의 구문 형식을 따르지만 언어 독립형 데이터 포맷이다.

확장자는 .json을 사용하고

공식 미디어 타입은 application/json 이다.

JSON이 지원하는 자료형은 수, 문자열, 참-거짓, 배열, 객체로 

메소드나 undefined 된 것은 누락된다.

JSON 객체의 예를 들어 보았다. 

, 로 구분되고 있다.

eval 명령을 통해 사용가능하나 

보안적 문제점 때문에 JSON 전용 Parser를 사용하는 것이 안전하다.

대부분의 웹 브라우저에서  JSON 객체의 parse 메소드를 통해 파싱가능하다.

JSON과 AJAX를 활용하는 코드를 짜보았다.

10~13번째 줄을 설명해주자면

10번 줄에서 p 엘리먼트를 복사하여 

11번째 , 12번째 줄에서 

p 엘리먼트의 자식 노드인 span 에 innerText를 JSON 파싱된 데이터로 설정 후 

13번째 줄에서 추가해주는 것이다.

실행 결과이다.