[Ajax] 서버와 통신

1. XMLHttpRequest

---

Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용


이 객체를 사용하기 때문에 웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있다.

2. XMLHttpRequest 객체 생성

---

XMLHttpRequest() 메소드를 사용한다.

var xhr = new XMLHttpRequest();

3. 서버에 요청하기

---

Ajax에서는 XMLHttpRequest 객체를 사용하여 서버와 데이터를 교환한다.
우선 XMLHttpRequest 객체를 생성하고 open(), send() 메소드를 사용하여 요청을 보낼 수 있다.

---

• Open() 메소드
  서버로 보낼 Ajax 요청의 형식을 설정

xhr.open(전달방식, url, 동기 여부);

전달방식: GET, POST, PUT, PATCH, DELETE ...
url: 요청을 처리할 서버의 파일 주소
동기 여부: 요청을 동기식으로 전달하려면 false
비동기식으로 전달하려면 true

• send() 메소드
  작성된 Ajax 요청을 서버로 전달

send() // GET 방식
send(문자열) // POST 방식

4. 서버로부터의 응답

---

- readyState 프로퍼티
- status 프로퍼티
- onreadystatechange 프로퍼티

• readyState 프로퍼티
  XMLHttpRequest 객체의 현재 상태를 나타내는 값

  1) 0 (UNESNT) : XMLHttpRequest 객체가 생성 됨
  2) 1 (OPENED) : open() 메소드가 성공적으로 실행됨
  3) 2 (HEADERS_RECEIVED) : 모든 요청에 대한 응답 도착
  4) 3 (LOADING) : 요청한 데이터를 처리 중임
  5) 4 (DONE) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨

• status 프로퍼티
  서버의 문서 상태를 나타내는 값

  1) **200** : 서버에 문서가 존재함
  2) **404** : 서버에 문서가 존재하지 않음

  
  

• onreadystatechange 프로퍼티
  서버에서 응답이 도착할 때까지 readyState 프로퍼티 값의 변화에 따라 총 5번 호출된다.

5. Request 구현

---

5.1 GET request

    //GET Request
    get(url, callback) {
      	this.http = new XMLHttpRequest(); //XML 객체 생성
        this.http.open('GET', url, true);
        this.http.send();
        this.http.onload = () => {
            if(this.http.status === 200) {
                callback(null, this.http.responseText);
            } else {
                callback('Error: '+ this.http.status);
            }
        }

5.2 POST request

//POST Request
    post(url, data, callback) {
        this.http.open('POST', url, true);
        // 서버에게 JSON을 보낸다고 헤더값을 정의
        this.http.setRequestHeader('Content-type', 'application/json');
        // GET이 아닌 POST 메소드이기 때문에 request에 데이터를 포함하여 보낸다.
        this.http.send(JSON.stringify(data));
        this.http.onload = () => {
            callback(null, this.http.responseText);
        }
    }