AJAX

우리는 저번에 콜백과 프로미스에 대해서 배웠다.

그리고 나는 강조했다. 콜백과 프로미스는 비동기적 AJAX request에서 많이 사용되는 것이라고. 이제 드디어 AJAX가 도데체 뭔지 배워보자.

 

일단 AJAX는 자바스크립트의 코어 기능 중 하나로 몇가지 중요한 일을 한다.

1. 페이지가 로딩된 후에도, 서버에서 데이터를 읽을 수 있다  

2. 읽은 데이터로 HTML데이터를 새로고침하지 않고 바꿀 수 있다.

3. 백그라운드에서 서버로 데이터를 보낼 수 있다.

 

즉, AJAX의 주목적은 페이지의 작은 부분을 새로고침하지 않고 가져올 수 있다는 점에 있다.

 

이제 AJAX의 기능을 사용할 수 있는 방법에 대해서 알아보자.

 

1. XMLhttprequest

XMLhttprequest는 전통적인 AJAX request의 방식으로 현재는 많이 쓰이고 있지 않지만 그래도 예전에 만들어진 많은 사이트가 이것을 사용하였다. 그렇기에 이것의 사용법을 간단하게 알아보자.

 

우선 XMLHttpRequest는 모든 웹브라우저가 제공하는 빌트인 객체(생성자)이다. 그러니 우리가 이것의 기능을 사용하려면 XMHttpRequest의 인스턴스를 만들어야 한다.

 

xhr = new XMLHttpRequest();

이제 우리는 XMLHttpRequest의 여러가지 메소드를 사용할 수있다.

 

하나하나 알아보자.

 

일단 request를 적는 방법 부터 알아보자

xhr.open('GET','www.somewhere.com/123',true)

위의 코드는 xhr request를 적는 방법이다.

 

open의 첫번째 인자엔 방법이 들어간다. GET 방법은 그냥 데이터를 서버로 부터 가져오고 싶을때 사용된다. 데이터를 서버로 보내는 방법인 POST는 이따가 다룰 것이다.

 

두번째 인자는 가져올 string 데이터의 url이다. 마지막 인자는 비동기적 또는 동기적을 명시하는 건데 명시하지 않으면 자동으로 비동기적이 된다. 당연히 비동기적이 더 효율적이다.

 

이제 open에 request를 적었으니 request를 보내 보자.

xhr.send();

이렇게 쉽게 request를 보낼 수 있다.

 

만약의 POST방법을 사용해 서버에 데이터를 보내야한다면 인자로 보낼 body를 적어야한다.

 

이제 어떤한 요청을 보냈으니 응답을 받는 방법에 대해서 알아보자

 

xhr.onload=function(){
  if(xhr.status==200){
     document.getElementById('button').innerHTML = xhr.response;
     }else{
     alert(`ERROR: ${xhr.statusText}`);
     }
}

이런 식으로 응답이 도착했을때 실행되는 onload 메소드를 사용할 수 있다.

보이다시피 응답된 문자열은 xhr.response (또는 responseText)에 담겨져 있다.

 

xhr.onprogress=function(event){
   console.log(`Recieved ${event.loaded} of ${event.total}`);
}

xhr.onerror=function(){
   alert('ERROR!');
}

 이렇게 응답이 전송되는 도중에 event.loaded 와 event.total을 이용해 얼마나 전송됬는지 확인도 가능하다.

 

그리고 에러가 일어나면 에러의 처리도 가능하다.

 

xhr.onload=function(){
  if(xhr.status==200){
        let responseObj = xhr.response;
        console.log(responseObj.result);//에러뜸
     }
}

위의 코드를 실행시키면 에러 뜰 것이다. 왜냐하면 xhr.response는 문자열을 담아오기 때문이다 그렇기에 JSON메소드를 이용하여 이것을 json으로 바꿔야한다.

 

xhr.onload=function(){
  if(xhr.status==200){
        let responseObj = JSON.parse(xhr.response);
        console.log(responseObj.result);//해당하는 값이 나옴
     }
}

지금 까지 비동기적 처리를 다루어 왔다. 다음에는 한번 동기적 처리를 확인해보자.

 

let xhr = new XMLHttpRequest;
xhr.open('GET',url,false);

xhr.send();

console.log(xhr.response);

이렇게 순차적으로 실행되게 할 수 있지만 .send가 실행되고 있을때 다른 모든 javascript 코드가 블럭되므로 사용자가 스크롤을 못하는등 여러 문제가 발생된다. 그래서 가능한 async를 쓰자.

 

이제 GET대해서 알아봤으니 POST대해서도 알아보자

 

그 전에 Header에 대해 잠시 얘기하자

 

Header란 요청/응답에대한 추가적인 내용이 담겨있다.

우리는 request Header을 우리가 직접 지정할 수있다

setRequestHeader('value','name')

 

그리고 

getResponseHeader('value')

getAllResponseHeader()

을통해 응답에 대한 정보를 알 수 있다.

 

그리고 우리는 

 

Post는 앞서 설명했듯이 어떠한 데이터를 전송할때 사용된다. 

function sendSomething(someObj,url){
  xhr = mew XMLHttpRequest();
  
  xhr.open('POST',url)
  let someJson=JSON.stringify(someObj);
  xhr.setRequestHeader('Content-type','application/json');
  xhr.send(someJson);
  
  xhr.onload=function(){
     console.log(response);
  }
}

위의 코드는 어떠한 객체를 서버로 전송하는 코드이다.

 

먼저 open에 POST방법을 사용한다는 점을 써준다. 

그리고 파라미터로 받은 someObj을 JSON으로 바꿨다.

우리는 JSON을 서버로 보내는 것이기 때문에 content-type이 json이라는 것을 명시한다.

명시하지 않으면 제대로 처리가 되지 않을 가능성도 있다.

그리고 .send를 사용해 json을 서버로 보낸후 서버가 응답한 response를 실행한다.

 

우리는 form의 정보를 서버에 전송을 자주한다. 그렇기에 서버에 form정보를 보내기위한 특별한 객체가 있다.

 

<form id="example">
   <input name="one">
   <input name="two">
</form>

<script>
let exampleForm=document.getElementById('example');

exampleForm.addEventListener('submit',function(){
   let data = new FormData(exampleForm)//data라는 변수에 form의 값이 저장됨
   let jsonData = data.JSON.stringify('data');//json으로 보내기 위해 문자열로 변환
   
   xhr = new XMLHttpRequest();
   xhr.open('POST','www.aowe/co');
   xhr.setRequestHeader('Content-type','application/json');
   xhr.send(jsonData);
   
})
   


</script>

이렇게 form데이터를 FormData의 인자로 보내 새로운 객체를 만든다. 그 객체는 form의 데이터가 담겨져있고 매우 쉽게 .send로 보낼 수 있다.

 

우리가 POST방법을 사용할때 무슨일이 일어나고 있는걸까?

우선 우리가 보낸 데이터 / request body가 서버에 업로드된다. 그리고 서버가 보낸 반응을 클라이언트가 다운로드한다. 

 

만약 우리가 보내는 request body의 데이터가 매우 크다면 어떡하지? 우린 업로드의 프로세스마다 어떠한 일을 실행하기 위해 update라는 객체를 사용할 수 있다.

 

update객체의 메소드들을 살펴보려면 여기로 가자 https://javascript.info/xmlhttprequest