Ajax (비동기식 자바스크립트와 XML)
Asynchronous Javascript And XML- Js 통해 비동기식으로 서버에 데이터 요청하여 필요 데이터를 받아옴
- 전체 페이지 새로 고침 X , 변경 필요한 페이지 부분만 고치는 기법
- 화면 전환 없이 클라이언트,서버간 정보 교환이 목적
EX)
상품의 정렬 방식에 따라서 상품 리스트가 다르게 뿌려진다고 했을 때 정렬 방식을 바꿀때 마다 페이지를 리로드하는 것보단 정렬 방식을 바꿀 때(요청) 페이지에서 변해야 하는 부분은 상품 리스트 뿐이기에 비동기 방식을 이용해 해당 정렬에 맞는 데이터만 서버에 요청하여 데이터를 가져와 뿌려준다.
Ajax 의 장점
- 페이지 갱신 없이 서버와 비동기 통신을 가능하게 해줌
- 화면이 새로 로딩되는 것이 아니기에 속도면에서 성능 개선
- 별도의 플러그인 X
- http 전송 중에도 클라이언트가 웹 어플리케이션과 상호작용 O
API란 ?
API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)의 약자로 응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻함.
Web API란 ?
웹 API는 웹 애플리케이션 개발에서 다른 서비스에 요청을 보내고 응답을 받기 위해 정의된 명세를 일컫는다.
EX)
- 네이버 지도API : 쇼핑몰 약도 넣기
- 기상청 날씨API : 페이지에 날씨 표시하기
- 네이버 가격비교 API : 가격비교 정보 페이지에 삽입
-> 이처럼 API는 굉장히 많이 존재한다.
JSON이란 ?
Javascript Object notation이라는 축약어로 데이터를 전송할 때 많이 사용되는 경량의 DATA 교환 형식이다.
- Js에서 객체를 만들 때 사용하는 표현식을 의미
- 사람과 기계 모두 이해하기 쉬우며 용량이 작아 XML을 대체해 최근에 많이 사용
- JSON은 데이터 포맷일 뿐이며, 단순히 데이터를 표시하는 표현 방법
JSON 특징
- 서버와 클라이언트 간 교류에서 일반적으로 많이 사용
- Js 객체 표기법과 유사
- Js 이용하여 JSON 형식의 문서를 쉽게 Js 객체로 변환 O
- Js의 객체 형식을 기반으로 만들어짐
- 텍스트 형식일 뿐
- 특정 언어에 종속되지 않고, 대부분 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리 제공
Json vs XML
데이터를 나타낼 수 있는 방식은 여러가지가 있지만, 대표적인 것이 XML이고 이후 가장 많이 사용되는 것이 JSON이다.
XML
- 데이터 값 양쪽으로 태그가 있음
- HTML을 근본으로 했기에 최소한 표현을 위해 양쪽에 몇글자씩 있어야함
JSON
- 태그로 표현하기 보다 중괄호 형식으로 하며 키와 값의 쌍으로 표현이 간단하다.
{
"student" : [
{
"name" : "YoungJae",
"lastName" : "Park"
},
{
"name" : "GilDong",
"lastName" : "Hong"
},
{
"name" : "Zzangu",
"lastName" : "Sin"
},
]
}- key : value 가 존재할 수 있으며 항상 쌍따옴표를 이용해 표기
- 객체, 배열 등의 표기 사용
- 원하는 만큼 중첩 O
- Js의 undefined 형식은 사용할 수 없다.
JSON 형식 텍스트를 Js Object로 변환하기
// JSON 형식의 문자열
var jsonText = '{"name" : "YoungJae", "lastName" : "Park" }';
var jsObject = JSON.parse(jsonText);
var jsonText2 = JSON.stringify(jsObject);- JSON.parse(JSON 형식 문자열) : JSON 형식 텍스트를 Js 객체로 변환
- JSON.stringify(JSON 형식 문자열로 변환할 값) : Js 객체를 JSON 텍스트로 변환
