HTTP
- 브라우저와 서버가 데이터를 주고받을 수 있는 통신 규약이다.
- 클라이언트(사용자)가 서버(호스트)에 요청 메시지를 보내고 이에 대해 서버가 응답 메시지를 반환한다.
- HTTP 요청 메시지는 요청 행, 요청 헤더, 메시지 본문으로 구성된다.
- 요청 행: 요청 메소드, URL, HTTP 버전 정보 등을 포함한다.
- 요청 헤더: 메시지 정보, 메시지에 저장한 데이터 정보 등을 포함한다.
- 메시지 본문: 서버 측으로 보내는 데이터를 포함한다.
- 요청 메시지란 GET, POST 등 데이터 송수신 방식을 지정한 것을 뜻한다.
- HTTP 응답 메시지는 응답 행, 응답 헤더, 메시지 본문으로 구성된다.
- 응답 행: 상태 코드, 보충 메시지, HTTP 버전 정보 등을 포함한다.
- 응답 헤더: 메시지 정보, 메시지에 저장한 데이터 정보 등을 포함한다.
- 메시지 본문: 클라이언트 측으로 보내는 데이터를 포함한다.
- 상태 코드란 요청이 성공적으로 완료되었는지를 보여주는 코드
XMLHttpRequest
서버와 상호작용하기 위해 사용하는 자바스크립트 내장 생성자이다. 이를 이용하면 서버로부터 데이터를 받아와 전체 페이지의 새로고침 없이도 페이지의 일부만 업데이트 하는 비동기 방식의 데이터 통신을 수행할 수 있다.
→ 이러한 프로그래밍 기법을 Ajax라고 한다.
Ajax는 웹 서버와 비동기로 통신하고 DOM을 이용하여 웹 페이지를 동적으로 갱신하는 프로그래밍 기법을 말한다.
Ajax 기법에 기초한 XMLHttpRequest 비동기 통신의 다음의 3 가지 단계를 거친다.
- XMLHttpRequest 객체를 생성한다(객체 생성은 new 연산자로!)
- 서버와 통신할 때 필요한 정보 처리 방법 등을 기입한다.
- 요청을 전송해 통신을 시작한다.
비동기 통신을 할 때는 서버와의 통신 상태를 감시할 수 있다.
그리고 이 때 발생하는 이벤트에 대한 이벤트 핸들러를 등록할 수 있다.
아래는 XMLHttpRequest 객체의 주요 이벤트 몇 가지를 정리한 표이니 참고하자.
서버에 요청을 보낼 때는 XMLHttpRequest 객체의 open 메소드로 요청을 초기화하고,
이후 send 메소드로 보내주는 순서가 일반적이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 실습해보자</title>
<style>
div {
width: 400px;
height: 300px;
border: 2px solid #333;
background-size: cover;
}
</style>
</head>
<body>
<div></div>
<button>요청</button>
<script src="script.js"></script>
</body>
</html>// cat image api url
const catApiurl = 'https://api.thecatapi.com/v1/images/search'
// request 객체 생성
const request = new XMLHttpRequest()
// 이벤트 핸들러 등록
request.addEventListener("load", function(){
const obj = JSON.parse(request.responseText)
const imgUrl = obj[0].url
console.log(imgUrl)
const div = document.querySelector("div")
div.style.backgroundImage = `url(${imgUrl})`
})
// 에러 발생 시 경고 메시지 나오도록
request.addEventListener("error", function(){
alert("뭔가 문제가 있는 듯해요!!")
})
// 버튼 클릭 시 요청이 가도록
const button = document.querySelector("button")
button.addEventListener("click", function(){
request.open("get", catApiurl)
request.send()
})
'Frontend' 카테고리의 다른 글
| 입문자를 위한 자바스크립트 기초 강의_미니플젝03 (0) | 2022.08.13 |
|---|---|
| 입문자를 위한 자바스크립트 기초 강의_미니플젝02 (0) | 2022.07.31 |
| 입문자를 위한 자바스크립트 기초 강의_미니플젝01 (0) | 2022.07.23 |
| 입문자를 위한 자바스크립트 기초 강의_JS기초04 (0) | 2022.07.23 |
| 입문자를 위한 자바스크립트 기초 강의_JS기초03 (0) | 2022.07.12 |