43.1 Ajax란?
Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식이다.
기존의 웹페이지는 데이터를 주고받기 위해 통신이 필요하지 않은 부분까지 매번 다시 전송 받아야만 했다. 또한 HTML을 완전히 새로 받아야 하므로 화면이 깜빡이는 현상까지 있다. 하지만 Ajax의 등장으로 서버로부터 필요한 데이터만 비동기 방식으로 전송받아 필요하지 않은 부분은 다시 렌더링 할 필요가 없어졌다고 생각하면 된다.
43.2 JSON
JSON은 JavaScript Object Notation의 약자로 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다.
JSON을 사용할 때 유의할 점은 문자열을 사용할때 반드시 큰따옴표("")를 사용해야 한다는 것이다. 작은따옴표('')는 사용이 불가능 하다.
{
"name": "Jeong",
"age": 25,
"address": "Ulsan",
"gender": "male"
}43.2.2 JSON.stringify
JSON.stringify는 객체를 JSON 포맷 문자열로 변환한다. 이를 직렬화 라고도 한다. 객체 뿐만 아니라 배열도 JSON 문자열로 변환이 가능하다.
const obj = { name: 'Jeong', age: 25 };
const json = JSON.stringify(obj);
console.log(json) // {"name":"Jeong","age":25}43.2.3 JSON.parse
JSON.parse는 JSON 포맷의 문자열을 객체로 변환한다.
const obj = { name: 'Jeong', age: 25 };
const json = JSON.stringify(obj);
const reObj = JSON.parse(json);
console.log(reObj); // { name: 'Jeong', age: 25 };43.3 XMLHttpRequest
자바스크립트는 HTTP 요청을 전송하기 위해 XMLHttpRequest 객체를 사용한다.
43.3.1 XMLHttpRequest 객체 생성
XMLHttpRequest 객체는 XMLHttpRequest 생성자 함수를 호출하여 생성한다. 이는 브라우저 환경에서만 작동한다.
const xhr = new XMLHttpRequest();43.3.2 XMLHttpRequest 객체의 프로퍼티와 메서드
XMLHttpRequest 객체는 다양한 내장 프로퍼티와 메서드를 제공한다. 필요에 따라 찾아서 쓰도록 하자.
43.3.3 HTTP 요청 전송
- XMLHttpRequest.open 메서드로 HTTP 요청을 초기화 한다.
- 필요에 따라 XMLHttpRequest.setRequestHeader 메서드로 특정 HTTP 요청의 헤더 값을 설정한다.
- XMLHttpRequest.send 메서드로 HTTP 요청을 전송한다.
