Ajax

Ajax란?

• Ajax : js를 사용해 브라우저가 서버에게 비동기적으로 데이터를 요청, 서버가 응답한 데이터를 수신해 웹페이지를 동적으로 갱신하는 프로그래밍 방식
• WebAPI인 XMLHttpRequest객체를 기반으로 동작하고 이 객체는 HTTP 비동기 통신을 위한 메서드와 프로퍼티 제공
• 전통적 방식과 비교해 다음과 같은 장점 존재
  • 변경할 부분만 서버로부터 전송받기 때문에 불필요한 통신 줄임
  • 변경할 필요 없는 부분은 렌더링을 다시 하지 않음
  • 비동기 방식이기 때문에 서버로 요청 보낸 후 블로킹이 발생하지 않음

JSON

• 클라이언트-서버 간의 HTTP통신을 위한 텍스트 데이터 포맷

JSON.stringify

• 객체를 문자열로 바꿔줌(직렬화, serializing)
• 매개변수로 대상 객체, 필터 함수, 들여쓰기 수를 받음

const ppap = {
  "a": 3,
  "b": undefined,
  "c": "hello",
}

console.log(JSON.stringify(ppap, (k,v) => typeof v === 'string' ? undefined : v, 2));
/*
{
  "a": 3
}
*/

JSON.parse

• 문자열을 다시 객체로 만들어줌(역직렬화, deserializing)

XMLHttpRequest

• HTTP 요청 전송과 HTTP응답 수신을 위한 메서드와 프로퍼티를 제공하는 WebAPI의 객체

XMLHttpRequest 객체 생성

• XMLHttpRequest 생성자 함수를 호출해 생성
• XMLHttpRequest 객체는 WebAPI이므로 브라우저 환경에서만 정상적으로 실행됨

XMLHttpRequest 객체의 프로퍼티와 메서드

• XMLHttpRequest 객체의 프로토타입 프로퍼티
  • readyState : HTTP 요청의 현재 상태를 나타내는 정수
    • UNSENT : 0
    • OPENED : 1
    • HEADERS_RECEIVED : 2
    • LOADING : 3
    • DONE : 4
  • status : HTTP 요청에 대한 응답 상태(HTTP 상태 코드)를 나타내는 정수 (ex. 200)
  • statusText : HTTP 요청에 대한 응답 메시지를 나타내는 문자열 (ex. "OK")
  • responseType : HTTP 응답 타입 (ex. document, json, text)
  • response : HTTP 요청에 대한 응답 몸체. responseType에 따라 타입이 다름
• XMLHttpRequest 객체의 이벤트 핸들러 프로퍼티
  • onreadystatechange : readyState 프로퍼티 값이 변경된 경우
  • onerror : HTTP 요청에 에러가 발생한 경우
  • onload : HTTP 요청이 성공적으로 완료한 경우
• XMLHttpRequest 객체의 메서드
  • open : HTTP 요청 초기화
  • send : HTTP 요청 전송
  • abort : 이미 전송된 HTTP 요청 중단
  • setRequestHeader : 특정 HTTP 요청 해더의 값을 설정
• XMLHttpRequest 객체의 정적 프로퍼티
  • UNSENT : open 메서드 호출. 값은 0
  • OPENED : open 메서드 호출 이후. 값은 1
  • HEADERS_RECEIVED : send 메서드 호출 이후. 값은 2
  • LOADING : 서버 응답 중(응답 데이터 미완성 상태). 값은 3
  • DONE : 서버 응답 완료. 값은 4

HTTP 요청 전송

• HTTP 요청 전송 순서
  1. XMLHttpRequest.prototype.open 메서드로 HTTP 요청 초기화
  2. 필요에 따라 XMLHttpRequest.prototype.setRequestHeader 메서드로 특정 HTTP 요청의 해더값을 설정
  3. XMLHttpRequest.prototype.send 메서드로 HTTP 요청 전송
• XMLHttpRequest.prototype.open
  • HTTP 요청을 초기화
  • xhr.open(method, url,[, async]);
  • method : HTTP 요청 메서드("GET", "POST" 등)
  • url : HTTP 요청을 전송할 URL
  • async : 비동기 요청 여부. 기본 값은 true
• XMLHttpRequest.prototype.send
  • send 메서드는 open메서드로 초기화된 HTTP 요청을 서버에 전송함
  • 서버로 전송하는 데이터는 GET, POST 요청 메서드에 따라 전송방식에 차이 존재
    • GET : 데이터를 URL의 일부인 쿼리 문자열로 서버에 전송
    • POST : 데이터(페이로드, payload)를 request body에 담아 전송
  • request body에 담아 전송할 데이터(페이로드)를 인수로 전달할 수 있음
    • 페이로드가 객체인 경우 반드시 JSON.stringify 메서드를 이용해 직렬화한 뒤 전달

    xhr.send(JSON.stringify({ id: 1. content: 'HTML', completed: false }));
    

  • HTTP 요청 메서드가 GET이면 send 메서드에 페이로드로 전달한 인수 무시, request body는 null로 설정됨
• XMLHttpRequest.prototype.setReusestHeader
  • setReusestHeader 메서드는 특정 HTTP 요청의 헤더 값을 설정함
  • 반드시 open 메서드를 호출한 이후에 호출해야 함
  • 자주 사용하는 HTTP 요청 헤더 Content-type과 Accept
    • Content-type : request body에 담아 전송할 데이터의 MIME 타입의 정보를 표현
      • MIME 타입 : 웹에서 전송된 문서의 종류를 판별하는 식별자

    xhr.setRequestHeader('content-type', 'application/json');
    

    • Accept : HTTP 클라이언트가 서버에 요청할 때 서버가 응답할 데이터의 MIME 타입을 Accept로 지정할 수 있음

    xhr.setRequestHeader('accept', 'application/json');
    

HTTP 응답 처리

• 서버가 전송한 응답을 처리하려면 XMLHttpRequest 객체가 발생시키는 이벤트를 캐치해야 함

const xhr = new XMLHttpRequest();

xhr.open('GET', '<https://jsonplaceholder.typicode.com/todos/1>');

xhr.send();

xhr.onload = () => {
	if (xhr.status === 200) {
		console.log(JSON.parse(xhr.response));
	} else {
		console.error('Error', xhr.status, xhr,statusText);
	}
};