Ajax๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ฒ์๊ฒ ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๊ณ , ์๋ฒ๊ฐ ์๋ตํ ๋ฐ์ดํฐ๋ฅผ ์์ ํ์ฌ ์นํ์ด์ง๋ฅผ ๋์ ์ผ๋ก ๊ฐฑ์ ํ๋ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ ๋งํ๋ค. Ajax๋ ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋ Web API์ธ XMLHttpRequest ๊ฐ์ฒด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋์ํ๋ค. XMLHttpRequest๋ HTTP ๋น๋๊ธฐ ํต์ ์ ์ํ ๋ฉ์๋์ ํ๋กํผํฐ๋ฅผ ์ ๊ณตํ๋ค.
์ด์ ์ ์นํ์ด์ง๋ html ํ๊ทธ๋ก ์์ํด์ html ํ๊ทธ๋ก ๋๋๋ ์์ ํ HTML์ ์๋ฒ๋ก๋ถํฐ ์ ์ก๋ฐ์ ์นํ์ด์ง ์ ์ฒด๋ฅผ ์ฒ์๋ถํฐ ๋ค์ ๋ ๋๋งํ๋ ๋ฐฉ์์ผ๋ก ๋์ํ๋ค. ๋ฐ๋ผ์ ํ๋ฉด์ด ์ ํ๋๋ฉด ์๋ฒ๋ก๋ถํฐ ์๋ก์ด HTML์ ์ ์ก๋ฐ์ ์นํ์ด์ง ์ ์ฒด๋ฅผ ์ฒ์๋ถํฐ ๋ค์ ๋ ๋๋งํ๋ค.
์ ํต ์ ์ธ ๋ฐฉ์์ ๋ค์๊ณผ ๊ฐ์ ๋จ์ ์ด ์๋ค
- ์ด์ ์นํ์ด์ง์ ์ฐจ์ด๊ฐ ์์ด์ ๋ณ๊ฒฝํ ํ์๊ฐ ์๋ ๋ถ๋ถ๊น์ง ํฌํจ๋ ์์ ํ HTML์ ์๋ฒ๋ก๋ถํฐ ๋งค๋ฒ ๋ค์ ์ ์ก๋ฐ๊ธฐ ๋๋ฌธ์ ๋ถํ์ํ ๋ฐ์ดํฐ ํต์ ์ด ๋ฐ์ํ๋ค.
- ๋ณ๊ฒฝํ ํ์๊ฐ ์๋ ๋ถ๋ถ๊น์ง ์ฒ์๋ถํฐ ๋ค์ ๋ ๋๋งํ๋ค. ์ด๋ก ์ธํด ํ๋ฉด ์ ํ์ด ์ผ์ด๋๋ฉด ํ๋ฉด์ด ์๊ฐ์ ์ผ๋ก ๊น๋ฐ์ด๋ ํ์์ด ๋ฐ์ํ๋ค.
- ํด๋ผ์ด์ธํธ์ ์๋ฒ์์ ํต์ ์ด ๋๊ธฐ ๋ฐฉ์์ผ๋ก ๋์ํ๊ธฐ ๋๋ฌธ์ ์๋ฒ๋ก๋ถํฐ ์๋ต์ด ์์ ๋๊น์ง ๋ค์ ์ฒ๋ฆฌ๋ ๋ธ๋กํน๋๋ค.
์๋ฒ๋ก๋ถํฐ ์นํ์ด์ง์ ๋ณ๊ฒฝ์ ํ์ํ ๋ฐ์ดํฐ๋ง ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ์ ์ก๋ฐ์ ์นํ์ด์ง๋ฅผ ๋ณ๊ฒฝํ ํ์๊ฐ ์๋ ๋ถ๋ถ์ ๋ค์ ๋ ๋๋งํ์ง ์๊ณ , ๋ณ๊ฒฝํ ํ์๊ฐ ์๋ ๋ถ๋ถ๋ง ํ์ ์ ์ผ๋ก ๋ ๋๋งํ๋ ๋ฐฉ์์ด ๊ฐ๋ฅํด์ก๋ค. ์ด๋ฅผ ํตํด ๋ธ๋ผ์ฐ์ ์์๋ ๋ฐ์คํฌํฑ ์ ํ๋ฆฌ์ผ์ด์
๊ณผ ์ ์ฌํ ๋น ๋ฅธ ํผํฌ๋จผ์ค์ ๋ถ๋๋ฌ์ด ํ๋ฉด ์ ํ์ด ๊ฐ๋ฅํด์ก๋ค.
Ajax๋ ์ ํต์ ์ธ ๋ฐฉ์๊ณผ ๋น๊ตํ์ ๋ ๋ค์๊ณผ ๊ฐ์ ์ฅ์ ์ด ์๋ค.
- ๋ณ๊ฒฝํ ๋ถ๋ถ์ ๊ฐฑ์ ํ๋ ๋ฐ ํ์ํ ๋ฐ์ดํฐ๋ง ์๋ฒ๋ก๋ถํฐ ์ ์ก๋ฐ๊ธฐ ๋๋ฌธ์ ๋ธํ์ํ ๋ฐ์ดํฐ ํต์ ์ด ๋ฐ์ํ์ง ์๋๋ค.
- ๋ณ๊ฒฝํ ํ์๊ฐ ์๋ ๋ถ๋ถ์ ๋ค์ ๋ ๋๋งํ์ง ์๋๋ค. ๋ฐ๋ผ์ ํ๋ฉด์ด ์๊ฐ์ ์ผ๋ก ๊น๋ฐ์ด๋ ํ์์ด ๋ฐ์ํ์ง ์๋๋ค.
- ํด๋ผ์ด์ธํธ์ ์๋ฒ์์ ํต์ ์ด ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ๋์ํ๊ธฐ ๋๋ฌธ์ ์๋ฒ์๊ฒ ์์ฒญ์ ๋ณด๋ธ ์ดํ ๋ธ๋กํน์ด ๋ฐ์ํ์ง ์๋๋ค.
JSON์ ํด๋ผ์ด์ธํธ์ ์๋ฒ ๊ฐ์ HTTP ํต์ ์ ์ํ ํ ์คํธ ๋ฐ์ดํฐ ํฌ๋งท์ด๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์ ์ข ์๋์ง ์๋ ์ธ์ด ๋ ๋ฆฝํ ๋ฐ์ดํฐ ํฌ๋งท์ผ๋ก, ๋๋ถ๋ถ์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์ ์ฌ์ฉํ ์ ์๋ค.
JSON์ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ฐ์ฒด ๋ฆฌํฐ๋ด๊ณผ ์ ์ฌํ๊ฒ ํค์ ๊ฐ์ผ๋ก ๊ตฌ์ฑ๋ ์๋ํ ํ ์คํธ๋ค.
{
"name" : "Lee",
"age" : 20,
"alive" : true,
"hobby" : ["traveling", "tennis"]
}
JSON์ ํค๋ ๋ฐ๋์ ํฐ๋ฐ์ดํ๋ก ๋ฌถ์ด์ผ ํ๋ค. ๊ฐ์ ๊ฐ์ฒด ๋ฆฌํฐ๋ด๊ณผ ๊ฐ์ ํ๊ธฐ๋ฒ์ ๊ทธ๋๋ก ์ฌ์ฉํ ์ ์๋ค. ํ์ง๋ง ๋ฌธ์์ด์ ๋ฐ๋์ ํฐ๋ฐ์ดํ๋ก ๋ฌถ์ด์ผ ํ๋ค.
JSON.stringify ๋ฉ์๋๋ ๊ฐ์ฒด๋ฅผ JSON ํฌ๋งท์ ๋ฌธ์์ด๋ก ๋ณํํ๋ค. ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ๋ก ๊ฐ์ฒด๋ฅผ ์ ์กํ๋ ค๋ฉด ๊ฐ์ฒด๋ฅผ ๋ฌธ์์ดํํด์ผ ํ๋๋ฐ ์ด๋ฅผ ์ง๋ ฌํ๋ผ ํ๋ค.
const obj = {
name: 'Lee',
age: 20,
alive: true,
hobby: ['traveling', 'tennis']
};
// ๊ฐ์ฒด๋ฅผ JSON ํฌ๋งท์ ๋ฌธ์์ด๋ก ๋ณํํ๋ค.
const json = JSON.stringify(obj);
console.log(typeof json, json);
// string {"name":"Lee","age":20,"alive":true,"hobby":["traveling","tennis"]}
// ๊ฐ์ฒด๋ฅผ JSON ํฌ๋งท์ ๋ฌธ์์ด๋ก ๋ณํํ๋ฉด์ ๋ค์ฌ์ฐ๊ธฐ ํ๋ค.
const prettyJson = JSON.stringify(obj, null, 2);
console.log(typeof prettyJson, prettyJson);
/*
string {
"name": "Lee",
"age": 20,
"alive": true,
"hobby": [
"traveling",
"tennis"
]
}
*/
// replacer ํจ์. ๊ฐ์ ํ์
์ด Number์ด๋ฉด ํํฐ๋ง๋์ด ๋ฐํ๋์ง ์๋๋ค.
function filter(key, value) {
// undefined: ๋ฐํํ์ง ์์
return typeof value === 'number' ? undefined : value;
}
// JSON.stringify ๋ฉ์๋์ ๋ ๋ฒ์งธ ์ธ์๋ก replacer ํจ์๋ฅผ ์ ๋ฌํ๋ค.
const strFilteredObject = JSON.stringify(obj, filter, 2);
console.log(typeof strFilteredObject, strFilteredObject);
/*
string {
"name": "Lee",
"alive": true,
"hobby": [
"traveling",
"tennis"
]
}
*/
JSON.stringify ๋ฉ์๋๋ ๊ฐ์ฒด๋ฟ๋ง ์๋๋ผ ๋ฐฐ์ด๋ JSON ํฌ๋งท์ ๋ฌธ์์ด๋ก ๋ณํํ๋ค.
JSON.parse ๋ฉ์๋๋ JSON ํฌ๋งท์ ๋ฌธ์์ด์ ๊ฐ์ฒด๋ก ๋ณํํ๋ค. ์๋ฒ๋ก๋ถํฐ ํด๋ผ์ด์ธํธ์๊ฒ ์ ์ฑ๋ JSON ๋ฐ์ดํฐ๋ ๋ฌธ์์ด์ด๋ค. ์ด ๋ฌธ์์ด์ ๊ฐ์ฒด๋ก์ ์ฌ์ฉํ๋ ค๋ฉด JSON ํฌ๋งท์ ๋ฌธ์์ด์ ๊ฐ์ฒดํํด์ผ ํ๋๋ฐ ์ด๋ฅผ ์ญ์ง๋ ฌํ๋ผ ํ๋ค.
const obj = {
name: 'Lee',
age: 20,alive: true,
hobby: ['traveling', 'tennis']
};
// ๊ฐ์ฒด๋ฅผ JSON ํฌ๋งท์ ๋ฌธ์์ด๋ก ๋ณํํ๋ค.
const json = JSON.stringify(obj);
// JSON ํฌ๋งท์ ๋ฌธ์์ด์ ๊ฐ์ฒด๋ก ๋ณํํ๋ค.
const parsed = JSON.parse(json);
console.log(typeof parsed, parsed);
// object {name: "Lee", age: 20.alive: true.hobby:["traveling","tenis"]
๋ฐฐ์ด์ด JSON ํฌ๋งท์ ๋ฌธ์์ด๋ก ๋ณํ๋์ด ์๋ ๊ฒฝ์ฐ JSON.parse๋ ๋ฌธ์์ด์ ๋ฐฐ์ด ๊ฐ์ฒด๋ก ๋ณํํ๋ค. ๋ฐฐ์ด์ ์์๊ฐ ๊ฐ์ฒด์ธ ๊ฒฝ์ฐ ๋ฐฐ์ด์ ์์๊น์ง ๊ฐ์ฒด๋ก ๋ณํํ๋ค.
๋ธ๋ผ์ฐ์ ๋ ์ฃผ์์ฐฝ์ด๋ HTML์ form ํ๊ทธ ๋๋ a ํ๊ทธ๋ฅผ ํตํด HTTP ์์ฒญ ์ ์ก ๊ธฐ๋ฅ์ ๊ธฐ๋ณธ ์ ๊ณตํ๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ฌ HTTP ์์ฒญ์ ์ ์กํ๋ ค๋ฉด XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ๋ค. Web API์ธ XMLHttpRequest ๊ฐ์ฒด๋ HTTP ์์ฒญ ์ ์ก๊ณผ HTTP ์๋ต ์์ ์ ์ํ ๋ค์ํ ๋ฉ์๋์ ํ๋กํผํฐ๋ฅผ ์ ๊ณตํ๋ค.
XMLHttpRequest ๊ฐ์ฒด๋ XMLHttpRequest ์์ฑ์ ํจ์๋ฅผ ํธ์ถํ์ฌ ์์ฑํ๋ค. XMLHttpRequest ๊ฐ์ฒด๋ ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋ Web API์ด๋ฏ๋ก ๋ธ๋ผ์ฐ์ ํ๊ฒฝ์์๋ง ์ ์์ ์ผ๋ก ์คํ๋๋ค.
// XMLHttpRequest ๊ฐ์ฒด์ ์์ฑ
const xhr = new XMLHttpRequest();
XMLHttpRequest ๊ฐ์ฒด๋ ๋ค์ํ ํ๋กํผํฐ์ ๋ฉ์๋๋ฅผ ์ ๊ณตํ๋ค. ๋ํ์ ์ธ ํ๋กํผํฐ์ ๋ฉ์๋๋ ๋ค์๊ณผ ๊ฐ๋ค.
XMLHttpRequest ๊ฐ์ฒด์ ํ๋กํ ํ์ ํ๋กํผํฐ
ํ๋กํ ํ์ ํ๋กํผํฐ | ์ค๋ช |
---|---|
readyState | HTTP ์์ฒญ์ผ๋ก ํ์ฌ ์ํ๋ฅผ ๋ํ๋ด๋ ์ ์. ๋ค์๊ณผ ๊ฐ์ XMLHttpRequest์ ์ ์ ํ๋กํผํฐ๋ฅผ ๊ฐ์ผ๋ก ๊ฐ๋๋ค. UNSENT:0 OPENED:1 HEADERS_RECEIVED: 2 LOADING: 3 DONE:4 |
statueText | HTTP ์์ฒญ์ ๋ํ ์๋ต ๋ฉ์์ง๋ฅผ ๋ํ๋ด๋ ๋ฌธ์์ด ์) "OK" |
responseType | HTTP ์๋ต ํ์ ์) document, jsion, text, blob, arraybuffer |
response | HTTP ์์ฒญ์ ๋ํ ์๋ต ๋ชธ์ฒด, responseType์ ๋ฐ๋ผ ํ์ ์ด ๋ค๋ฅด๋ค |
responseText | ์๋ฒ๊ฐ ์ ์กํ HTTP ์์ฒญ์ ๋ํ ์๋ต ๋ฌธ์์ด |
XMLHttpRequest ๊ฐ์ฒด์ ์ด๋ฒคํธ ํธ๋ค๋ฌ ํ๋กํผํฐ
์ด๋ฒคํธ ํธ๋ค๋ฌ ํ๋กํผํฐ | ์ค๋ช |
---|---|
onReadystatechange | readyState ํ๋กํผํฐ ๊ฐ์ด ๋ณ๊ฒฝ๋ ๊ฒฝ์ฐ |
onloadstart | HTTP ์์ฒญ์ ๋ํ ์๋ต์ ๋ฐ๊ธฐ ์์ํ ๊ฒฝ์ฐ |
onprogress | HTTP ์์ฒญ์ ๋ํ ์๋ต์ ๋ฐ๋ ๋์ค ์ฃผ๊ธฐ์ ์ผ๋ก ๋ฐ์ |
onabort | abort ๋ฉ์๋์ ์ํด HTTP ์์ฒญ์ด ์ค๋จ๋ ๊ฒฝ์ฐ |
onerror | HTTP ์์ฒญ์ ์๋ฌ๊ฐ ๋ฐ์ํ ๊ฒฝ์ฐ |
onload | HTTP ์์ฒญ์ด ์ฑ๊ณต์ ์ผ๋ก ์๋ฃํ ๊ฒฝ์ฐ |
ontimeout | HTTP ์์ฒญ ์๊ฐ์ด ์ด๊ณผํ ๊ฒฝ์ฐ |
onloadend | HTTP ์์ฒญ์ ์๋ฃํ ๊ฒฝ์ฐ, HTTP ์์ฒญ์ด ์ฑ๊ณต ๋๋ ์คํจํ๋ฉด ๋ฐ์ |
XMLHttpRequest ๊ฐ์ฒด์ ๋ฉ์๋
์ด๋ฒคํธ ํธ๋ค๋ฌ ํ๋กํผํฐ | ์ค๋ช |
---|---|
open | HTTP ์์ฒญ ์ด๊ธฐํ |
end | HTTP ์์ฒญ ์ ์ก |
abort | ์ด๋ฏธ ์ ์ก๋ HTTP ์์ฒญ ์ค๋จ |
setRequestHeader | ํน์ HTTP ์์ฒญ ํค๋์ ๊ฐ์ ์ค์ |
getResponseHeader | ํน์ HTTP ์์ฒญ ํค๋์ ๊ฐ์ ๋ฌธ์์ด๋ก ๋ฐํ |
XMLHttpRequest ๊ฐ์ฒด์ ์ ์ ํ๋กํผํฐ
์ด๋ฒคํธ ํธ๋ค๋ฌ ํ๋กํผํฐ | ๊ฐ | ์ค๋ช |
---|---|---|
UNSENT | 0 | open ๋ฉ์๋ ํธ์ถ ์ด์ |
OPENED | 1 | open ๋ฉ์๋ ํธ์ถ ์ดํ |
HEADERS_RECEIVED | 2 | send ๋ฉ์๋ ํธ์ถ ์ดํ |
OPENED | 3 | ์๋ฒ ์๋ต ์ค(์๋ต ๋ฐ์ดํฐ ๋ฏธ์์ฑ ์ํ) |
OPENED | 4 | ์๋ฒ ์๋ต ์๋ฃ |
HTTP ์์ฒญ์ ์ ์กํ๋ ๊ฒฝ์ฐ ๋ค์ ์์๋ฅผ ๋ฐ๋ฅธ๋ค.
// XMLHttpRequest ๊ฐ์ฒด ์์ฑ
const xhr = new XMLHttpRequest();
// HTTP ์์ฒญ ์ด๊ธฐํ
xhr.open('GET', '/users');
// HTTP ์์ฒญ ํค๋ ์ค์
// ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ๋ก ์ ์กํ ๋ฐ์ดํฐ์ MIME ํ์
์ง์ : json
xhr.setRequestHeader('content-type', 'application/json');
// HTTP ์์ฒญ ์ ์ก
xhr.send();
XMLHttpRequest.prototype.open
open ๋ฉ์๋๋ ์๋ฒ์ ์ ์กํ HTTP ์์ฒญ์ ์ด๊ธฐํํ๋ค. open ๋ฉ์๋๋ฅผ ํธ์ถํ๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ๋ค.
xhr.open(method, url[, async])
๋งค๊ฐ๋ณ์ | ์ค๋ช |
---|---|
method | HTTP ์์ฒญ ๋ฉ์๋("GET", "POST", "PUT", "DELETE" ๋ฑ |
url | HTTP ์์ฒญ์ ์ ์กํ URL |
async | ๋น๋๊ธฐ ์์ฒญ ์ฌ๋ถ, ์ต์ ์ผ๋ก ๊ธฐ๋ณธ๊ฐ์ true์ด๋ฉฐ, ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ๋์ํ๋ค. |
HTTP ์์ฒญ ๋ฉ์๋๋ ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ์๊ฒ ์์ฒญ์ ์ข ๋ฅ์ ๋ชฉ์ ์ ์๋ฆฌ๋ ๋ฐฉ๋ฒ์ด๋ค. ์ฃผ๋ก 5๊ฐ์ง ์์ฒญ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ CRUD๋ฅผ ๊ตฌํํ๋ค.
HTTP ์์ฒญ ๋ฉ์๋ | ์ข ๋ฅ | ๋ชฉ์ | ํ์ด๋ก๋ |
---|---|---|---|
GET | index/retrieve | ๋ชจ๋ /ํน์ ๋ฆฌ์์ค ์ทจ๋ | X |
POST | create | ๋ฆฌ์์ค ์์ฑ | O |
PUT | replace | ๋ฆฌ์์ค์ ์ ์ฒด ๊ต์ฒด | O |
PATCH | modify | ๋ฆฌ์์ค์ ์ผ๋ถ ์์ | O |
DELETE | delete | ๋ชจ๋ /ํน์ ๋ฆฌ์์ค ์ญ์ | X |
XMLHttpRequest.prototype.send
send ๋ฉ์๋๋ open ๋ฉ์๋๋ก ์ด๊ธฐํ๋ HTTP ์์ฒญ์ ์๋ฒ์ ์ ์กํ๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ์๋ฒ๋ก ์ ์กํ๋ ๋ฐ์ดํฐ๋ GET, POST ์์ฒญ ๋ฉ์๋์ ๋ฐ๋ผ ์ ์ก ๋ฐฉ์์ ์ฐจ์ด๊ฐ ์๋ค.
xhr.send(JSON.stringify({id: 1, content: 'HTML', completed: false}));
HTTP ์์ฒญ ๋ฉ์๋๊ฐ GET์ธ ๊ฒฝ์ฐ send ๋ฉ์๋์ ํ์ด๋ก๋๋ก ์ ๋ฌํ ์ธ์๋ ๋ฌด์๋๊ณ ์์ฒญ ๋ชธ์ฒด๋ null๋ก ์ค์ ๋๋ค.
XMLHttpRequest.prototype.setRequestHeader
setRequestHeader ๋ฉ์๋๋ ํน์ HTTP ์์ฒญ์ ํค๋ ๊ฐ์ ์ค์ ํ๋ค. setRequestHeader ๋ฉ์๋๋ ๋ฐ๋์ open ๋ฉ์๋๋ฅผ ํธ์ถํ ์ดํ์ ํธ์ถํด์ผ ํ๋ค. ์์ฃผ ์ฌ์ฉํ๋ HTTP ์์ฒญ ํค๋์ธ Content-type๊ณผ Accept์ ๋ํด ์ดํด๋ณด์.
Content-type์ ์์ฒญ ๋ชธ์ฒด์ ๋ด์ ์ ์กํ ๋ฐ์ดํฐ์ MIME ํ์
์ ์ ๋ณด๋ฅผ ํํํ๋ค. ์์ฃผ ์ฌ์ฉ๋๋ MIME ํ์
์ ๋ค์๊ณผ ๊ฐ๋ค.
MIME ํ์ | ์๋ธํ์ |
---|---|
text | text/plain, text/html, text/css, text/javascript |
applicatio | application/json, application/x-www-form-urlencode |
multipart | multipart/formed-data |
๋ค์์ ์์ฒญ ๋ชธ์ฒด์ ๋ด์ ์๋ฒ๋ก ์ ์กํ ํ์ด๋ก๋์ MIME ํ์ ์ ์ง์ ํ๋ ์๋ค.
// XMLHttpRequest ๊ฐ์ฒด ์์ฑ
const xhr = new XMLHttpRequest();
// HTTP ์์ฒญ ์ด๊ธฐํ
xhr.open('POST', '/users');
// HTTP ์์ฒญ ํค๋ ์ค์
// ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ๋ก ์ ์กํ ๋ฐ์ดํฐ์ MIME ํ์
์ง์ : json
xhr.setRequestHeader('content-type', 'application/json');
// HTTP ์์ฒญ ์ ์ก
xhr.send(JSON.stringify({ id: 1, content: 'HTML', completed: false }));
HTTP ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ์ ์์ฒญํ ๋ ์๋ฒ๊ฐ ์๋ตํ ๋ฐ์ดํฐ์ MIME ํ์ ์ Accept๋ก ์ง์ ํ ์ ์๋ค. ๋ค์์ ์๋ฒ๊ฐ ์๋ตํ ๋ฐ์ดํฐ์ MIME ํ์ ์ ์ง์ ํ๋ ์๋ค.
// ์๋ฒ๊ฐ ์๋ตํ ๋ฐ์ดํฐ์ MIME ํ์
์ง์ : json
xhr.setRequestHeader('accept', 'application/json');
์๋ฒ๊ฐ ์ ์กํ ์๋ต์ ์ฒ๋ฆฌํ๋ ค๋ฉด XMLHttpRequest ๊ฐ์ฒด๊ฐ ๋ฐ์์ํค๋ ์ด๋ฒคํธ๋ฅผ ์บ์นํด์ผ ํ๋ค. XMLHttpRequest ๊ฐ์ฒด๋ onreadystatechange, onload, onerror ๊ฐ์ ์ด๋ฒคํธ ํธ๋ค๋ฌ ํ๋กํผํฐ๋ฅผ ๊ฐ๋๋ค. ์ด ์ด๋ฒคํธ ํธ๋ค๋ฌ ํ๋กํผํฐ ์ค์์ HTTP ์์ฒญ์ ํ์ฌ ์ํ๋ฅผ ๋ํ๋ด๋ readyState ํ๋กํผํฐ ๊ฐ์ด ๋ณ๊ฒฝ๋ ๊ฒฝ์ฐ ๋ฐ์ํ๋ readystatechange ์ด๋ฒคํธ๋ฅผ ์บ์นํ์ฌ ๋ค์๊ณผ ๊ฐ์ด HTTP ์๋ต์ ์ฒ๋ฆฌํ ์ ์๋ค.
XMLHttpRequest ๊ฐ์ฒด๋ ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋ Web API์ด๋ฏ๋ก ๋ค์ ์์ ๋ ๋ฐ๋์ ๋ธ๋ผ์ฐ์ ํ๊ฒฝ์์ ์คํํด์ผ ํ๋ค.
์ฐธ๊ณ ๋ก HTTP ์์ฒญ์ ์ ์กํ๊ณ ์๋ต์ ๋ฐ์ผ๋ ค๋ฉด ์๋ฒ๊ฐ ํ์ํ๋ค. ๋ค์ ์์ ์์๋ JSONPlaceholder์์ ์ ๊ณตํ๋ ๊ฐ์ REST API๋ฅผ ์ฌ์ฉํ๋ค.
// XMLHttpRequest ๊ฐ์ฒด ์์ฑ
const xhr = new XMLHttpRequest();
// HTTP ์์ฒญ ์ด๊ธฐํ
// https://jsonplaceholder.typicode.com์ Fake REST API๋ฅผ ์ ๊ณตํ๋ ์๋น์ค๋ค.
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
// HTTP ์์ฒญ ์ ์ก
xhr.send();
// readystatechange ์ด๋ฒคํธ๋ HTTP ์์ฒญ์ ํ์ฌ ์ํ๋ฅผ ๋ํ๋ด๋ readyState ํ๋กํผํฐ๊ฐ
// ๋ณ๊ฒฝ๋ ๋๋ง๋ค ๋ฐ์ํ๋ค.
xhr.onreadystatechange = () => {
// readyState ํ๋กํผํฐ๋ HTTP ์์ฒญ์ ํ์ฌ ์ํ๋ฅผ ๋ํ๋ธ๋ค.
// readyState ํ๋กํผํฐ ๊ฐ์ด 4(XMLHttpRequest.DONE)๊ฐ ์๋๋ฉด ์๋ฒ ์๋ต์ด ์๋ฃ๋์ง ์์ ์ํ๋ค.
// ๋ง์ฝ ์๋ฒ ์๋ต์ด ์์ง ์๋ฃ๋์ง ์์๋ค๋ฉด ์๋ฌด๋ฐ ์ฒ๋ฆฌ๋ฅผ ํ์ง ์๋๋ค.
if (xhr.readyState !== XMLHttpRequest.DONE) return;
// status ํ๋กํผํฐ๋ ์๋ต ์ํ ์ฝ๋๋ฅผ ๋ํ๋ธ๋ค.
// status ํ๋กํผํฐ ๊ฐ์ด 200์ด๋ฉด ์ ์์ ์ผ๋ก ์๋ต๋ ์ํ์ด๊ณ
// status ํ๋กํผํฐ ๊ฐ์ด 200์ด ์๋๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ ์ํ๋ค.
// ์ ์์ ์ผ๋ก ์๋ต๋ ์ํ๋ผ๋ฉด response ํ๋กํผํฐ์ ์๋ฒ์ ์๋ต ๊ฒฐ๊ณผ๊ฐ ๋ด๊ฒจ ์๋ค.
if (xhr.status === 200) {
console.log(JSON.parse(xhr.response));
// {userId: 1, id: 1, title: "delectus aut autem", completed: false}
} else {
console.error('Error', xhr.status, xhr.statusText);
}
};
send ๋ฉ์๋๋ฅผ ํตํด HTTP ์์ฒญ์ ์๋ฒ์ ์ ์กํ๋ฉด ์๋ฒ๋ ์๋ต์ ๋ฐํํ๋ค. ํ์ง๋ง ์ธ์ ์๋ต์ด ํด๋ผ์ด์ธํธ์ ๋๋ฌํ ์ง๋ ์ ์ ์๋ค. ๋ฐ๋ผ์ readystateonchange ์ด๋ฒคํธ๋ฅผ ํตํด HTTP ์์ฒญ์ ํ์ฌ ์ํ๋ฅผ ํ์ธํด์ผ ํ๋ค. readystatechange ์ด๋ฒคํธ๋ HTTP ์์ฒญ์ ํ์ฌ ์ํ๋ฅผ ๋ํ๋ด๋ readyState ํ๋กํผํฐ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ๋ฐ์ํ๋ค.
onreadystatechange ์ด๋ฒคํธ ํธ๋ค๋ฌ ํ๋กํผํฐ์ ํ ๋นํ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ HTTP ์์ฒญ์ ํ์ฌ ์ํ๋ฅผ ๋ํ๋ด๋ xhr.readyState๊ฐ XMLHttpRequest.DONE์ธ์ง ํ์ธํ์ฌ ์๋ฒ์ ์๋ต์ด ์๋ฃ๋์๋์ง ํ์ธํ๋ค.
์๋ฒ์ ์๋ต์ด ์๋ฃ๋๋ฉด HTTP ์์ฒญ์ ๋ํ ์๋ต ์ํ(HTTP ์ํ ์ฝ๋)๋ฅผ ๋ํ๋ด๋ xhr.status๊ฐ 200์ธ์ง ํ์ธํ์ฌ ์ ์ ์ฒ๋ฆฌ์ ์๋ฌ ์ฒ๋ฆฌ๋ฅผ ๊ตฌ๋ถํ๋ค. HTTP ์์ฒญ์ ๋ํ ์๋ต์ด ์ ์์ ์ผ๋ก ๋์ฐฉํ๋ค๋ฉด ์์ฒญ์ ๋ํ ์๋ต ๋ชธ์ฒด๋ฅผ ๋ํ๋ด๋ xhr.response์์ ์๋ฒ๊ฐ ์ ์กํ ๋ฐ์ดํฐ๋ฅผ ์ทจ๋ํ๋ค. ๋ง์ฝ xhr.status๊ฐ 200์ด ์๋๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ ์ํ์ด๋ฏ๋ก ํ์ํ ์๋ฌ ์ฒ๋ฆฌ๋ฅผ ํ๋ค.
readystatechange ์ด๋ฒคํธ ๋์ load ์ด๋ฒคํธ๋ฅผ ์บ์นํด๋ ์ข๋ค. load ์ด๋ฒคํธ๋ HTTP ์์ฒญ์ด ์ฑ๊ณต์ ์ผ๋ก ์๋ฃ๋ ๊ฒฝ์ฐ ๋ฐ์ํ๋ค. ๋ฐ๋ผ์ load ์ด๋ฒคํธ๋ฅผ ์บ์นํ๋ ๊ฒฝ์ฐ xhr.readyState๊ฐ XMLHttpRequest.DONE์ธ์ง ํ์ธํ ํ์๊ฐ ์๋ค.
// XMLHttpRequest ๊ฐ์ฒด ์์ฑ
const xhr = new XMLHttpRequest();
// HTTP ์์ฒญ ์ด๊ธฐํ
// https://jsonplaceholder.typicode.com์ Fake REST API๋ฅผ ์ ๊ณตํ๋ ์๋น์ค๋ค.
xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1");
// HTTP ์์ฒญ ์ ์ก
xhr.send();
// readystatechange ์ด๋ฒคํธ๋ HTTP ์์ฒญ์ ํ์ฌ ์ํ๋ฅผ ๋ํ๋ด๋ readyState ํ๋กํผํฐ๊ฐ
// ๋ณ๊ฒฝ๋ ๋๋ง๋ค ๋ฐ์ํ๋ค.
xhr.onreadystatechange = () => {
// readyState ํ๋กํผํฐ๋ HTTP ์์ฒญ์ ํ์ฌ ์ํ๋ฅผ ๋ํ๋ธ๋ค.
// readyState ํ๋กํผํฐ ๊ฐ์ด 4(XMLHttpRequest.DONE)๊ฐ ์๋๋ฉด ์๋ฒ ์๋ต์ด ์๋ฃ๋์ง ์ํ๋ค.
// ๋ง์ฝ ์๋ฒ ์๋ต์ด ์์ง ์๋ฃ๋์ง ์์๋ค๋ฉด ์๋ฌด๋ฐ ์ฒ๋ฆฌ๋ฅผ ํ์ง ์๋๋ค.
if (xhr.readyState !== XMLHttpRequest.DONE) return;
// status ํ๋กํผํฐ๋ ์๋ต ์ํ ์ฝ๋๋ฅผ ๋ํ๋ธ๋ค.
// status ํ๋กํผํฐ ๊ฐ์ด 200์ด๋ฉด ์ ์์ ์ผ๋ก ์๋ต๋ ์ํ์ด๊ณ
// status ํ๋กํผํฐ ๊ฐ์ด 200์ด ์๋๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ ์ํ๋ค.
// ์ ์์ ์ผ๋ก ์๋ต๋ ์ํ๋ผ๋ฉด response ํ๋กํผํฐ์ ์๋ฒ์ ์๋ต ๊ฒฐ๊ณผ๊ฐ ๋ด๊ฒจ ์๋ค.
if (xhr.status === 200) {
console.log(JSON.parse(xhr.response));
// {userId: 1, id: 1, title: "delectus aut autem", completed: false}
} else {
console.error("Error", xhr.status, xhr.statusText);
}
};