AJAX

---

Asynchronous Javascript and XML의 약어인 AJAX는 비동기적인 웹 서비스를 개발하기 위한 기법입니다. 페이지 새로고침없이 서버와의 요청, 응답을 통해 데이터를 주고 받습니다.

옛날에는 XML을 사용했지만 요즘에는 JSON형식의 데이터를 많이 사용합니다. 보통 AJAX는 fetch라는 웹 API 혹은 axios 라이브러리를 많이 사용합니다. 둘 다 프로미스 객체를 반환하기 때문에 접근성과 가독성이 뛰어나죠.

오늘은 xmlHTTPRequest 생성자로 AJAX를 구현해보겠습니다.

GET

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { // 요청에 대한 콜백함수
  if(xhr.readyState === xhr.DONE) { // 요청이 완료되면 실행
    if(xhr.status === 200 || xhr.status === 201) { // 응답 코드가 200 혹은 201
      console.log(xhr.responseText);
    } else {
      consol.error(xhr.reponseText);
    }
  }
};
xhr.open('GET', URL); // http 메서드와 URL설정
xhr.send(); // 요청 전송

이미 비동기에 대해 전반적으로 이해하고 있다면 XMLHttpRequest 객체를 이용한 AJAX는 매우 쉽습니다. onreadystatechange 대신에 onload 와 onerror로 처리할 수 있습니다.

var xhr = new XMLHttpRequest();
xhr.onload = function() {
  if (xhr.status === 200 || xhr.status === 201) {
    console.log(xhr.responseText);
  }
};
xhr.onerror = function() {
  console.error(xhr.responseText);
}
xhr.open('GET', URL);
xhr.send();

POST

메소드가 POST일 경우에는 어떻게 될까요?

var xhr = new XMLHttpRequest();
var data = {
  name: 'SeungHwan',
  birth: '1994',
};
xhr.onreadystatechange = function() {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200 || xhr.status === 201) {
      console.log(xhr.responseText);
    } else {
      console.error(xhr.responseText);
    }
  }
};
xhr.open('POST', URL);
xhr.setRequestHeader('Content-Type', 'application/json'); // 콘텐츠 타입을 json으로
xhr.send(JSON.stringify(data)); // 데이터를 문자열로 동봉해서 전송한다

FormData

---

HTML form 태그의 데이터를 좀 더 동적으로 제어하는 기능이며 AJAX와 함께 쓰이는 경우가 많습니다. 아래와 같이 FormData 생성자를 통해 만듭니다.

let formData = new FormData();

formData의 다양한 메소드를 알아보죠.

formData.append('name', 'seunghwan');
formData.append('fruits', 'apple');
formData.append('fruits', 'banana');
formData.has('fruits'); // true
formData.has('apple'); // false, 키가 아니기 때문에
formData.get('fruits') // 'apple'
formData.getAll('fruits') // ['apple', 'banana']
formData.delete('name');
formData.get('name') // null
formData.set('fruits', 'melon');
formData.getAll('fruits') // ['melon']

서버에 전송할 때는 formData 객체를 send()의 인자로 넣어주면 됩니다. 참 쉽죠?

xhr.send(formData);

encodeURLComponent, decodeURLComponent

---

AJAX에서 URL을 인자로 보낼 때 한글이 들어가있는 경우가 있는데 한글을 이해 못하는 서버도 있습니다. 따라서 window 객체가 가진 메서드를 사용해서 이를 변환해줍니다.

xhr.open('GET', 'https://www.zerocho.com/api/search/' + encodeURLComponent('노드'));
xhr.send();

이렇게 요청을 보내고 받는 쪽에서 decodeURLComponent를 사용해주면 됩니다.

data attribute와 dataset

---

HTML5에는 데이터를 저장하는 공식적인 방법이 있는데 바로 data attribute입니다.

<ul>
	<li data-id="1" data-user-job="front">first</li>
	<li data-id="2" data-user-job="back">second</li>
	<li data-id="3" data-user-job="dev">third</li>
</ul>
<script>
	console.log(document.querySelector("li").dataset);
	// { id: "1", userJob: "front" }
</script>

dataset 속성을 통해 DOM에 담겨있는 정보에 접근할 수 있다. 이때 data-는 사라지고 캐멀케이스로 변환된다.(data-id ⇒ id, data-user-job ⇒ userJob) 반대로 데이터를 넣어줄 수 있다.

(dataset.jobName ⇒ data-job-name)

References

---

• 조현영『Node.js 교과서』, (주)도서출판 길벗(2019년 2월 2일), p.51 ~ 54