25장. 비동기식 처리 모델과 Ajax

[ 목차 ]

1.Ajax

2. JSON

3. JASON.stringify

4. JSON.parse

5. XMLHttpRequest

6. Load JSONP

7. 동일출처원칙을 위회하는 방법

 

1. Ajax

1) 브라우저에서 웹페이지를 요청, 링크를 클릭하면 화면 갱신이 발생하며, 이는 브라우저와 서버와의 통신에 의한 것

2) 서버는 요청받은 페이지를 반환할 때 HTML에서 로드하는 CSS나 JavaScript 파일도 같이 반환

3) 서버로부터 웹페이지가 반환되면 클라이언트는 이를 랜더링하여 화면에 표시

4) Ajax는 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미

5) 서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데, 페이지 일부만을 갱신하고 동일한 효과룰 보는 것

6) 빠른 퍼포먼스와 부드러운 화면 표시 효과를 기대 가능

 

2. JSON

1) 클라이언트와 서버 간 데이터 교환을 위한 규칙 즉 데이터 포맷을 의미

2) 일반 텍스트 포맷보다 효과적인 데이터 구조화가 가능하며 XML 포맷보다 가볍고 간편하며 가독성이 좋음

3) 자바스크립트의 객체 리터럴과 매우 흡사하지만 순수한 텍스트로 구성된 규칙이 있는 데이터 구조

4) 키는 반드시 큰따옴표로 둘러싸야 함

 

3. JASON.stringify

1) 객체를 JASON 형식의 문자열로 변환

2) JASON formatter를 이용해 결과를 보기 좋게 정렬 가능

  ex. https://jsonformatter.curiousconcept.com/

JSON Formatter & Validator

 

4. JSON.parse

1) JSON 데이터를 가진 문자열을 개체로 변환

2) 배열이 JSON 형식의 문자열로 변환되어 있는 경우 문자여을 객체로 변환

3) 배열의 요소가 객체인 경우 배열의 요소까지 객체로 변환

 

5. XMLHttpRequest

1) 브라우저는 XMLHttpRequest 객체를 이용하여 Ajax 요청을 생성하고 전송

2) 서버가 브라우저의 요청에 대해 응답을 반환하면 같은 XMLHttpRequest 객체가 그 결과를 처리 

3) Ajax request

 

6. Load JSONP

1) 요청에 의해 웹페이지가 전달된 서버와 동일한 도메인의 서버로 부터 전달된 데이터는 문제없이 처리할수 있음

2) 보안상의 이유로 다른 도메인으로의 요청은 제한되며, 이는 동일출처원칙이라고 표현

 

7. 동일출처원칙을 위회하는 방법

1) 웹서버의 프록시 파일

  1] 서버에 원격 서버로부터 데이터를 수집하는 별도의 기능을 추가하는 것. 프록시

2) JSONP

  1] script 태그의 원본 주소에 대한 제약은 존재하지 않는데 이것을 이용하여 다른 도메인의 서버에서 데이터를 수집하는 방법

3) Cross-Roigin Resource Sharing

  1] HTTP 헤더에 추가적으로 정보를 추가하여 브라우저와 서버가 서로 통신해야 한다는 사실을 알게하는 방법

  2] 최신 브라우저에서만 동작하며 서버에 http 헤더를 서설정해주어야 함