AJAX

์น ๋ธ๋ผ์ฐ์ ์์ ์นํ์ด์ง๋ฅผ ์์ฒญํ๊ฑฐ๋ ๋งํฌ ํด๋ฆญ์ ํ๋ฉด ์ ํ์ด ๋ฐ์ํ๋ค.

์๋ฒ์ ๋ธ๋ผ์ฐ์ ์์ ํต์ ์ ์ํ ๊ฒ์ธ๋ฐ, ์๋ฒ๋ ์์ฒญ๋ฐ์ ํ์ด์ง(HTML)๋ฅผ ๋ฐํํ๋ค. ์ด๋ HTML์์ ๋ก๋ํ๋ CSS, JavaScript ํ์ผ๋ค๋ ๊ฐ์ด ๋ฐํ๋๋ค. ํด๋ผ์ด์ธํธ์ ์์ฒญ์ ๋ฐ๋ผ์ ์๋ฒ๋ ์ ์ ์ธ ํ์ผ, ์๋ฒ ์ฌ์ด๋ ํ๋ก๊ทธ๋จ์ด ๋ง๋๋ ํ์ผ, ๋ฐ์ดํฐ๋ฅผ ๋ฐํํ ์๋ ์๋ค. ์๋ฒ๋ก ๋ถํฐ ์นํ์ด์ง๊ฐ ๋ฐํ๋๋ฉด ํด๋ผ์ด์ธํธ(๋ธ๋ผ์ฐ์ )๋ ์ด๋ฅผ ๋ ๋๋งํ์ฌ ํ๋ฉด์ ํ์ํ๋ค.
Ajax
Ajax๋ Asynchronous JavaScript and XML์ ์ฝ์๋ก JavaScript๋ฅผ ์ด์ฉํ์ฌ ๋น๋๊ธฐ์ (Asynchronous)์ผ๋ก ์๋ฒ์ ๋ธ๋ผ์ฐ์ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ๊ตํํ ์ ์๋ ํต์ ๋ฐฉ์์ด๋ค.

์ฆ, ์๋ฒ๋ก๋ถํฐ ์นํ์ด์ง๊ฐ ๋ฐํ๋๋ฉด ํ๋ฉด ์ ์ฒด๋ฅผ ๊ฐฑ์ ํ์ง ์๊ณ , ์ผ๋ถ๋ง์ ๊ฐฑ์ ํ๋ ๋ฐฉ๋ฒ์ด๋ค.

Ajax์ ๋์์๋ฆฌ๋ Browser์์ ์๋ฒ๋ก ๋ณด๋ผ Data๋ฅผ Ajax Engine์ ํตํด์ ์๋ฒ๋ก ์ ์กํ๋ค. ์ด๋ Ajax Engine์ JavaScript๋ฅผ ํตํด DOM์ ์ฌ์ฉํ์ฌ XMLHttpRequest(XHR) ๊ฐ์ฒด๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๋ค. ์ด XHR์ ์ด์ฉํด ์๋ฒ์์ ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์กฐํํด ์ฌ ์ ์๋ ๊ฒ์ด๋ค.
์๋ฒ๋ HTML, XML, JSON ๋ฑ์ ๋ฐํํ๋๋ฐ Ajax๋ฅผ ์ํ ๋ฐ์ดํฐ ํ์์ JSON์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด๋ค.
XMLHttpRequest ๊ฐ์ฒด
XMLHttpRequest ๊ฐ์ฒด๋ ์น ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ๊ตํํ ๋ ์ฌ์ฉํ๋ค. ์น ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์๋ฒ์ ๊ณ์ํด์ ํต์ ํ ์ ์๋ ๊ฒ์ XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ด๋ค.
var req = new XMLHttpRequest(); // ๊ฐ์ฒด ์์ฑ
req.open('GET','data/test.json',true); // ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก request open, ์๋ฒ์ ์์ฒญ์ ์ค๋นํ๋ค.
req.send(); // request ์ ์ก, ์ค๋น๋ ์์ฒญ์ ์๋ฒ์ ์ ๋ฌ
open()
: ์๋ฒ๋ก ๋ณด๋ผ Ajax ์์ฒญ์ ํ์ ์ค์ ์ ๋ฌ๋ฐฉ์ : ์์ฒญ์ ์ ๋ฌํ ๋ฐฉ์ (GET, POST)
URL์ฃผ์ : ์์ฒญ์ ์ฒ๋ฆฌํ ์๋ฒ์ ํ์ผ ์ฃผ์ ์ ๋ฌ
๋๊ธฐ์ฌ๋ถ : ์์ฒญ์ ๋๊ธฐ์์ผ๋ก ์ ๋ฌํ ์ง ๋น๋๊ธฐ์์ผ๋ก ์ ๋ฌํ ์ง ์ฌ๋ถ
๋น๋๊ธฐ true
๋๊ธฐ false
open(์ ๋ฌ๋ฐฉ์, url์ฃผ์, ๋๊ธฐ์ฌ๋ถ);
send()
: ์์ฑ๋ Ajax์์ฒญ์ ์๋ฒ๋ก ์ ๋ฌ
// GET ๋ฐฉ์
send();
// POST ๋ฐฉ์
send(๋ฌธ์์ด);
Ajax์์๋ ์ฃผ๋ก POST ๋ฐฉ์์ ์ฌ์ฉํ์ฌ ์์ฒญ์ ์ ๋ฌํ๋ค.
// XMLHttpRequest.readyStaty property ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ์ฝ๋ฐฑํจ์(์ด๋ฒคํธ ํธ๋ค๋ฌ) ํธ์ถ
req.onreadystatechange = function(e){
// readyStates๋ XMLHttpRequest์ ์ํ(state)๋ฅผ ๋ฐํํ๋ค.
if(req.readyState===XMLHttpRequest.DONE){
// status๋ response ์ํ ์ฝ๋๋ฅผ ๋ฐํํ๋ค.
if(req.status == 200){
console.log(req.responseText);
}else{
console.log("Error");
}
}
}
XMLHttpRequest.send()
๋ฉ์๋๋ฅผ ํตํด ์๋ฒ์ Request๋ฅผ ์ ์กํ๋ฉด ์๋ฒ๋ Response๋ฅผ ๋ฐํํด ์ฃผ๋๋ฐ ์ธ์ Response๊ฐ ํด๋ผ์ด์ธํธ์ ๋๋ฌํ ์ง๋ ์ ์ ์๋ค.
์ด๋ XMLHttpRequest.onreadystatechange
๋ Response๊ฐ ํด๋ผ์ด์ธํธ์ ๋๋ฌํ์ฌ ๋ฐ์๋ ์ด๋ฒคํธ๋ฅผ ๊ฐ์งํ๊ณ ์ฝ๋ฐฑํจ์๋ฅผ ์คํํ์ฌ ์ค๋ค. ์ฆ, req.onreadystatechange๋ readyState property๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ํธ์ถ๋๋ EventHandler์ด๋ค.
readyState
: Request์ ๋ณํ๊ฐ ๋ฐ์ํ ๊ฒฝ์ฐ์ readyState์ property๊ฐ ๋ณ๊ฒฝ๋๋ค. response๊ฐ ํด๋ฆฌ์ด์ธํธ์ ๋๋ฌํ๋์ง๋ฅผ ์ถ์ ํ ์ ์๋ ๊ฐ์ด๋ค.
Value
State
Description
0
UNSENT
XMLHttpRequest.open() ๋ฉ์๋ ํธ์ถ ์ด์ XMLHttpRequest ๊ฐ์ฒด๊ฐ ์์ฑ
1
OPENED
XMLHttpRequest.open() ๋ฉ์๋ ํธ์ถ ์๋ฃ open() ๋ฉ์๋๊ฐ ์ฑ๊ณต์ ์ผ๋ก ์คํ
2
HEADERS_RECEIVED
XMLHttpRequest.send() ๋ฉ์๋ ํธ์ถ ์๋ฃ ๋ชจ๋ ์์ฒญ์ ๋ํ ์๋ต์ด ๋์ฐฉ
3
LOADING
์๋ฒ ์๋ต ์ค(XMLHttpRequest.responseText ๋ฏธ์์ฑ ์ํ) ์์ฒญํ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌ ์ค์ธ ๊ฒฝ์ฐ
4
DONE
์๋ฒ ์๋ต ์๋ฃ
status : ์๋ฒ์ ๋ฌธ์ ์ํ๋ฅผ ๋ํ๋ธ๋ค.
200 (์ ์ ์๋ต)
var xhr = new XMLHttpRequest(),
method = "GET",
url = "https://dh00023.github.io/";
xhr.open(method, url, true);
xhr.send();
// ajax์์ฒญ์ ์ค๋จํด์ผํ๋ ๊ฒฝ์ฐ
if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {
xhr.abort();
}
abort : ajax์์ฒญ์ ์ทจ์ํ๊ฑฐ๋ ์ค๋จํด์ผํ๋ ๊ฒฝ์ฐ์ ์ฌ์ฉํ๋ค.
JSON
JSON(JavaScript Object Notation)์ JavaScript์ ๊ฐ์ฒด ๋ฆฌํฐ๋ด๊ณผ ๋งค์ฐ ํก์ฌํ๋ค. ํ์ง๋ง JSON์ ์์ํ ํ ์คํธ๋ก ๊ตฌ์ฑ๋ ๋ฐ์ดํฐ์ด๋ค.
๋ฆฌํฐ๋ด : ์ฝ๋์์์ ๋ฐ์ดํฐ๋ฅผ ํํํ๋ ๋ฐฉ์
// ๊ฐ์ฒด ๋ฆฌํฐ๋ด var obj = { p1 : 2, p2 : โ2โ };
{
"key": value
}
ํค๋ ๋ฐ๋์ ํฐ๋ฐ์ดํ(""
)๋ก ๋๋ฌ์ธ์ผํ๋ค. (์์ ๋ฐ์ดํ('
) ๋ถ๊ฐ)
{
"name": "jimin",
"gender": "female",
"age": 25,
"alive": true
}
JSON.stringify()
JSON.stringify()
๋ฉ์๋๋ ๊ฐ์ฒด๋ฅผ JSON ํ์์ ๋ฌธ์์ด๋ก ๋ณํํ๋ค.
var obj = {
name: "jimin",
age: 25
};
var strObj = JSON.stringify(obj);
console.log(typeof strObj, strObj);
//=> string {"name":"jimin","age":25}
var arr = [1, 10, "a", false];
var strArray = JSON.stringify(arr);
console.log(typeof strArray, strArray);
//=> string [1,10,"a",false]
JSON.parse()
JSON.parse()
๋ JSON ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง ๋ฌธ์์ด์ ๊ฐ์ฒด๋ก ๋ณํํ๋ค.
์๋ฒ๋ก๋ถํฐ ๋ธ๋ผ์ฐ์ ๋ก ์ ์ก๋ JSON ๋ฐ์ดํฐ๋ ๋ฌธ์์ด์ด๋ค. ์ด ๋ฌธ์์ด์ ๊ฐ์ฒดํํด์ผํ๋๋ฐ ์ด๊ฒ์ Deserializing(์ญ์ง๋ ฌํ) ๋ผ ํ๋ค. JSON.parse() ๋ฅผ ์ฌ์ฉํด ๋ฌธ์์ด์ ๊ฐ์ฒด๋ก ๋ณํํ ์ ์๋ค.
// strObj
//=> string {"name":"jimin","age":25}
var obj = JSON.parse(strObj);
console.log(typeof obj, obj);
//=> object {name: "jimin", age: 25}
JSONP
์์ฒญ์ ์ํด ์นํ์ด์ง๊ฐ ์ ๋ฌ๋ ์๋ฒ์ ๋์ผํ ๋๋ฉ์ธ์ ์๋ฒ๋ก ์ ๋ฌ๋ ๋ฐ์ดํฐ๋ ๋ฌธ์ ์์ด ์ฒ๋ฆฌํ ์ ์๋ค. ํ์ง๋ง ๋ณด์์์ ์ด์ ๋ก ๋ค๋ฅธ ๋๋ฉ์ธ(http, https ํฌํธ๊ฐ ๋ค๋ฅธ ๊ฒฝ์ฐ ํฌํจ)์ผ๋ก๋ถํฐ ์์ฒญ(CROSS DOMAIN)์ ์ ํ๋๋ค. ์ด๊ฒ์ Same-origin policy ๋์ผ์ถ์ฒ์์น ์ด๋ผํ๋ค.

๋์ผ์ถ์ฒ์์น ์ฐํํ๋ ๋ฐฉ๋ฒ
Proxy
JSONP : script ํ๊ทธ์ ์๋ณธ ์ฃผ์์ ๋ํ ์ ์ฝ์ด ์กด์ฌํ์ง ์๋๊ฒ์ ์ด์ฉํ์ฌ ๋ค๋ฅธ ๋๋ฉ์ธ์ ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ ์์งํ๋ ๋ฐฉ๋ฒ์ด๋ค. ์์ ์ ์๋ฒ์ ํจ์๋ฅผ ์ ์ํ๊ณ ๋ค๋ฅธ ๋๋ฉ์ธ์ ์๋ฒ์ ์ป๊ณ ์ ํ๋ ๋ฐ์ดํฐ๋ฅผ ์ธ์๋ก ํ๋ ํจ์ ํธ์ถ๋ฌธ์ ๋ก๋ํ๋ ๋ฐฉ๋ฒ์ด๋ค.

Cross-Origin Resource Sharing : HTTP ํค๋์ ์ถ๊ฐ์ ์ผ๋ก ์ ๋ณด๋ฅผ ์ถ๊ฐํ์ฌ ๋ธ๋ผ์ฐ์ ์ ์๋ฒ๊ฐ ์๋ก ํต์ ํด์ผํ๋ค๋ ์ฌ์ค์ ์ธ์งํ๋๋ก ํ๋ ๋ฐฉ๋ฒ์ด๋ค.
jQuery Ajax
jQuery๋ Ajax ์์ฒญ๊ณผ ์๋ต์ ์ํด ์ ์ฉํ ๋ฉ์๋๋ค์ ์ ๊ณตํด์ค๋ค.
Low-Level Interface
jQuery.ajax(url[,settings])
//=> jqXHR
jQuery.ajax([settings])
//=> jqXHR
์ฌ๊ธฐ์ []
๋ ๋ฐ๋ณตํด์ ์ฌ์ฉํ ์ ์๋ค๋ ์๋ฏธ์ด๋ค.
settings๋ Ajax ์์ฒญ ์ค์ ์ ๋ณด๋ก key,value์ ์์ผ๋ก ์ด๋ฃจ์ด์ง ๊ฐ์ฒด์ด๋ค.
settings
Description
๋น๊ณ
url
์์ฒญ์ด ์ ์ก๋ url
method
http ์์ฒญ ๋ฐฉ์ (GET/POST)
version added: 1.9.0
type
method์ alias (GET/POST)
1.9.0 ์ด์ ๋ฒ์ ์์ ์ฌ์ฉ
data
์๋ฒ๋ก ์ ๋ฌ๋ ๋ฐ์ดํฐ
dataType
์๋ฒ๋ก๋ถํฐ ๋ฐํ๋ ๋ฐ์ดํฐ์ type default: Intelligent Guess (xml, json, jsonp, script, html, text)
async
์์ฒญ ์ ๋๊ธฐํ ์ฌ๋ถ(TRUE/FALSE) ๊ธฐ๋ณธ์ ๋น๋๊ธฐ(asynchronous) ์์ฒญ
timeout
์์ฒญ ์ ํ ์๊ฐ. ์ ํ ์๊ฐ ์์ ์์ฒญ์ด ์๋ฃ๋์ง ์์ผ๋ฉด ์์ฒญ์ ์ทจ์ํ๊ฑฐ๋ error ์ฝ๋ฐฑ์ ํธ์ถ.
jsonpCallback
JSONP ์์ฒญ์ ์ํ ์ฝ๋ฐฑ ํจ์ ์ด๋ฆ
success
์์ฒญ ์ฑ๊ณต ์ด๋ฒคํธ ํธ๋ค๋ฌ
error
์์ฒญ ์คํจ ์ด๋ฒคํธ ํธ๋ค๋ฌ
complete
์์ฒญ ์๋ฃ ์ด๋ฒคํธ ํธ๋ค๋ฌ
cache
๋ธ๋ผ์ฐ์ ์ ์ํด ์์ฒญ๋๋ ํ์ด์ง๋ฅผ ์บ์ํ ์ ์๋ค.(TRUE/FALSE)
beforeSend
http ์์ฒญ ์ ์ ๋ฐ์ํ๋ ์ด๋ฒคํธ ํธ๋ค๋ฌ
global
์ ์ญํจ์ ํ์ฑํ ์ฌ๋ถ ์ค์
$.ajax({
url: "data/data.json",
dataType: "json"
})
.done(function(data){
// HTTP ์์ฒญ์ด ์ฑ๊ณตํ๋ฉด ๋ฐ์ดํฐ๊ฐ done ๋ฉ์๋๋ก ์ ๋ฌ
console.log("success");
})
.fail(function(jqXHR,textStatus,errorThrown){
// HTTP ์์ฒญ์ด ์คํจํ๋ฉด ์ค๋ฅ์ ์ํ ์ ๋ณด๊ฐ fail() ๋ฉ์๋๋ก ์ ๋ฌ
console.log("fail: ",jqXHR);
})
.always(function(data,textStatus,jqXHR){
// HTTP ์์ฒญ์ ์ฑ๊ณต, ์คํจ ์ฌ๋ถ์ ์๊ด์์ด ์ธ์ ๋ alwayw()๋ฉ์๋ ์คํ
console.log("always: ",data);
});
jqXHR์ jQuery HTTP Request๋ก, ๋ธ๋ผ์ฐ์ XMLHttpRequest Object์ ์งํฉ์ด๋ค. data์ ๊ฑฐ์ ๋น์ทํ ๊ฐ์ ์ง๋๊ณ ์๋๋ฐ ์ถ๊ฐ์ ์ผ๋ก ํต์ status ์ readyStatus ๋ฑ์ ๋ณด๋ด์ค๋ค.
Shorthand Method
jQuery.get()
HTTP GET request๋ฅผ ์ฌ์ฉํ์ฌ ์๋ฒ๋ก๋ถํฐ ๋ฐ์ดํฐ๋ฅผ ๋ก๋ํ๋ค.
jQuery.get(url, [,data][,success][,dataType])
// returns jqXHR
$.get("data.html",function(data){
$("#content").html(data);
});
jQuery.getJSON()
HTTP GET request๋ฅผ ์ฌ์ฉํ์ฌ ์๋ฒ๋ก๋ถํฐ JSON-encoded ๋ฐ์ดํฐ๋ฅผ ๋ก๋ํ๋ค.
jQuery.getJSON(url[,data][,success])
// returns jqXHR
$.getJSON("data.json",function(data){
//...
});
jQuery.getScript()
HTTP GET request๋ฅผ ์ฌ์ฉํ์ฌ ์๋ฒ๋ก๋ถํฐ JavaScript ํ์ผ์ ๋ก๋ํ ํ ์คํํ๋ค.
jQuery.getScript(url[,success])
// returns jqXHR
jQuery.post()
HTTP GET request๋ฅผ ์ฌ์ฉํด ์๋ฒ๋ก๋ถํฐ ๋ฐ์ดํฐ๋ฅผ ๋ก๋ํ๋ค.
jQuery.post(url[,data][,success][,dataType])
// returns jqXHR
.load()
์๋ฒ๋ก๋ถํฐ HTML ๋ฐ์ดํฐ๋ฅผ ๋ก๋ํ๊ณ ๋งค์นํ๋ค.
.load(url,[,data][,complete])
// returns jQuery
$("#content").load("data.html",function(){
console.log("Load was performed");
});
์ฐธ์กฐํ์ด์ง
Last updated
Was this helpful?