[JavaScript] 자바스크립트에서 Ajax 사용하기

Ajax란

비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)의 약자.

웹서버와 비동기로 통신해 웹페이지를 동적으로 갱신하는 프로그래밍 기법을 칭하는 말. 

이름에 XML이 들어있지만 요즘은 XML보다 JSON을 주로 사용한다. 

특징

- 페이지의 새로고침 없이 서버에 요청이 가능

- 따라서 전체 페이지가 아닌 페이지 일부분만 업데이트 할 수 있음

- 서버로부터 데이터를 받고 작업 수행

 

JavaScript에서의 사용

1. XMLHttpRequest 객체를 이용

const request = new XMLHttpRequest();

생성자로 XMLHttpRequest 객체를 생성 후, open() 과 send() 메서드를 사용해 요청. onreadystatechange 이벤트로 통신 상태의 변화를 감지해 서버의 응답을 확인 후 결과를 수행하는 흐름으로 사용한다.  

var req = new XMLHttpRequest(); //생성자로 객체 생성

//onreadystatechange: readystate 값이 바뀔 때마다 호출되는 이벤트 처리기
req.onreadystatechange = function() {
  if(req.readyState == 4){
    if(req.status == 200){
    //정상적으로 요청 처리가 완료되면 콘솔에 response 값 출력
      console.log(req.responseText);
    }else{
      console.log("오류");
    }
  }
};

//요청 전송, 통신 시작
if(!req){
  req.open("GET", "example.txt");
  req.send(null);
}

*open() 메서드

요청을 초기화한다. 

req.open(method, url[, async[, user[, password]]])
//method(HTTP메서드)와 url은 필수
//async: 비동기 통신 여부는 기본값 true
//user, password: 인증 시 사용자명과 암호는 인증이 필요한 경우에만 사용

 

*readyState의 값 종류

0	요청이 초기화되지 않음
1	서버와 연결됨
2	서버가 요청을 받음
3	요청을 처리하는 중
4	요청 처리 종료, 응답 준비 완료됨

 

*HTTP 응답 상태 코드

여기서는 자주 쓰이는 몇 가지와 번호대에 따른 대략적인 정보만 제시한다. 좀 더 자세한 정보는 이곳(한글설명)이나 이곳(브라우저에 따른 정보)에서 확인 가능하다. 

1xx	요청을 받았으며 작업을 계속함
2xx	서버가 요청을 제대로 처리함. 처리 완료를 표현할 때 200 OK가 주로 쓰인다.
3xx	요청을 마치기 위해 추가적인 동작이 필요함
4xx	클라이언트에 오류가 있음
5xx	서버에 오류가 있음

 

 

2. fetch API

XMLHttpRequest 보다 간단히 사용할 수 있어 이쪽을 주로 사용한다. 리소스를 가져오기 위한 인터페이스를 제공한다. 

url과 옵션을 인자로 받고, promise 객체를 반환한다. 

const promise = fetch(url, [options])
//옵션으로는 HTTP메서드나 HTTP 요청 헤더 등을 설정할 수 있다.

 

옵션으로는 method, headers, body가 있는데,

 - method: HTTP 메서드를 설정한다. GET, POST, DELETE, PUT 등이 있다.

 - header: API 응답에 대한 헤더정보를 담고 있다.

 - body: 전달하려는 응답 내용이다. 

//url에서 json데이터를 GET으로 요청해 콘솔로 출력하는 예시코드
//GET의 경우 옵션 생략이 가능 (생략 시 디폴트가 GET)
fetch("https://www.example.com")
  .then(response => {
    //response.json(): response스트림을 읽어 json데이터를 promise로 반환하는 메서드
    return response.json();
  })
  .then(json => {
    console.log(json);
  });

GET 외의 HTTP메서드를 사용할 때는 옵션을 설정해주어야 한다. 

//POST, PUT: method, headers, body 옵션 설정 필요
//JSON 전송 시 헤더에 application/json 설정, 문자열 전송 시 text/plain;charset=UTF-8 설정
fetch("https://www.example.com", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name: "name",
    number: 1,
  }),
})

//DELETE: method만 설정하면 됨
fetch("https://www.example.com", {
  method: "DELETE",
})

 

---

참고 자료

이소 히로시, 『모던 자바스크립트 입문』, 길벗

MDN Docs https://developer.mozilla.org/ko/docs/Web/Guide/AJAX

daleseo https://www.daleseo.com/js-window-fetch/

모던 Javascript 듀토리얼 https://ko.javascript.info/fetch