Ajax는 서버와 비동기적으로 데이터를 주고 받는 자바스크립트 기술을 의미
...근데 Ajax가 서버와 비동기적으로 데이터를 주고 받는다?
이게 무슨말일까? ㄴO_Oㄱ ;;
하나하나 알아보자~!
1. 서버는 무엇일까?
(아니... 나는 Ajax가 궁금했는데 왠 서버...? => Ajax는 서버와 비동기적 통신을 하기 때문에 서버가 무엇인지 알아야 한다!)
* 서버는 유저가 데이터를 요구하면 데이터를 보내주는 프로그램이다.
유저 : 서버야 나 이거줘~
서버 : 오케이 ~ 그거 보내드림~
근데 서버한테 달라고하면 무조건 주는 것일까?
삐~ 아니다.
데이터를 요구하는 정확한 방법이 있다 그에 맞추어 요청한다.
첫번째. 데이터의 정확한 URL을 알아야한다.
두번째. 정확한 URL을 알았다면 해당하는 URL로 'GET 요청'을 한다.
예시 ) naver.com이란 URL로 GET 요청을 하면 naver를 화면에 보여준다.
URL을 보내서 GET 요청을 해서 가져오는 것은 알겠다..
근데 GET 요청? 이건 또 뭐지?? ㅠㅠ
GET 요청을 하는 방법
1. 주소창에 URL 을 입력하여 보내는 것, 이것이 GET 요청이다. => 보내면 데이터를 가져온다.
2. 버튼으로 GET 요청( html에서 <Form action="naver.com".. method="get"> ... <button type"submit">)
하지만 이렇게 보내면 브라우저가 새로고침을 하면서 데이터를 보내준다. 이것이 싫다며 3번으로 !
3. Ajax로 GET 요청( 새로고침 x, 서버에게 GET요청하는 JS코드 )
장점 : 새로운 데이터를 요구할 때 새로고침이 없이 보여주기때문에 유하게 볼 수 있다.
JavaScript를 써서 Ajax를 요청하는 방법
- 옛날 방식(길고 복잡하기 때문에 현재에는 잘 사용 안함.)
<script>
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
console.log(ajax.responseText)
}
}
};
ajax.open("GET", "https://www.naver.com", true);
ajax.send();
</script>
- 요즘 방식
1. '.then()' 활용
<script>
//fetch(URL) : fetch는 기본함수, 여기에 URL을 적으면 자동으로 GET요청을 한다.
fetch("http://www.naver.com)
//then함수 뒤에 콜백함수
.then((response) => {
return response.json() //콜백함수 안에있는 파라미터가 실제 수신한 데이터
})
.then((결과) = {
console.log(결과)
})
//만약, 에러처리를 하고 싶다면? catch!
.catch(() => {
console.log('에러')
})
</script><script>
//정확한 에러처리 => if문 처리
fetch("http://www.naver.com)
.then((response) => {
if(!response.ok) {
throw new Error('400 아니면 500 에러 발생')
}
return response.json()
})
.then((결과) = {
console.log(결과)
})
.catch(() => {
console.log('에러')
})
</script>
2. await() 활용
<script>
async function 데이터가져오는 함수() {
var response = await fetch('http://www.naver.com');
if(!response.ok) {
throw new Error('400 또는 500 에러발생');
}
var result = await response.jason();
console.log(result)
}
데이터가져오는 함수().catch(()=> {
console.log('에러발생')
});
</script>
이 외에도 외부라이브러리를 활용해서도 사용할 수 있다.