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

์„œ๋ฒ„ ์‘๋‹ต ์™„๋ฃŒ

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 ๋™์ผ์ถœ์ฒ˜์›์น™ ์ด๋ผํ•œ๋‹ค.

๋™์ผ์ถœ์ฒ˜์›์น™ ์šฐํšŒํ•˜๋Š” ๋ฐฉ๋ฒ•

  1. Proxy

  2. JSONP : script ํƒœ๊ทธ์˜ ์›๋ณธ ์ฃผ์†Œ์— ๋Œ€ํ•œ ์ œ์•ฝ์ด ์กด์žฌํ•˜์ง€ ์•Š๋Š”๊ฒƒ์„ ์ด์šฉํ•˜์—ฌ ๋‹ค๋ฅธ ๋„๋ฉ”์ธ์˜ ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ง‘ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. ์ž์‹ ์˜ ์„œ๋ฒ„์— ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜๊ณ  ๋‹ค๋ฅธ ๋„๋ฉ”์ธ์˜ ์„œ๋ฒ„์— ์–ป๊ณ ์ž ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ธ์ˆ˜๋กœ ํ•˜๋Š” ํ•จ์ˆ˜ ํ˜ธ์ถœ๋ฌธ์„ ๋กœ๋“œํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.

  1. 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?