AJAX란?
비동기 자바스크립트와 XML(Asynchronous JavaScript And XML)을 말한다.
서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다.
AJAX를 이용하면 페이지 전체를 Refresh 하지 않고 원하는 부분만 변경이 되게 할 수 있다.
예를 들면 위와 같이 댓글을 입력하는 상황에서 페이지 이동 없이 작성한 댓글을 확인할 수 있게된다.
AJAX의 특징
- 페이지 새로고침 없이 서버에 요청
- 서버로부터 데이터를 받고 작업을 수행
- 최근에는 XML보다 JSON을 더 많이 사용
AJAX 원리
- 브라우저가 사이트에 접속하면 서버는 사이트의 레이아웃을 담은 템플릿을 전달한다.
- 브라우저는 수신받은 템플릿(HTML/CSS)을 해석해 화면의 기본 모양을 그린다.
- 서버는 데이터의 요청 방식과 수신 받은 데이터를 어떻게 가공해야 하는지가 기술된 JavaScript 파일을 전달한다.
- 브라우저는 JavaScript 파일을 해석해 기술된 방식대로 서버에 추가 데이터를 요청한다.
- 서버는 순수 데이터를 응답으로 돌려준다.
- 브라우저는 수신한 데이터를 해석하여 템플릿의 적절한 위치에 삽입한다.
XMLHttpRequest 사용 예제
클라이언트
0. 사용할 대상 지정
<html>
<head>
</head>
<body>
<div id="content"></div>
<button id="ajax">AJAX</button>
</body>
</html>const ajax = document.querySelector("#ajax")
const content = document.querySelector("#content")1. 객체 생성
const xhr = new XMLHttpRequest()2. 요청을 보낼 대상 지정
xhr.open("get", "http://localhost:3000", true)- 첫번째 파라미터는 HTTP Request Method를 적어주면 된다.
- 두번째 파라미터에는 요청을 보낼 URL을 적어주면 된다.
- 세번째 파라미터는 생략이 가능하다.
- true(기본값) : 비동기적으로 작동된다. (서버에서 응답을 받기 전에 다른 코드가 실행될 수 있음)
- false : 동기적으로 작동된다. (
send()함수에서 서버로부터 응답이 올 때까지 기다림)
3. MIME 타입 지정
MIME 타입 지정이란 전송된 문서의 타입을 알려주기 위해 지정해주는 걸 의미한다.
브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지 결정하기 위해 사용한다.
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")3.1 json / x-www-form-urlencoded
- application/json : {key : value} 형태로 전송된다.
- application/x-www-form-urlencoded : key=value&key=value 형태로 전송된다.
- 모든 문자들이 서버로 보내기 전에 인코딩 되기 때문에 큰 데이터를 보내기에 적합하지 않다.
4. 전송
xhr.send()실제로 서버로 요청을 보내는 코드이다.
send 메서드의 인자로 데이터를 넣으면 HTTP Request Body에 담겨져서 요청이 보내진다.
5. 응답을 받는 코드 작성
언제 응답이 올지 모르기 때문에 이벤트로 처리를 해준다.
xhr.onload = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.response)
} else {
console.log("무언가 오류가 발생했어요!")
}- readyState
- 0(UNSENT) : XMLHttpRequest Client를 생성됬지만 open() 메서드가 아직 호출되지 않음
- 1(OPENED) : open() 메서드가 호출됨
- 2(HEADERS_RECEIVED) : send() 메서드가 호출되고 response header가 수신됨
- 3(interactive) : response body를 수신중
- 4(complete) : 수신 완료 (데이터 전송을 성공하거나 실패함)
서버
Node.js Express 기준
const express = require("express");
const app = express();
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.get("/", (req, res) => {
res.status(200).send("data")
})
app.listen(3000, () => {
console.log(`Server Start`);
});서버에서는 해당 라우터로 들어오는 요청에 응답을 주면 된다.
Express에서 req.body로 데이터를 읽으려면 다음 미들웨어를 장착해야 한다.
app.use(express.urlencoded({extended: false}))JSON으로 req.body에 JSON 형식으로 데이터가 들어올 때는 다음 미들웨어를 장착하면 된다.
app.use(express.json())정리
클라이언트는 요청을 할 때 타입에 맞는 컨텐츠 타입을 설정해서 요청을 보내고 서버는 요청에 맞는 응답을 주면 된다.
참고
https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started
https://namu.wiki/w/AJAX
https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/load_event
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState
