브라우저-서버의 요청-응답

1. 서버로 요청을 보내는 코드

- 라이브러리가 없을 때 : 브라우저가 지원하는 XMLHttpRequest 객체를 이용한다.

- AJAX요청이 있을 때 : Axios 라이브러리를 사용한다.(HTML 아래에 스크립트를 추가한다.) => 편리함

 

  * Ajax (Asynchronous JavaScript and XML) : 자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식

  * 최근에는 XML 보다  JSON을 더 많이 사용한다.

 

2. 요청과 응답

- 브라우저는 Ajax요청을 담당하는 XMLHttpRequest라는 객체를 구현하고 있다.

- 요청 : 브라우저는 서버에 정보를 요청한다.

- 응답 : 서버는 응답으로 데이터를 전달한다.(XML, JSON)

            브라우저는 콘텐츠를 처리하여 페이지에 추가한다.

            

 

1) GET 요청 보내기

<script src = "https://unpkg.com/axios/dist.mis.js"></script>   //주소 스크립트 하나만 넣으면

//promise를 적용한 스크립트
<script>
	axios.get('주소')     //promise를 반환한다. 브라우저에서 사용가능하다.(노드에서는 사용방법이 다르다.)
    .then((result) => {
    	console.log(result)
        console.log(result.data)
    })
    .catch((error) => {    //비동기는 항상 응답에 실패할 것을 대비해야한다.
    	console.error(err)
    })
</script>

//promise를 async로 변환한 스크립트
<script>
	( async() => {        //비동기함수를 즉시 실행한다.
    	try{           //try는 then과 같은 역할
        	const result = await axios.get('주소') //axios라이브러리를 이용해 주소 요청에 성공했다면 result에 값을 넣어라.
           	console.log(result)
            console.log(result.data)  //요청에 성공한 result의 data를 콘솔창에 반환해라.
        }catch(error){
        	console.error(err)     //에러가 잇으면 에러를 출력해라.
        }
    }) ( )
</script>

 

2) POST 요청 보내기(데이터를 담아 서버로 보내는 경우)

(async () => {
	try{
    	const result = await axios.post('주소', {
        	name: 'zerocho',         //로그인 시 사용자 정보를 보낸다.
            birth: 1994,
        })
        console.log(result)
        console.log(result.data)
    }catch(error){
    	console.error(err)
    }
}) ( )