JavaScript

  1. JavaScript
  2. 불변성
  3. 스코프
  4. 실행컨텍스트
  5. CI / CD
  6. Ajax, Axios, fetch
  7. XHR - Xml Http Request
  8. 호출 스케줄링
  9. 이벤트 흐름,이벤트 종류, 이벤트 위임
  10. Closure
  11. Map / Set
  12. documentFragment

목차

XML HTTP Request란 무엇인가?

Ajax는 브라우저에서 제공하는 Web API인 XMLHTTPRequest 객체를 기반으로 동작한다고 한다 그렇다면 XHR에 대해서 좀 더 자세히 알아 볼 필요가 있다.

브라우저는 어떻게 HTTP Request를 보내는가?

브라우저는 주소창이나 HTML, form 태그 또는 a태그를 통해 HTTP 요청 전송 기능을 기본 제공한다. 자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다.

XML HTTP Request 활용법

const xhr = new XMLHttpRequest()

HTTP 요청 전송의 순서

// XHR 객체 생성
const xhr = new XMLHttpRequest();

// HTTP 요청 초기화
xhr.open("GET", "/users");

// HTTP 요청 헤더 설정
// 클라이언트가 서버로 전송할 데이터의 MIME 타입 지정: json
xhr.setRequestHeader("content-Type", "application/json");

// HTTP 요청 전송
xhr.send();
  1. XMLHttpRequest.prototype.opne 메서드로 HTTP 요청을 초기화한다
  2. 필요에 따라 XMLHttpRequest.prototype.setRqeustHeader 메서드로 특정 HTTP 요청의 헤더 값을 설정한다
  3. XMLHttpRequest.prototype.send 메서드로 HTTP 요청을 전송한다.

open 메서드로 HTTP요청 초기화 → 요청의 Header값 설정 → send 메서드로 HTTP 요청 전송

XMLHttpRequest.prototype.open

xhr.open(method, url[,async])
매개변수 설명
method HTTP 요청 메서드 (”GET”, “POST”, ”PUT”, “DELETE” 등)
url HTTP 요청을 전송할 URL
async 비동기 요청 여부. 옵션으로 기본값은 true, 비동기 방식으로 동작한다.

HTTP 요청 메서드