XMLHttpRequest
- Ajax의 핵심
- 서버와 데이터를 주고 받을 때, 사용
- W3C 표준으로 정의 (주요 웹 브라우저에 내장)
*IE5, IE6 => ActiveXObject 이용
XMLHttpRequest 사용 방법
- IE7 이상, 크롬, 파이어폭스, 사파리, 오페라
- var 변수명 = new XMLHttpRequest();
- IE5, IE6
- var 변수명 = new ActiveXObject("Microsoft.XMLHTTP");
var httpRequest;
if (window.XMLHttpRequest) { // 모질라, 사파리, IE7 + ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE6 이하
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
Fetch 란
- Promise 기반으로 구성
- 비동기 방식
- JS 기본 기능
Fetch API는 HTTP에 대한 자세한 정보를 제공하며 JavaScript에서 접근하고 있다.
Fetch는 비동기 처리 방식 중 하나인데, XMLHttpRequest로 이용해서 비동기로 처리하는 방식은 복잡하다. 그래서 Fech를 사용해서 더 좋은 기능을 쉽게 사용할 수 있다.
const data = { username : 'example' };
fech('https://example.com/profile', {
method : 'POST', // 또는 'PUT'
headers : {
'Content-Type' : 'application/json',
},
body : JSON.stringify(data),
})
.then((response) => response.json())
.then((data) => {
console.log('성공:', data);
}
);
Fetch 사용 방법
fetch(url, option)
.then((res) => res.text())
.then(text => console.log(text));
// url : 요청할 url
// option
// - http 메서드, headers, body 정의
// - 생략 가능
// - default Get 방식
// ex)
fetch('http://example.com/movies.json')
.then((response) => response.json())
.then((data) => console.log(data));
비동기 처리 방식 3가지
- jQuery 라이브러리 Ajax를 이용
- XMLHttpRequest
- JavaScript가 고유적으로 가지고 있는 비동기 처리 방식인 Fetch 이용
비동기 처리 중 가장 강력한 특징
- 서버에 통신할 때, 전체 페이지를 로딩시키는 것이 아니라 일부 페이지만 로드를 해서 렌더링하는 형식
JSON
- JavaScript Object Notation
- 자바스크립트 객체 문법 (객체 리터럴)
- 구조화된 데이터 표현을 위한 표준 형식
- 데이터 전송 시, 사용
- 문자열 형태, 따옴표 표시
JSON 형식
- 다양한 데이터 형식 가능
{
"name" : "홍길원",
"age" : 30,
"gender" : "남",
"school" : null,
"family" : {"father" : "홍투길", "mom" : "김연삼"}
}
JSON 내장 객체
- JSON.parse()
- JSON 객체 -> 자바스크립트 객체
- JSON.stringify()
- 자바스크립트 객체 -> JSON 객체
'Script > JavaScript' 카테고리의 다른 글
[JavaScript] Chapter 16. Prototype(프로토타입) (0) | 2022.12.16 |
---|---|
[JavaScript] Chapter 15. This (0) | 2022.12.16 |
[JavaScript] Chapter 13. Ajax (0) | 2022.12.15 |
[JavaScript] Chapter 12. IIFE (0) | 2022.12.14 |
[JavaScript] Chapter 11. 호이스팅 (0) | 2022.12.14 |
댓글