π© JSON(JavaScript Object Notation)
πͺ JSON κ°λ
JSONμ JavaScript Object Notationμ μ½μλ‘μ
μ΄λ¦μ ν΅ν΄ μλ°μ€ν¬λ¦½νΈ μ€λΈμ νΈμ κ΄λ ¨λ νμΌμ΄λ κ±Έ μ μΆν μ μμ΅λλ€.
1999λ
λ ECMAScript μ μΈλ²μ§Έ λ²μ μ μ°μ¬μ§ Object μμ
ν° μκ°μ λ°μ λ§λ€μ΄μ§ λ°μ΄ν° ν¬λ§·μΌλ‘
μλ°μ€ν¬λ¦½νΈμ λ§μ°¬κ°μ§λ‘ key μ velue λ‘ μ΄λ£¨μ΄μ Έμμ΅λλ€.
β’ λ°μ΄ν° ν¬λ§·(Data Format)μ΄λ?
μ΄λ€ νλ‘κ·Έλλ° μΈμ΄λ‘λ μ½μ μ μλ λ¨μν νμΌ ν¬λ§·μΌλ‘,
μ΄λ λ¨μν¨μ XML κ°μ ν¬λ§·μ λΉν΄ μ»΄ν¨ν°κ° μ²λ¦¬νκΈ° μ½λ€λ κ²μ μλ―Ένλ€.
JSON λ°μ΄ν° νμ
μ λΈλΌμ°μ λΏλ§ μλλΌ λͺ¨λ°μΌμμ μλ²μ λ°μ΄ν°λ₯Ό μ£Όκ³ λ°μ λ,
λλ μλ²μ ν΅μ μ νμ§ μμλ Object λ₯Ό file μμ€ν
μ μ μ₯ν΄μΌν λ λ±
λ€μν μν©μμ λ§μ΄ μ΄μ©λκ³ μμ΅λλ€.
πͺ JSON νΉμ§
1) simplest data interchange format
-> λ°μ΄ν°λ₯Ό μ£Όκ³ λ°μ λ μΈ μ μλ κ°μ₯ κ°λ¨ν νμΌ ν¬λ§·μ
λλ€.
2) lightweight text-based structure
-> ν
μ€νΈλ₯Ό κΈ°λ°μΌλ‘ νμ¬ κ°λ³μ΅λλ€.
3) easy to read
-> μ¬λμ λμΌλ‘ μ½κΈ° νΈν©λλ€.
4) key-value pairs
-> keyμ value λ‘ μ΄λ£¨μ΄μ Έ μμ΅λλ€.
5) used for serialization and transmission of data between the network the network connection
-> λ³΄ν΅ μλ²μ λ°μ΄ν°λ₯Ό μ£Όκ³ λ°μ λ μ§λ ¬ν(serialize), μμ§λ ¬ν(deserialize)λ₯Ό μ¬μ©ν©λλ€.
β’ μ§λ ¬ν(serialize)
: κ°μ²΄ => λ¬Έμμ΄λ‘ λ³ννλ μμ
μ λ§ν©λλ€.
: ν΅μ μν λλ λ¬Έμμ΄λ‘ μ§λ ¬ννμ¬ μ£Όκ³ λ°λ κ²μ΄ μμ ν©λλ€.
: μ¬μ© λ°©λ²μ JSON.stringfy(JSONνμμ κ°μ²΄)μ
λλ€.
β’ μμ§λ ¬ν(deserialize)
: λ¬Έμμ΄ => κ°μ²΄λ‘ λ³ννλ μμ
μ λ§ν©λλ€.
: ν΅μ μΌλ‘ λ°μ λ¬Έμμ΄μ κ°μ²΄λ‘ μμ§λ ¬ννμ¬ μ¬μ©νλ κ²»μ΄ νΈλ¦¬ν©λλ€.
: μ¬μ© λ°©λ²μ JSON.parse(JSONνμμ λ¬Έμμ΄)μ
λλ€.
6) independent programming language and platform
-> νλ‘κ·Έλ¨ μΈμ΄λ νλ«νΌμ μκ΄μμ΄ μ¬μ©μ΄ κ°λ₯ν©λλ€.
πͺ JSON μμ
1) μ§λ ¬ν(serialize) μμ
// JSON
// JavaScript Object Notion
// 1. Object to JSON
// stringify(obj)
let json = JSON.stringify(true);
console.log(json); // true
json = JSON.stringify(['appple', 'banana']);
console.log(json); // ["apple", "banana"]
const cat = {
name: 'nabi',
color: 'white',
size: null,
birthDate: new Date(),
jump: () => {
console.log(`${this.name} can jump!`);
},
};
json = JSON.stringify(cat); // '{"name":"nabi","color":"white","size":null,"birthDate":"2022-05-24T07:37:56.433Z"}'
console.log(json); // {"name":"nabi","color":"white","size":null,"birthDate":"2022-05-24T07:37:56.433Z"}
// μνλ νλ‘νΌν°(property)λ§ μΆλ ₯
json = JSON.stringify(cat, ["name"]); // {"name":"nabi"}
// callback ν¨μ μ΄μ©
json = JSON.stringify(cat, (key, value) => {
console.log(`key: ${key}, value: ${value}`);
return key === 'name' ? 'ohmyo' :value;
}); // '{"name":"ohmyo","color":"white","size":null,"birthDate":"2022-05-24T07:37:56.433Z"}'
2) μμ§λ ¬ν(deserialize) μμ
// 2. JSON to Object
// parse()
json = JSON.stringify(cat);
const obj = JSON.parse(json);
const obj = JSON.parse(json, (key, value) => {
console.log(`key: ${key}, value: ${value}`);
return key === 'birthDate' ? new Date(vlaue) : value;
});
console.log(obj); // {name: 'nabi', color: 'white', size: null, birthDate: '2022-05-24T07:37:56.433Z'}
cat.jump(); // can jump!
console.log(cat.birthDate.getDate()); // 24
π© AJAX(Asynchronous JavaScript and XML)
πͺ AJAX μ κ°λ
Ajaxλ μλ‘κ³ μΉ¨μμ΄ μλ²μκ² GET μμ²μ νλ μͺΌκ·Έλ§ν JS μ½λμ
λλ€.
μΉ νμ΄μ§μμ λμ μΌλ‘ μλ²μκ² λ°μ΄ν°λ₯Ό μ£Όκ³ λ°μ μ μλ κ°λ° κΈ°λ²μ΄κΈ° λλ¬Έμ
Ajaxλ₯Ό μ¬μ©νλ©΄ νμ΄μ§λ₯Ό μλ‘κ³ μΉ¨ νμ§ μμλ μΌλΆμ λ°μ΄ν°λ₯Ό λ°κΏ μ μμ΅λλ€.
β’ μλ²λ?
μ¬μ©μκ° λ°μ΄ν°λ₯Ό μꡬνλ©΄ λ°μ΄ν°λ₯Ό 보λ΄μ£Όλ νλ‘κ·Έλ¨μ λλ€.
μλ²μκ² λ°μ΄ν°λ₯Ό λ°κΈ° μν΄μ μλμ λ°©λ²μ μ€μν΄μΌν©λλ€.
1) λ°μ΄ν°μ μ νν URL
2) URL λ‘ GET μμ²
λ°μ΄ν° λ‘λλ₯Ό μν΄ XHR(XML Http Request) λΌλ κ°μ²΄(Object)λ₯Ό μ΄μ©νλ κ²μ΄ νΉμ§μ λλ€.
XHR(XML Http Request) Object λ λΈλΌμ°μ API μμ μ 곡νλ Object μ€μ νλλ‘
μ΄ Objectλ₯Ό μ΄μ©νλ©΄ κ°λ¨νκ² μλ²μκ² λ°μ΄ν°λ₯Ό μμ²νκ³ λ°μμ¬ μ μμ΅λλ€.XML μ΄λ Html κ³Ό κ°μ λ§ν¬μ μΈμ΄μ€ νλλ‘ νκ·Έλ€μ μ΄μ©νμ¬ λ°μ΄ν°λ₯Ό λνλ λλ€.
XML λ‘ μλ²λ₯Ό ν΅μ ν κ²½μ° λΆνμν νκ·Έλ€μ΄ λ§μ΄ λ€μ΄κ°κΈ° λλ¬Έμ
νμΌ μ¬μ΄μ¦κ° 컀μ§λΏλ§ μλλΌ κ°λ μ±λ μ’μ§ μμμ Έ μμ¦μλ JSONμ λ§μ΄ μ¬μ©νκ³ μμ΅λλ€.
πͺ AJAX μ λμ μ리
μ¬μ©μμ μν΄ μ΄λ²€νΈκ° λ°μνλ©΄ νΈλ€λ¬μ μν΄ λ°λ‘ μλ°μ€ν¬λ¦½νΈλ₯Ό λΆλ¬μ΅λλ€.
κ·Έ ν μλ°μ€ν¬νΈμμλ XHR κ°μ²΄(Object)λ₯Ό μ΄μ©νμ¬ μλ²λ‘ μμ²μ 보λ΄λλ°,
κ·Έλμ μΉ λΈλΌμ°μ λ μλ΅μ κΈ°λ€λ¦΄ νμ μμ΄ λ€λ₯Έ μμ
μ μνν μ μμ΅λλ€.
μ΄ λ°©μμ λΉλκΈ° λ°©μμ΄λΌκ³ λΆλ¦
λλ€.
πͺ AJAX μ μ₯μ
리λ‘λ© μμ΄ μΉνμ΄μ§λ₯Ό μ νν μ μμ΄ λΆλλ¬μ΄ μΉ, μ±μ λ§λ€ μ μμ΅λλ€.
πͺ AJAX μ λ¨μ
νμ΄μ§μ 리λ‘λ©μ΄ μκΈ° λλ¬Έμ ννμ΄μ§μμ μ§μμ μΌλ‘ μ¬μ©μ
리μμ€κ° κ³μ μμ¬ νμ΄μ§κ° λλ €μ§ μ μμ΅λλ€.
π© Ajax μ¬μ©λ°©μ
1) μλ JS λ°©μ
var ajax = new XMLHttpRequesst();
ajax.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
console.log(ajax.responseText)
}
};
ajax.open("GET", "URL λ§ν¬", true);
ajax.send();
2) μμ¦ JS λ°©μ
fetch('URL λ§ν¬')
.then((response) => {
if(!response.ok) {
throw new Error('400 νΉμ 500 μλ¬κ° λ°μνμ΅λλ€!')
}
return response.json()
})
.then((κ²°κ³Ό) => {
console.log(κ²°κ³Ό)
})
.catch(() => {
console.log('μλ¬κ° λ°μνμ΅λλ€!')
})
3) μΈλΆ λΌμ΄λΈλ¬λ¦¬ λ°©μ
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>
axios.get('URL λ§ν¬')
.then((result) => {
console.log(result.data)
}).catsh(() => {
console.log('μλ¬κ° λ°μνμ΅λλ€!')
})
π© JSON κ°μ²΄λ₯Ό μ΄μ©ν Ajaxμμ² μμ
μλμ κ°μ ννμ JSON ννλ₯Ό μ€λΉν©λλ€.
{
"μ€νμ΄ν¨λ°λ¦¬":[
{
"name":"λ‘μ΄λν¬μ ",
"trait":"spy",
},
{
"name":"μλ₯΄ν¬μ ",
"trait":"assassin",
},
{
"name":"μλν¬μ ",
"trait":"superpowers",
}
]
}
κ·Έ λ€μ, μλ μ½λλ₯Ό ajax_text.htmlμ μΆκ°ν©λλ€.
첫λ²μ§Έ μΈμλ‘ indexλ₯Ό μ£Όκ³ λλ²μ§Έ μΈμλ‘ item(μ½λ°±ν¨μ)μ μ€λλ€.
indexλ₯Ό κΈ°μ€μΌλ‘ λ°λ³΅μ νλ©°
μ νμμμ appendν¨μλ₯Ό μ¬μ©νμ¬ κ°μ μΆκ°ν©λλ€.
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>μ€νμ΄ν¨λ°λ¦¬</title>
</head>
<p id="test"></p><br>
<button type="button">ν΄λ¦</button>
<!-- json λΆλ¬μ pνκ·Έμ λ£κΈ° -->
<body>
<script>
$(function() {
$.ajax({
type: 'get' , // νμ
url: 'ajaxtest.json' , // μ΄λλ‘ κ°κ±΄μ§
dataType : 'json' ,
success: function(data) { // κ°λ€μ¨ λ€μ κ²°κ³Όκ°
alert('μ μ μ±κ³΅'); // ν΄λΉ κ°μ μΆλ ₯νλ©΄ νμΌμ μ°Ύμλ€λ μλ―Έ
alert(data); // [object Object] [object Object] [object Object]
// λ°μ΄ν°λ₯Ό νμΈνκ³ μΆμ κ²½μ°
// let spy_family = JSON.stringify(data); // <> parse()
// alert(spy_family)
$.each(data, function(index, item) { // λ°μ΄ν° =item
$("#test").append(index + " "); // indexκ° λλ λκΉμ§
$("#test").append(item.name + " ");
$("#test").append(item.trait + "<br>");
});
},
}
});
});
</script>
</body>
</html>