데이터 요청

데이터를 요청하는 방법에 대해 알아보겠습니다.

 

먼저, XML을 객체를 통해 전송하는 방법을 보겠습니다. XML은 화면을 구현하는 HTML을 보완하여 데이터의 저장과 전송을 전담합니다. 일반 문자의 형식으로 데이터를 전송하게 때문에 데이터를 받는 거의 모든 대상이 이를 이해할 수 있어 데이터의 유실 위험이 적은 장점으로 많이 사용되었던 방식입니다. 

XML 이전에는 애플리케이션에 불러오는 데이터의 변동이 있을 때마다 화면을 다시 로딩해야 했는데요. XML의 사용으로 데이터 관리와 화면 구현의 분리로 데이터가 변동되더라도 화면의 재 로딩이 필요가 없어졌습니다. 또 비동기 방식을 제공하기 때문에 데이터 요청 후 요청이 완료되기를 기다릴 필요 없이 다른 작업을 병행 가능합니다.

XMLHttpRequest

작동은 XMLHttpRequest 객체 구현 후 .open과 .send로 데이터를 요청합니다. 비동기 방식은 데이터가 준비되면 이를. onreadystatechange를 통해 감지하고, 동기방식에서는 데이터가 반환될 때까지 기다렸다가 반환된 데이터를 활용합니다.

비동기 방식 (asynchronous)

var xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) { // 데이터가 정상적으로 왔는지 확인 https://www.w3schools.com/xml/ajax_xmlhttprequest_response.asp 
    console.log(xhttp.responseText) // 반환된 데이터 (데이터 활용에 필요한 코드가 들어 가는 위치) 
  }
}
xhttp.open('GET', API, true) //method: 'GET' or 'POST' / 파일위치 / 비동기 또는 동기
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //POST 방식에서 헤더지정
xhttp.send() // POST의 경우 매개변수로 데이터 전송

동기 방식 (synchronous)

var xhttp = new XMLHttpRequest()
xhttp.open('GET', API, false)
xhttp.send()
console.log(xhttp.responseText) // 반환된 데이터 (데이터 활용에 필요한 코드가 들어 가는 위치)

콘솔에 로그된 responseText data

메서드들

XML

XML은 전송방식이 GET과 POST 두 가지가 있습니다. GET은 전송이 빠르지만 보안에 취약하고 전송량에 한계가 있습니다. 반면 POST는 전송량에 제한이 없으며 안전하기 때문에 폼 제출 등과 함께 많이 사용됩니다.

 

데이터 요청 후 반환되는 정보를 가져오는 Property와 Method는 다음과 같습니다.

responseText : 데이터를 string형식으로 반환

responseXML : 데이터를 XML형식으로 반환

getResponseHeader() : 특정 헤더 정보 반환

getAllResponseHeaders() : 모든 헤더 정보 반환

Fetch

Fetch는 비동기 방식으로 서버에 데이터를 요청하는 Web API (Application Programming Interface) 중 하나로 XML과 비교했을 때 사용 문법이 간결하고 직관적이면서 같은 기능을 제공하기 때문에 많이 사용되고 있습니다.

fetch - async, await syntax

const API = 'https://api.github.com/users'

async function fetchUsers() {
  const res = await fetch(API)
  const data = await res.json()
  console.log(data)
}

fetch - .then syntax

function fetchUsers() {
  fetch(API).then((res) => {
    return res.json()
  }).then(data => {
    console.log(data)
  })
}

콘솔에 로그된 response data

파라미터

URL 주소 뒤에 파라미터를 붙여 추가정보를 부가할 수 있습니다. 형식은 첫 번째 파라미터는 ?를 두 번째부터 추가되는 파라미터들은 &를 사용합니다.

http://localhost:8080/main?para1=dd&para2=cc'

전송된 파라미터는 키와 값으로 구성되는 데 URL객체를 사용하여 해당 키를 통해 값을 사용가능합니다.

var url = new URL('http://localhost:8080/main?dd=dd');
var c = url.searchParams.get("dd");

이상으로 자바스트립트 HTTP 요청에 대해 알아보았습니다.

---

참조

JavaScript | fetch() Method - GeeksforGeeks

JavaScript Fetch API

XML HttpRequest

XML Introduction