코딩애플 유튜브를 보고 작성하였습니다.

AJAX 🎅

JS 기술을 이용해 비동기적으로 서버와 통신할 수 있는 방법들

🧐 서버란 무엇일까요? 
간단설명 👉 데이터 요구하면 데이터 보내주는 프로그램

서버에 데이터를 요청하려면
1.원하는 데이터 URL
2.URL로 GET요청하기

2-1. GET 요청하기

• 1. form태그 method='get' 와 button type='submit'
     👉 브라우저가 새로고침되어 하얗게 번쩍 됩니다
• 2. AJAX로 GET요청
     💖새로고침 없이 서버에게 GET요청하는 JS코드💖

AJAX로 GET 요청해서 데이터가져오기

옛날 JS 방식

복잡해서 잘 안씀.

<script>
// XHR 객체를 생성합니다.
const ajax = new XMLHttpRequest();

ajax.onreadystatechange = () => { // readystate 가 변화하면 실행되는 이벤트리스너 입니다.

    if (ajax.readyState == 4 && ajax.status == "200") {

        console.log(ajax.responseText)

    }
};

ajax.open('GET', 'url',true); 
// 요청을 초기화합니다. 통신방법과 요청을 발신할 대상의 주소를 전달합니다.

ajax.send();
// 서버로 요청을 보냅니다. send 메소드가 실행되어야만 우리가 위에서 설정한 내용들이 의미를 가지게 됩니다.
</script>

요즘 방식1

<script>
fetch('URL주소') //GET요청 : 데이터를 가져옵니다.
	.then((response)=>{ 
    //갖고온 데이터를 출력하고싶으면 .then
    //이 콜백함수의 파라미터가 실제 수신한 데이터
    return response.json()  //파싱할수도있다.
	})
	.then((결과)=> { //파싱한 결과를 보고싶으면 또.then
    console.log(결과) 
	})

</script>

• 에러잡고싶으면

<script>
fetch('URL주소') //GET요청 : 데이터를 가져옵니다.
	.then((response)=>{ 
    if(!response.ok){
    throw new Error('400아니면 500에러남')
    }
    return response.json() 
	})
	.then((결과)=> { //파싱한 결과를 보고싶으면 또.then
    console.log(결과) 
	})
    .catch(()=> {
    console.log('에러남')
    })

</script>

요즘 방식2 - async 와 await

<script>
  async function 데이터가져오는함수() {
      let response = await fetch('URL')
      if(!response.ok){
      throw new Error('400아니면 500에러남')
      }
      let result = await response.json();
      console.log(result)
  }

  데이터가져오는함수().catch(() = {
      console.log('에러남');
  });
</script>

요즘 방식3 - 리액트,뷰 - axios 설치

<script src='https://cdnjs.어쩌구'></script>
<script>
	axios.get('url')
    .then((result)=>{
    	console.log(result.data) //콘솔창에 서버에서받아온 데이터가 잘 들어옵니다
    }).catch(()=>{
    	console.log('에러남')
    })
</script>

CORS 에러

코딩애플 유튜브 6:12 참고