서버와 통신

XHR(XMLHttpRequest) : 서버와 통신을 하도록 하는 객체

---

ajax(Asynchronous javascript and xml) : 동적으로 서버에서 데이터를 주고받는 기술

---

XML : 마크업 언어

---

JSON(javascript object notation)

• 1999년도 자바스크립트의 object를 보고 만든 데이터 포맷
• 텍스트를 기반으로 하여 파일이 가벼움
• 데이터를 직렬화하여 전송할 때 쓰이는 파일
• 프로그램 언어와 플랫폼에 상관없이 사용가능함
• 모바일에서도 서버와 데이터를 전송시 사용된다.
• object => 직렬화 스트링 JSON.stringigy(obj)

---

XMLHttpRequset

서버와 상호작용하기 위한 내장객체

브라우저 환경에서만 동작한다.

https://jsonplaceholder.typicode.com/ 에서 json을 가져올 수 있다.

1. 객체 생성

2. 요청 전송(HTTP 메소드, URL)

3. 헤더값 정의

4. 통신 요청

5. 데이터 받기

//1. 객체 생성
    const xhr = new XMLHttpRequest();
//2. 요청 전송 GET
	xhr.open("GET","https://jsonplaceholder.typicode.com/posts") 
//3.헤더값 정의
    xhr.setRequestHeader("content-type","application/json") 
//4.통신 요청
    xhr.send(); 
//5. 데이터 받기
    xhr.onload= () => { 
       if(xhr.status === 200){ //응답 데이터가 정상적(200)이면
        const res = JSON.parse(xhr.response); //xhr의 응답을 객체로 변환시켜 받는다.
        console.log(res);
      }else {
		//응답 데이터가 정상적(200)이 아닐 경우 출력한다.
        console.error(xhr.status, xhr.statusText)
        //응답 상태 번호와 응답메시지를 출력한다.
      }
    }
//링크의 리소스를 조회, 출력

//1. 객체 생성
    const xhr= new XMLHttpRequest();
// 2. 요청전송 POST
    xhr.open("POST","https://jsonplaceholder.typicode.com/posts");
// 3.헤더값 정의
    xhr.setRequestHeader("content-type","application/json; charser=UTF-8");
//4. 통신요청
    xhr.send(JSON.stringify({title:"foo",body:"bar",userID:1}));
//5. 데이터 받기
    xhr.onload=()=>{
      if(xhr.status===201){
        const res= JSON.parse(xhr.response)
      }
    }
//링크에 리소스를 생성, 생성된 리소스를 조회

1. 객체 생성하기

const 변수명 = new XMLHttpRequest();
const xhr = new XMLHttpRequest();

생성자 함수를 이용하여 서버 전송 객체 생성

---

2. 요청 전송하기

xhr.open("전송방식","경로")
xhr.open("http메소드","경로")
hr.open("GET","https://jsonplaceholder.typicode.com/posts")

<Http 메소드>

GET : 리소스 요청 (내용 조회)
POST : 리소스 생성 (내용 추가) / HTTP의 body 부분에 데이터를 담는다.
PUT : 리소스 수정 (내용 수정)
FETCH : 리소스 일부 수정
DELETE : 리소스 삭제 (내용 삭제)

<경로>

이미지를 지정할 때와 같이, url 주소를 작성한다.

---

3. 요청에 맞는 헤더값 설정

xhr.setRequestHeader("content-type","application/json")

MIME 타입

application
text
multipart

content-type값

application / json
text / plain
multipart / form-data

목적

json 데이터 전송
text 데이터 전송
파일 전송

데이터의 타입에 따라
xhr.send(data);
data는 request의 body에 담겨서 전송이 된다.

---

4. 통신 요청

open("HTTP 메소드","URL")
setRequestHeader("contend-type","application/json")
send(data)

	xhr.send(); //요청하는 것

---

5. 받기

xhr.onload = () => {}

xhr.onload = () => {
  if(xhr.status===200){
    //200은 404와 같은 응답 데이터이다.
    const res = JSON.parse(xhr.response);
    //json 형태를 자바스크립트에서 사용 가능한 객체형태로 변경해서 반환한다.
  }else {
    //응답 데이터가 정상적(200)이 아닐 경우 출력한다.
    console.error(xhr.status, xhr.statusText)
    //응답 상태 번호와 응답 메시지를 출력한다.
  }
}

xhr.status 요청코드

◼ 200번대 : 정상적으로 응답을 했을 때

◼ 400번대 : 클라이언트가 요청을 잘못 했을 때 ex) 404 not found

◼ 500번대 : 서버에서 에러가 발생 했을 때

---

JSON 객체

json은 {}를 사용하며 {} 안에 작성하면 된다.

JSON.stringify()

let dog = {
  name: "구름",
  age: 3,
  hobby: "공놀이",
}
let json = JSON.stringify(dog);
console.log(dog);
/* Object{
age: 3
hobby: "공놀이"
name: "구름"
}*/
console.log(json);
//{"name":"구름","age":3,"hobby":"공놀이"}

객체가 JSON 타입으로 변경되었다.

JSON.parse()

let dog2= JSON.parse(json);
console.log(dog2);
/* Object{
age: 3
hobby: "공놀이"
name: "구름"
}*/

JSON타입이 객체로 변경되었다.

JSON 파일

{
  	"name":"green",
	"age":30,
}