AJAX란?
AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다.
Asynchronous JavaScript + XML(AJAX)은 그 자체가 특정 기술은 아닙니다.
2005년 Jesse James Garrett이 처음 만들어낸 말로, HTML 또는 XHTML, CSS, JavaScript, DOM, XML, XSLT, 그리고 제일 중요한 XMLHttpRequest 객체를 비롯해 기존의 여러 기술을 사용하는 "새로운" 접근법을 설명하는 용어입니다.
이렇게 다양한 기술을 AJAX 모델로서 결합했을 때, 웹 어플리케이션은 전체 페이지를 새로 고칠 필요 없이 사용자 인터페이스에 빠르고 점진적인 업데이트를 적용할 수 있습니다.
덕분에 어플리케이션은 보다 빨라지고, 사용자 행동에 대한 반응성도 좋아집니다.
XMLHttpRequest
XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용됩니다.
전체 페이지의 새로고침없이도 URL 로부터 데이터를 받아올 수 있습니다.
이는 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해줍니다.
XMLHttpRequest 는 AJAX 프로그래밍에 주로 사용됩니다.
XMLHttpRequest는 오래되었고 새로 나온것이 fetch이다.
Fetch
네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다.
XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능합니다.
JSON
JSON 객체는 JavaScript Object Notation(JSON)을 분석하거나 값을 JSON으로 변환하는 메서드를 가지고 있습니다.
JSON을 직접 호출하거나 인스턴스를 생성할 수 없으며, 두 개의 메서드를 제외하면 자신만의 흥미로운 기능은 없습니다.
- JSON Parse (서버에서 데이터를 가져올때)
ㄴ JSON - > "JS Object"- JSON stringify (서버로 데이터를 보낼 때)
ㄴ "JS Object" -> JSON
서버란?
유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램일 뿐입니다.
네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램
유튜브 서버 : 유저가 영상 달라고 하면 영상 보내주는 프로그램
입니다.
서버에 데이터를 요청할 때는
- 어떤 데이터인지 url로 잘 기재해야하고
- 어떤 방법으로 요청할지 결정해야 (GET/POST 등)
데이터를 보내줍니다.
예를 들어서 쇼미더럭키짱이라는 네이버웹툰을 보고싶으면
https://comic.naver.com/webtoon/list?titleId=783054 여기로 GET요청하면 보내줍니다.
예를 들어서 독립일기라는 네이버웹툰을 보고싶으면
https://comic.naver.com/webtoon/list?titleId=748105 여기로 GET요청하면 보내줍니다.
GET/POST 요청하는 법?
GET요청은 서버에 있던 데이터를 읽고싶을 때 주로 사용하고
POST요청은 서버로 데이터를 보내고 싶을 때 사용합니다.
(서버는 유저데이터를 DB에 저장해주는 역할도 해서요)
PUT, DELETE 요청도 있긴 합니다.
GET요청을 날리고 싶으면 가장 쉬운 방법은 브라우저 주소창입니다.
거기에 url 적으면 그 곳으로 GET요청을 날려줍니다.
POST요청을 날리고 싶으면
<form action="요청할url" method="post"> 태그 이용하면 됩니다.
그럼 폼이 전송되었을 때 POST요청을 날려줍니다.
근데 GET, POST 요청을 저렇게 날리면 단점이 뭐냐면 브라우저가 새로고침됩니다.
Ajax란?
서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는
간단한 브라우저 기능을 Ajax라고 합니다.
그거 쓰면 새로고침 없이도 쇼핑몰 상품을 더 가져올 수도 있고
새로고침 없이도 댓글을 서버로 전송할 수도 있고
그런 기능을 만들 수 있는 것임
jQuery로 Ajax요청하기
$.get() 라는 함수를 쓰고 안에 url만 잘 기입하면 됩니다.
연습삼아서 https://codingapple1.github.io/hello.txt 여기로 GET요청해보십시오.
그럼 인삿말을 하나 가져올 수 있습니다.
$.get('https://codingapple1.github.io/hello.txt');
이러면 진짜 데이터 가져옵니다.
안되면 html파일 미리보기가 제대로 안떠있는 것입니다.
브라우저 주소창에 127.0.0.1:어쩌구 이렇게 떠있어야합니다.
VScode는 live server 익스텐션 설치하면 됩니다.
$.get('https://codingapple1.github.io/hello.txt').done(function(data){
console.log(data)
});근데 가져온 데이터가 어디 들어있냐면
.done 아니면 .then 뒤에 붙이고 콜백함수넣고 파라미터 하나 만들면 거기에 들어있습니다.
$.post('url~~', {name : 'kim'})서버로 데이터를 보낼 수 있는 POST요청을 날리고 싶으면 이렇게 씁니다.
url 잘 적고 뒤에 서버로 보낼 데이터를 적으면 됩니다.
당연히 얘도 .done 이런거 붙이기 가능
$.get('https://codingapple1.github.io/hello.txt')
.done(function(data){
console.log(data)
})
.fail(function(error){
console.log('실패함')
});ajax 요청 성공시 .done 안에 있는 코드를 실행해줍니다.
ajax 요청 실패시 .fail 안에 있는 코드를 실행해줍니다.
error 저거 출력해보면 에러관련 정보를 출력해줍니다. 그거 보고 디버깅하면 됩니다.
예를 들어 404 이런 에러코드는 url 이 잘못되었다는 뜻입니다.
done/fail 말고 then/catch 써도 됩니다.
쌩자바스크립트는 fetch써서 ajax 요청가능
fetch('https://codingapple1.github.io/price.json')
.then(res => res.json())
.then(function(data){
console.log(data)
})
.catch(function(error){
console.log('실패함')
});fetch 함수는 Edge 브라우저 이상에서만 동작합니다.
근데 코드가 한 줄 더 필요한 이유가 뭐냐면
서버와 데이터를 주고받을 때는 문자만 주고받을 수 있습니다.
array, object 이런거 전송불가능
근데 아까 { price : 5000 } 이런 object 무리없이 받아왔죠?
어떻게 한거냐면 object를 JSON으로 바꿔서 전송해줘서 그렇습니다.
array 아니면 object에 따옴표를 다 쳐서 '{ "price" : 5000 }' 대충 이렇게 만들면 JSON이라는 자료가 됩니다.
JSON은 문자로 인식하기 때문에 서버와 데이터주고받기가 가능합니다.
jQuery의 $.get() 이런건 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔줍니다.
하지만
기본함수 fetch() 이런건 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔주지 않습니다.
그래서 fetch() 로 가져온 결과를 array/object로 바꾸고 싶으면 res.json() 이런 코드 한 줄 추가하면 됩니다.
그게 귀찮으면 jQuery나 axios 이런 라이브러리 설치하면 ajax가 약간 더 간편해집니다.
