Ajax 'Asynchonous JavaScript and Xml'
자바스크립트를 사용해 비동기적으로 서버로부터 데이터를 받을 수 있는 기술 - XMLhttpRequest
- Ajax를 사용하는 이유: 보다 나은 사용자경험(UX)의 제공
데이터의 형식
서버에서 보내는 데이터의 형식은 XML, JSON 등 여러가지가 있을 수 있는데, 자바스크립트를 사용하는 프로그램에서는 일반적으로 JSON을 사용한다.
JSON 'JavaScript Object Notation'
- 데이터를 "키"와 "값"으로 표현해 놓은 표기법
- 정적인 데이터만을 표현하는 방식, 모든 키는 큰 따옴표로 감싸줘야한다.
- JSON 확장 프로그램: 크롬에서 'JSON Formatter' 다운
서버 API
제이쿼리와 마찬가지로 외부로 공개된 모든 API는 다른 사람들이 사용하도록 만든 것이기때문에 그 사용법을 정리한 문서가 존재한다.
- API 사용
const API_URL = 'https:// ';- $get() 함수는 제이쿼리의 Ajax용 API로서, XMLhttpRequest를 추상화하여 서버에 데이터를 요청하고 가져오는 일을 매우 쉽게 할 수 있도록 도와준다.
jquery.get(url, data, success, dataType);
- data은 {} 빈 오브젝트로 표현
- success는 요청에 응답이 왔을 때 실행될 함수 '콜백 함수'템플릿
일종의 '틀'로서 동일한 모양이 반복될 때 용이하게 사용할 수 있는 기술
- 재사용 가능한 템플릿을 만들어 놓고, 필요할 때마다 복제해서 사용하면 편리하다 → 제이쿼리의 clone() 함수를 사용해 복제
메소드 체이닝
- clone()과 removeAttr()은 제이쿼리 오브젝트에서 실행하는 함수들이다.
// ex
var $elem = $('#item-template')
.clone();
.removeAttr('id');
$elem.find('.item-no').html(i+1);
// 'item-template'이란 id를 가진 엘리먼트를 복제한 후
// removeAttr() 함수를 사용하여 id를 삭제 : 프로그램 버그 방지- 복제한 템플릿에 원하는 값 세팅하기 find() 함수
주어진 특정 엘리먼트의 자식들에서만 찾는다. 이 경우에는 $elem에 속해있는 엘리먼트들만 검색. find() 함수를 사용해 늘 최소한의 범위 내에서 셀렉트하는 습관을 들여야 한다.
