[4일차~5일차] 그래서 Ajax가 뭔가..

서론

여기까지 와서 이제야 ajax가 무엇인지를 파헤치는 것이 맞나 싶었지만..
그래도 기초를 짚고 넘어가는 것이 좋을거 같아서 오늘은 ajax의 기초에 시간을 할애하기로 했다.
오늘은 ajax가 무엇인지 그리고 어떤 식으로 사용하는지에 대해서만 간단하게 이야기하도록 할 예정이다.

본론

ajax는 Asynchronous JavaScript and XML의 약자로서 서버와 비동기적으로 통신하는 자바스크립트 기술이다.

사용자가 필요한 것을 서버에 요청하면 서버는 요청대로 페이지를 랜더링한 뒤 사용자에게 보여준다.
이러한 과정으로 우리는 여러 웹 서비스를 즐길 수 있는데, Ajax는 이걸 비동기적으로 통신 할 수 있게 해주는 기술이다.
비동기는 요청을 서버가 다 처리했든지 상관없이 결과값을 전달 할 수 있다는 것인데, 그 덕분에 다중 작업이 가능해진다.
간단하게 말하자면 Ajax의 비동기성 덕분에 우리는 페이지를 전환하는것 없이(새로고침) 실시간으로 서버와 통신이 가능해지는 것이다.

이게 사용자의 경험을 크게 개선해준다 우리가 무엇을 할 때마다 동기적으로 진행된다면 엄청나게 일이 느려질 것이다.

사용 방법

Ajax의 사용방법은 JavaScript에서 사용하는 방법, 외부라이브러리인 JQuery, axios를 사용하는 방법 이렇게 크게 세 가지가 있다.

JavaScript에서의 ajax

자바스크립트에서는 XMLHttpRequest객체를 이용하는 방식과 Fetch를 이용하는 방식이 있다. XMLHttpRequest는 옛날 방식이고 요즘은 Fetch로 더 간결하게 코드를 쓴다고 한다.

옛날 방식

//create Http request 
const httpRequest = new XMLHttpRequest();

function ajax(){
	if(!httpRequest){
    	return false;
    }
    
    //notice to XMLHttpRequest which function will handle the response
    //called when the request changes state 
    httpRequest.onreadystatechange = ajaxContent;
    httpRequest.open("GET", "test.html");
    httpRequest.send();	
}

function ajaxContent(){
	try{
    	if(httpRequest.readyState === XMLHttpRequest.DONE){
          if(httpRequest.state === 200){
              //Success
          }else{
              //fail
          }
    }catch(e){
    	alert(e);
    }
  }
	
}

요즘 방식
요즘은 fetch API를 많이 이용한다고 한다.

<script>
	fetch('url');
    .then((response)=>{
    	//check error 
    	if(!response.ok){
        	throw new Error("error message");
        }
    	//data from server
        return response.json();
    })
    .catch(()=>{
    	//error
    })

</script>

then을 굳이 쓰고 싶지 않다면 이런식으로 awit문법을 사용할 수 있다고...

<script>
	 //use await
    async function getData(){
    	var response = await fetch('url');
        if(!response.ok){
        throw new Error('error message');
        }
    
        var result = await response.json();
    	console.log(result);
    }
    getData().catch(()=>{
    	//error
    });
</script>

JQuery에서의 ajax

JQuery안에는 $.ajax라이브러리가 있다. 나도 이것을 이용해서 ajax를 구현했는데, 사용하려면 꼭 JQuery를 설치해야한다.

$.ajax({
	url : 'test.html',
    beforeSend : function(xhr){
    	//before send something
    },
    success : function(result){
    	//when success
    },
    complete : function(result){
    	//when compelete
    }
    //이 외에도 많은 것들이 있으니 공식문서를 참고해서 필요한 것을 사용하면 된다!

}).done(fucntion(){
	//ajax callback
});

axios에서의 ajax

<script>
  axios.get('url')
  .then((result) => {
      //result => data from server
  }).catch(() => {
      //error cath
  })
<script>

출처

https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started
https://youtu.be/nKD1atl6cAw
https://api.jquery.com/jquery.ajax/