XMLHttpRequset

서버와 상호작용하기 위한 내장객체
브라우저 환경에서 동작한다.
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("http 메소드","경로")

xhr.open("GET","https://jsonplaceholder.typicode.com/posts")

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

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

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

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

MIME 타입	content-type 값	목적
application	application/json	json데이터 전송
text	text/plain	text 데이터 전송
multipart	multipart/form-data	파일 전송

데이터의 타입에 따라

xhr.send(data);
data는 request의 body에 담겨서 전송이 된다.

---

서버와 통신

• ajax(Asynchronous javascript And XML)
  👉 동적으로 서버에서 데이터를 주고받는 기술
• XHR(XMLHttpRequest)
  👉 서버와 통신할 때 쓰는 object
• XML
  👉 마크업 언어
• JSON(Javascript object notation)
  👉 데이터 포맷
  • 텍스트를 기반으로 하여 가볍고 데이터를 직렬화 하여 전송할 때 쓰인다.
  • 프로그램 랭귀지 플랫폼에 상관없이 쓸 수 있다.
  • 모바일에서 서버와 데이터를 전송시에 사용한다.

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 요청코드

HTTP 상태코드

• 200번대: 정상적인 응답
• 400번대: 클라이언트가 요청을 잘못함
• 500번대: 서버에서 에러가 발생함

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,
}

위와 같은 형태를 띈다.