서버

• 유저가 요청 시 데이터를 보내주는 프로그램
• 서버와 데이터를 주고받을 때 데이터는 문자만 가능

서버로 데이터 요청시 필요사항

• 데이터 URL
• 요청 방법(GET/POST)

GET 요청

서버에 있는 데이터를 읽고 싶을 때

POST 요청

서버로 데이터 보낼 때

GET, POST 모두 브라우저 url에서 직접 요청할 수 있으나 새로고침이 되는 단점이 있다

Ajax

서버에 데이터 요청 시 새로고침 없이 데이터 주고받을 수 있게 하는 브라우저 기능
ex) 새로고침 없이도 상품 더보기 가능 등

jQuery로 Ajax 요청하기

$.get()

$.get('url');

가져온 데이터 출력하기

.done 또는 .then 붙이고 콜백함수(파라미터)

$.get('https://abc.github/yummyfood.txt').done(function(a){
	console.log(a)
})

뒤에 .fail(콜백함수)/.catch(콜백함수) 붙이면 데이터 받기 실패했을 때 어떻게 할지도 설정 가능

$.get('https://abc.github/yummyfood.txt').done(function(e){
	console.log(e);
})
.fail(function(error){
	console.log('failed!');
})

//또는

$.get('https://abc.github/yummyfood.txt').then(function(e){
	console.log(e);
})
.catch(function(fail){
	console.log('failed!');
})

$.post()

$.post('url', 보낼 데이터)
나머지는 $.get()과 동일

자바스크립트로 Ajax GET 요청하기

• fetch 함수 사용
• Edge 브라우저 이상에서만 동작
• 방법은 jQuery와 동일하지만 중간에 then(res => res.json()) 추가

fetch('https://abc.github/yummyfood.txt')
  .then(res => res.json())
  .then(function(e){
	console.log(e);
})
.catch(function(fail){
	console.log('failed!');
})

• array, object 같은 배열을 그냥 자바스크립트로 요청하면 받을 수 없어서 jSON으로 바꿔서 문자 형식으로 만들어야 한다.