본문 바로가기
언어/자바스크립트

AJAX

by Rudy 2022. 1. 31.

Ajax

https://www.youtube.com/watch?v=V6R96Hzm8hY 

서버: 데이터 요구하면 데이터 보내주는 프로그램

  1. 원하는 데이터 URL을 무조건 알아야 한다.
  2. 그러면 그 URL로 GET 요청을 해야 한다.
    1. 검색창에 링크를 넣어서 GET 요청
    2. 버튼으로 GET 요청
    3. → 전부 브라우저가 새로고침됨
    4. AJAX로 GET 요청
    5. →새로고침없이 서버에게 GET요청하는 JS코드. 새로고침이 없기 때문에 웹페이지를 부드럽게 만들 수 있다.

최신 JS AJAX 방식


	fetch('<<a href=https://codingapple1.github.io/price.json>https://codingapple1.github.io/price.json</a>>')
.then((response)=>{
		if(!response.ok){
			throw new Error('500 Error')
			}
		return response.json()
})
.then((result)=>{
	console.log(result)
})
.catch(()=>{
	console.log('500 Error')
})

외부 라이브러리 방식도 있음

<script>
axios.get('<https://링크>')
	.then((result)=>{
		console.log(result.data)
}).catch(()=>{
		console.log('500 Error')
})
</script>

CORS 관련 에러: 데이터를 주고받을 때 발생하는 에러. 크롬 내부 규정때문에 주로 일어난다.

naver.com→kakao.com 으로 넘어가는 것은 안 됨

→ 다른 도메인으로 ajax 요청 불가능하다.

  • 토스앱 같은 경우는 Ajax로 다 처리할 수 없기 때문에(보안, CORS 관련 에러) 다른 방식으로 처리하고 있다. 비공개 처리? 그런거...

'언어 > 자바스크립트' 카테고리의 다른 글

확장성 있는 코드 짜기  (0) 2022.02.16

댓글