1. AJAX

AJAX 란??

AJAX(Asynchronous Javascript And XML)는 비동기적 웹 서비스를 개발하기 위한 기법.

• 이름에 XML이 들어가 있지만 꼭 XML을 사용해야 되는 것은 아님.
• 요즘은 JSON을 많이 사용.
• 비동기 -> 페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술.
• 보통 AJAX 요청은 jQuery나 axios 같은 라이브러리를 이용해서 보냄.

GET 방식 예제

var xhr = new XMLHttpRequest();
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('GET', 'https://api.foo.com/get'); // 메서드와 주소 설정
xhr.send(); // 요청 전송

여기서 onreadystatechange 대신 onload와 onerror로 성공과 실패를 구별해도 됨.

POST 방식 예제

var xhr = new XMLHttpRequest();
var data = {
  name: 'pongchi',
  age: 21
};
xhr.onload = function() {
  if (xhr.status == 200 || xhr.status === 201) {
    console.log(xhr.responseText);
  }
};
xhr.error = function() {
  console.log(xhr.responseText);
};
xhr.open('POST', 'https://api.foo.com/post/json');
xhr.setRequestHeader('Content-Type', 'application/json'); // 콘텐츠 타입을 json으로
xhr.send(JSON.stringify(data)); // 데이터를 Json으로 바꿔 전송

---

2. FormData

FormData 란??

HTML form 태그의 데이터를 동적으로 제어할 수 있는 기능.

• 주로 AJAX와 함께 사용됨.

예제

var fromData = new FormData();
formData.append('name', 'pongchi');
formData.append('color', 'orange');
formData.append('color', 'red');
formData.has('color'); // true
formData.get('color'); // orange
formData.getAll('color'); // ['orange', 'red']
formData.append('test', ['hi', 'hello']);
formData.get('test'); // hi, hello
formData.delete('test');
formData.set('color', 'blue');
formData.getAll('color'); // ['blue']

AJAX + FormData

var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('name', 'pongchi');
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', 'https://api.foo.com/post');
xhr.send(formData);

---

3. encodeURIComponent, decodeURIComponent

사용하는 상황

AJAX 요청을 보낼 때 주소에 한글이 들어가는 경우가 있는데, 서버에 따라 다르지만 서버가 한글 주소를 이해하지 못하는 경우가 있음.
이럴 때, window 객체의 메서드인 encodeURIComponent 메서드를 사용

예제

// 기본적인 ajax 코드 생략
xhr.open('GET', 'http://api.foo.com/get/search/' + encodeURIComponent('퐁치'));
xhr.send();
// 한글 주소 인코딩 후 전송

받는 쪽에서는 decodeURIComponent를 사용하면 된다.

---

4. data attribute와 dataset

서버에서 보내준 데이터를 프런트엔드 어디에 넣을지 고민이 될 때, 여기에 넣으면 된다.

예제

<ul>
	<li data-id="1" data-user-job="programmer">Zero</li>
	<li data-id="2" data-user-job="designer">Nero</li>
	<li data-id="3" data-user-job="programmer">Hero</li>
	<li data-id="4" data-user-job="ceo">Kero</li>
</ul>

console.log(document.querySelector('li').dataset);
// { id:'1', userJob:'programmer' }

HTML 태그의 속성으로, data-로 시작하는 것들을 넣을 수 있는데, 이게 data attribute 이다.

data attribute의 장점은 자바스크립트로 쉽게 접근이 가능하다.

단, data attribute 이름이 조금씩 변형됨. 앞의 data- 접두어는 사라지고, - 뒤에 위치한 글짜는 대문자가 된다.
-> data-id는 id, data-user-job은 userJob.

반대로 dataset에 데이터를 넣어도 HTML 태그에 반영이 된다.
dataset.monthSalary = 10000; 을 넣으면 data-month-salary="10000"이라는 속성이 생긴다.