Ajax/ Bootstrap

Ajax

- 웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법

- javascript의 XMLHttpRequest 객체로 데이터를 전달하고 비동기 방식으로 결과를 조회

- 화면 갱신이 없으므로 사용자 입장에서는 편리하지만, 동적으로 DOM을 구성해야 하므로 복잡

 

XMLHttpRequest 

- 자바스크립트가 Ajax 방식으로 통신할 때 사용하는 객체

- 실제 서버와의 통신은 브라우저의 ajax 엔진에서 수행

- readyState

값	의미	설명
0	Uninitialized	객체만 생성( open 메소드 호출 전)
1	Loading	open 메소드 호출
2	Loaded	send 메소드 호출. status의 헤더가 아직 도착되기 전 상태
3	Interactive	데이터 일부를 받은 상태
4	Completed	데이터 전부를 받은 상태

- status

값	텍스트	설명
200	OK	요청 성공
403	Forbidden	접근 거부
404	Not Found	페이지 없음
500	Internal Server Error	서버 오류 발생

 

GET 방식의 특징

- URL에 변수(데이터)를 포함시켜 요청한다.

- 데이터를 Header(헤더)에 포함하여 전송한다.

- URL에 데이터가 노출되어 보안에 취약하다.

- 전송하는 길이에 제한이 있다.

- 캐싱 할 수 있다.

 

POST 방식의 특징

- URL에 변수(데이터)를 노출하지 않고 요청한다.

- 데이터를 Body(바디)에 포함시킨다.

- URL 에 데이터가 노출되지 않아서 기본 보안은 되어있다.

- 전송하는 길이에 제한이 없다.

- 캐싱 할 수 없다.

 

데이터 전송 형식 : CSV

- Server와 Client는 주고 받을 데이터 형식을 맞춰야 함

- 대표적인 data형식은 CSV, XML, JSON 등이 있음

 

1. CSV

- 각 항목을 쉼표(,)로 구분해 데이터를 표현하는 방법

- 다른 두 형식에 비해 굉장히 짧다. 많은 양의 데이터 전송 시 유리

- 단, 각각의 데이터가 어떤 내용인지 파악하기 어렵다.

- contentType ="text/plain; charset=..."

ex) 2020111, 김싸피, A, 20

 

2. XML

- xml은 tag로 data를 표현함

- tag를 보면 각 데이터가 무엇을 의미하는지 파악 가능

- tag에 사용자 정의 속성을 넣을 수 있으므로 복잡한 data 전달 가능

- contentType = "text/xml;

 

3. JSON

- CSV와 XML의 단점을 극복한 형식

- javascript에서 사용하는 객체의 형식으로 data 표현

- Ajax 사용시 거의 표준으로 사용되는 data 표현 방식

- contentType : "application/json;

 

Ajax 특징

- 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능 (요청)

- 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해 전체 페이지를 새로 고치지 않아도 페이지의 일부만을 위한 데이터를 로드하는 기법

 

Bootstrap 특징

- 웹 페이지를 쉽게 만들 수 있다.

- 반응형 웹이다.

- 모바일 중심이다.

- 많은 자바스크립트 플러그인의 지원

- 정형화된 디자인에서 탈피했다.