Ajax는 서버와 데이터를 주고받는 방법 중 하나입니다.
서버란?
유저가 데이터를 요청하면 데이터를 보내주는 간단한 프로그램입니다.
서버에 데이터를 요청할 때는
1. 어떤 데이터인지 url로 잘 기재해야하고
2. 어떤 방법(GET/POST)으로 요청할 것인지 결정해야 데이터를 보내줍니다.
GET/POST 요청하는 법?
- GET : 서버에서 데이터를 읽고싶을때
- POST : 서버로 데이터를 보낼고싶을때 사용합니다.
GET요청을 날리는 가장 쉬운 방법은 브라우저 주소창에 url을 적으면 그곳으로 GET요청을 날려줍니다.
POST요청을 날리고 싶으면
<form action="요청할url" method="post">태그를 이용하면 됩니다.
그럼 폼이 전송되었을 때 POST요청을 날려줍니다.
근데 GET, POST 요청을 저렇게 날리면 브라우저가 새로고침됩니다.
Ajax란?
서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능을 Ajax라고 합니다.
Ajax를 쓰면
새로고침 없이 쇼핑몰 상품을 더 가져오거나,
새로고침 없이 댓글을 서버로 전송하는 기능을 만들 수 있습니다.
jQuery로 Ajax요청하기
$.get() 함수를 쓰고 안에 url을 잘 기입해주면 됩니다.
GET
$.get('https://url~~.txt');이런식으로 써주면 데이터를 가져옵니다.
$.get('https://url~~.txt').done(function(data){
console.log(data)
});가져온 데이터는
.done 아니면 .then을 뒤에 붙이고 콜백함수를 넣고 파라미터 하나를 만들면 거기 들어가게 됩니다.
POST
$.post('url~~', {name : 'kim'})서버로 데이터를 보내고 싶을땐 이렇게 작성해주면 됩니다.
url을 잘 적고 뒤에 서버로 보낸 데이터를 적어주면 됩니다.
(얘도 .done이런거 붙이기 가능)
Ajax 요청 성공/실패 시
$.get('https://url~~.txt')
.done(function(data){
console.log(data)
})
.fail(function(error){
console.log('실패함')
});Ajax 요청 성공 시, .done 안에 있는 코드를 실행하고,
Ajax 요청 실패 시, .fail 안에 있는 코드를 실행해 줍니다.
실패시 함수 파라미터 안에 들어가 있는 error을 출력해보면 에러 관련 정보를 출려해줍니다.
(이걸 보고 디버깅 하면 됨)
done/fail 말고 then/catch를 써도 가능!
생자바스크립트(fetch)를 사용해서 Ajax 요청하기
fetch('https://url~~.json')
.then(res => res.json())
.then(function(data){
console.log(data)
}).catch(function(error){
console.log('실패..')
})fetch함수는 Edge브라우저 이상에서만 동작합니다.
근데 코드 한 줄이 더 필요한 이유는
서버와 데이터를 주고받을 때는 문자만 주고받을 수 있습니다.
그래서 array, object같은 경우는 전송이 불가능한거죠.
그래서 array나 object에 { "price" : 5000 }이런식으로 따옴표를 다 쳐서 JSON형식으로 변환해서 전송해주면
json은 문자로 인식하기 때문에 서버와 데이터를 주고받을 수 있게 됩니다.
jQuery의 $.get()은 JSON으로 자료가 도착하면 알아서 array/object자료로 바꿔줍니다.
하지만 기본함수인 fetch()는 JSON으로 자료가 도착해도 알아서 array/object자료로 바꿔주지 못하기 때문에 res.josn()이런 코드를 한 줄 추가해야 하는 겁니다.
귀찮으면 jQuery나 axios같은 라이브러리를 설치하면 ajax가 약간 더 간편해짐.
다음번에는 ajax를 이용해서 자바스트리트로 카드레이아웃 3개를 생성해보기를 해보겠습니다
#Summary
Ajax란?
GET/POST로 서버에 데이터를 요청할때 새로고침없이 데이터를 주고받을 수 있게 도와주는 기능
