javascript

Ajax

Posted by Seongkyun Yu on 2020-04-05
Estimated Reading Time 2 Minutes
Words 440 In Total
Viewed Times

1. Ajax란

자바스크립트를 이용해 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식

페이지 전체 로드가 아닌 갱신할 부분만 갱신한다


2. JSON

클라이언트와 서버 간 데이터 교환을 위한 데이터 포맷

순수 텍스트로 구성된 규칙 있는 데이터 구조

JSON
1
2
3
4
5
{
  "name": "Yu",
  "location": "earth",
  "age": 32
}

2.1 JSON.stringify

객체를 JSON으로 바꿔준다.

첫 번째 인수로 객체, 두 번째 인수로 함수(옵션), 세 번째로 공백으로 사용되는 스페이스의 수(옵션)를 전달할 수 있다.

JSON.stringify()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const man = { name: "Yu", location: "earth", age: 32 };

function filter(key, value) {
  // undefined: 반환하지 않음
  return typeof value === "number" ? undefined : value;
}

// 객체 => JSON 형식의 문자열 + replacer + prettify
const strFilteredObject = JSON.stringify(o, filter, 2);
console.log(typeof strFilteredObject, strFilteredObject);
/*
string {
  "name": "Yu",
  "location": "earth"
}
*/

2.2 JSON.parse

JSON을 객체 or 배열로 변환한다.

JSON.parse()
1
2
3
4
5
6
7
8
9
10
11
const man = { name: "Yu", location: "earth", age: 32 };

const strFilteredObject = JSON.stringify(o, null, 2);
console.log(typeof strObject, strObject);
/*
string {
  "name": "Yu",
  "location": "earth",
  "age": 32
}
*/



3. XMLHttpRequest

XMLHttpRequest 객체를 이용해 Ajax 요청을 전송할 수 있다.


3.1 Ajax 요청 순서

3.1.1 XMLHttpRequest.open

XMLHttpRequest.open
1
2
3
4
5
// XMLHttpRequest 객체의 생성
const xhr = new XMLHttpRequest();

// 비동기 방식으로 Request를 오픈한다
xhr.open("GET", "/users");

3.1.2 XMLHttpRequest.send

XMLHttpRequest.send
1
2
3
4
5
6
7
8
// XMLHttpRequest 객체의 생성
const xhr = new XMLHttpRequest();

// 비동기 방식으로 Request를 오픈한다
xhr.open("GET", "/users");

// Request를 전송한다
xhr.send();

3.1.3 XMLHttpRequest.setRequestHeader

HTTP Request Header의 값을 설정

반드시 XMLHttpRequest.open 메소드 호출 이후에 호출해야 함

타입 서브타입
text 타입 text/plain, text/html, text/css, text/javascript
Application 타입 application/json, application/x-www-form-urlencode
File을 업로드하기 위한 타입 multipart/formed-data
XMLHttpRequest.setRequestHeader
1
2
3
4
5
6
7
8
9
// json으로 전송하는 경우
xhr.open("POST", "/users");

// 클라이언트가 서버로 전송할 데이터의 MIME-type 지정: json
xhr.setRequestHeader("Content-type", "application/json");

const data = { id: 3, title: "JavaScript", author: "Park", price: 5000 };

xhr.send(JSON.stringify(data));

3.2 Ajax response

Ajax Response
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// XMLHttpRequest 객체의 생성
const xhr = new XMLHttpRequest();

// XMLHttpRequest.readyState 프로퍼티가 변경(이벤트 발생)될 때마다 onreadystatechange 이벤트 핸들러가 호출된다.
xhr.onreadystatechange = function (e) {
  // readyStates는 XMLHttpRequest의 상태(state)를 반환
  // readyState: 4 => DONE(서버 응답 완료)
  if (xhr.readyState !== XMLHttpRequest.DONE) return;

  // status는 response 상태 코드를 반환 : 200 => 정상 응답
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.log("Error!");
  }
};

readXMLHttpRequest.readyState의 값

value state Description
0 UNSENT XMLHttpRequest.open() 메소드 호출 이전
1 OPENED XMLHttpRequest.open() 메소드 호출 완료
2 HEADERS_RECEIVED XMLHttpRequest.send() 메소드 호출 완료
3 LOADING 서버 응답 중(XMLHttpRequest.responseText 미완성 상태)
4 DONE 서버 응답 완료

참고자료: poiemaweb.com

If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !

FEATURED TAGS
javascript
FRIENDS
ESC