JavaScript⑦

HTTP

https://developer.mozilla.org/ko/docs/Web/HTTP/Status

HTTP 메세지 구조

			// 1) Start Line
    // HTTP 메소드, Request target, HTTP version
	
    // HTTP 메소드 : GET, POST, PUT, DELETE
  
			// Request target : HTTP Request가 전송되는 목표 주소
    // HTTP version "  Request 메시지 구조나 데이터가 다를 수 있어서 version 명시

    // 2) Header
    // Date : 현재시간
    // Cache-Control : 캐시 제어
    // Transfer-Encoding : Body 내용 자체 압축 방식
    // Content-Encoding : Body의 리소스 압축 방식
    // Content-type : Body의 미디어 타입 ex) application/json, text/html
    // Content-Length : Body의 길이
    // Content-language : Body를 이해하는데 가장 적절한 언어 ex) ko
    // Connection : 클라이언트와 서버의 연결 방식

    // Server : 웹 서버의 종류
    // Age : max-age 시간내에서 얼마나 흘렀는지 초 단위로 알려주는 값
    // Referrer-policy : 서버 referrer 정책을 알려주는 값 ex) origin, no-referrer, unsafe-url
    // WWW-Authenticate : 사용자 인증이 필요한 자원을 요구할 시, 서버가 제공하는 인증 방식
    // Proxy-Authenticate : 요청한 서버가 프록시 서버인 경우 유저 인증을 위한 값

    // Host : 요청하려는 서버 호스트 이름과 포트번호
    // User-agent : 클라이언트 프로그램 정보
    // Referer : 바로 직전에 머물렀던 웹 링크 주소 
    // Accept : 클라이언트가 처리 가능한 미디어 타입 종류 나열
    // If-Modified-Since : 여기에 쓰여진 시간 이후로 변경된 리소스 취득
    // Authorization : 인증 토큰을 서버로 보낼 때 쓰이는 Header
    // Origin : 서버로 Post 요청을 보낼 때 요청이 어느 주소에 시작되었는지 나타내는 값

    // Header에는 HTTP Request 그 자체에 대한 정보를 담고 있습니다. key : value 형태로 이루어져 있습니다.
    // 이 Header에 경우 Request, Response에만 있는 Header 외에 공통 Header도 있기에 여기선 우선 Request Header에 있는 정보만 알려드리겠습니다.

    // Host : 요청하려는 서버 호스트 이름과 포트번호
    // User-agent : 클라이언트 프로그램 정보
    // Referer : 바로 직전에 머물렀던 웹 링크 주소 
    // Accept : 클라이언트가 처리 가능한 미디어 타입 종류 나열
    // If-Modified-Since : 여기에 쓰여진 시간 이후로 변경된 리소스 취득
    // Authorization : 인증 토큰을 서버로 보낼 때 쓰이는 Header
    // Origin : 서버로 Post 요청을 보낼 때 요청이 어느 주소에 시작되었는지 나타내는 값

JSON

JavaScript Object Notation
데이터를 문자열의 형태로 주고 받도록 만들어진 내장객체
JSON은 클라이언트오 서버간의 HTTP 통신을 위한 텍스트 데이터 포맷

 https://jsonplaceholder.typicode.com/

JSON 표기방식

자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트

https://jsonplaceholder.typicode.com/
https://jsonplaceholder.typicode.com/users

JSON.stringify
JS 객체를 문자열로 변경

• 프론트 -> 서버 데이터 전송
  ? : 문자열로 전송하는 것이 메모리저으로도 효율
• 서버 -> 프론트 데이터 전송

JSON.parse
문자열을 JS 객체로 변경

• 프론트 / 서버가 받은 데이터를 자신의 객체로 바꾸어서 사용

사용방식

let obj1 = {key1: 'v1'}
let obj2 = "{'key2': 'v2'}"
let obj3 = '{"key3": "v3"}'

console.log(obj1.key1)
    
console.log(obj2)
// console.log(JSON.parse(obj2).key2)    //error
console.log(obj3)
console.log(JSON.parse(obj3).key3)

: JSON을 사용할때, key도 문자열로 변경해야 한다.
: JSON 사용핳때에는 반드시 "" 사용해야한다.

---

XHR

XMLHttpRequest
브라우저는 주소창이나 HTML의 form 태그 또는 a 태그를 통해 HTTP 요청 전송 기능을 기본 제공한다. 자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다. Web API인 XMLHttpRequest 객체는 hTTP 요청 전송과 HTTP 응답수신을 위한 다양한 메소드와 프로퍼티를 제공한다.

ajax : 자바스크립트로 비동기 통신

// xhr : XMLHttpRequest
function ajaxTest() {
var xhr = new XMLHttpRequest()

  // onreadystatechange
  // client와 server간에 통신을 할때
  // 중간 단계에 대한 변화를 감지하여 자동으로 실행되는 로직

  // readystate 숫자로 표현
  // 1 : 요청시작
  // 2 : 요청 중
  // 3 : 응답 중
  // 4 : 응답 완료

  // status 200 정상 응답
  xhr.onreadystatechange = function() {
    // console.log(this.readyState)
    // alert(this.readyState)
    if (this.readyState == 4 && this.status == 200) {
      console.log(this.responseText)
    }
  }

  // 실제 요청(방식, 요청주소, 비동기요청(true))
  xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true)
  xhr.send()
}

ajaxTest()