ajax란?
서버와 데이터를 주고 받는 방법 중 하나로 새로 고침 없이 get, post요청하는 기능을 말함
새로 고침없이 쇼핑몰 상품을 더 가져오거나 새로고침 없이 댓글을 서버로 전송하는 기능을 만들 수 있음
서버란?
유저가 데이터를 요청하면 데이터를 보내줌
서버에 데이터를 요청할 때
1. 어떤 데이터 url인지 잘 기재해야 함
2. 어떤 방법(get/post)으로 요청할 것인지를 결정
get/post 요청하는 법
get: 서버에서 데이터를 읽고 싶을 때
post: 서버로 데이터를 보내고 싶을 떄
get사용법
브라우저 주소창에 url 을 적으면 그곳으로 get요청을 날려줌
post 사용법
<form action="요청할 url" method="post">
jquery로 ajax 요청하기
get요청하는 법
$.get('url~~');
$.get('url~~').done(function(data){
console.log(data) // 여기서 data는 서버에서 받아온 데이터를 말함
})가져온 데이터는 .done아니면 .then을 뒤에 붙이고 콜백함수를 넣고 파라미터 하나를 만들면 거기 들어가게 됨
post요청하는 법
$.post('url~~', {name:'kim'})서버로 데이터를 보내고 싶을 때 url을 적고 뒤에 서버로 보낸 데이터를 적어줌
ajax 요청 성공/실패시
$.get('url~~').done(function(data){
console.log(data)
})
.fail(function(error){
console.log('실패함')
});요청 성공 시, .done안에 있는 코드를 실행
요청 실패 시, .fail안에 있는 코드를 실행
실패시에 함수 파라미터 안에 들어가 있는 error를 출력해보면 에러 관련 정보를 출력할 수 있음
done/fail말고 then/catch 사용 가능
자바스크립트 (fetch)를 사용해서 ajax 요청하기
fetch('url~~').then(res => res.json())
.then(function(data){
console.log(data)
}).catch(function(error){
console.log('실패..')
})코드 한줄이 더 필요한 이유 ?
서버와 데이터를 주고 받을 때 문자만 주고 받을 수 있음
따라서, array와 object같은 경우 전송이 불가능함
{"price":5000} 따옴표 사용하여 json형식으로 변환해서 전송해주면 문자로 인식하여 서버와 데이터를 주고 받을 수 있게 됨