99년 MS에서 개발
구글 맵스에서 App과 비견될 성능을 보여 주목받게 됨
장점
전통적인 방식
AJAX
HTTP 통신을 위한 데이터 포멧
JSON.stringify(obj,replacer,space)
Object
{
name: "Invidam",
age: 23,
hobby: ["movie", "game"],
};
JSON JSON.stringify(Object, null, 2)
{
"name": "Invidam",
"age": 23,
"hobby": [
"movie",
"game"
]
}
replacer은 함수 or 배열로 key,value를 받아 해당하는 속성만 JSON화 시킨다.
["name"]
return value
를 한 요소들만 JSON화 한다.return value
하지 않으면 undefined
이 된다.(key, value) => {return value}
space는 문자열의 간격을 의미한다.
"\t"
를 이용하면 깔끔하다.JSON.parse(json) : JSON to String
new XMLHttpRequest()
프로토타입 프로퍼티
"OK"
)json,text, ...
)이벤트 핸들러
메서드
정적 프로퍼티
요청 전송
XMLHttpRequest.prototype.open(method,url[,async])
XMLHttpRequest.prototype.send(payLoad)
XMLHttpRequest.prototype.setRequestHeader(header)
응답 처리
https://jsonplaceholder.typicode.com/ : 테스트 사이트
const xhr = new XMLHttpRequest();
xhr.open("get", "https://jsonplaceholder.typicode.com/todos/1");
xhr.send();
xhr.onreadystatechange = () => {
if (xhr.status === 200) {
const $p = document.querySelector("p");
console.log(xhr.response);
$p.textContent = JSON.stringify(xhr.response, null, "\t");
}
};
onreadystatechange
이벤트를 통해 status === 200
(응답 성공) 인 경우 response
를 출력한다.