2020.02.02 비동기식 처리모델

비동기식 처리모델

 

우선 자바스크립트에서는 동기식과 비동기식 처리방식이 있다.

클라이언트부분과 서버 부분간 연결이 되었을때 상황에 따라 동기식과 비동기식 처리방식을 선택한다.

 

동기식은 클라이언트에서 서버에 요청을 보내면 서버는 요청을 받아들이고

클라이언트에게 다시 돌아갈때 페이지를 새로고친다.

하지만 비동기식은 클라이언트와 서버간의 요청을 주고받을때 페이지를 새로고치지않는다.

그래서 보다 빠르게 실행할수있다.

 

JSON

 

클라이언트와 서버간 요청을 주고받을때 데이터교환규칙을 말한다.

 

 

JSON.stringify()

 

객체를 JSON의 문자열 형태로 받을수있다.

 

JSON.parse()

 

JSON의 문자열 형태를 객체로 받을수있다.

 

 

XMLHttpRequest

 

 

클라이언트의 한 부분인 브라우저에서 ajax에 요청을 보낼때 XMLHttpRequest를 사용하여 보낸다.

그리고 서버에서 보낸 결과를 처리할때도 사용하게된다.

 

 

XMLHttpRequest.open(method, url[, async])

 

 

XMLHttpRequest.open(method, url[, async])을 통하여 요청을 준비한다.

 

 

XMLHttpRequest.send()

 

 

XMLHttpRequest.open(method, url[, async])을 이용해 준비된 요청을

XMLHttpRequest.send()를 이용하여 서버에 보낸다.

괄호안에 인수를 넣어서 전달할수도 있다.

GET방식일 경우 null이 될것이고

POST방식일 경우 인수를 넣으면 된다.

 

 

XMLHttpRequest.setRequestHeader

 

 

XMLHttpRequest.setRequestHeader는 XMLHttpRequest.send()를 통해 데이터를 보낼때 Header를 설정해주는 기능을 가지고있다.

ContentType과 Accept가 있다.

 

ContentType

출처: https://poiemaweb.com/js-ajax

사용법은 이렇게 된다.

 

const xhr = new XMLHttpRequest();

xhr.setRequestHeader('Content-type', 'application/json');

 

text타입을 바꾸고 싶다면 위치는 그대로 이름만 바꾸면 된다.

 

Accept

 

Accept는 서버가 클라이언트에 데이터를 보낼때 그 데이터의 Application 타입을 정해주는것이다.

 

xhr.setRequestHeader('Accept', 'application/json');

 

위에 방법이랑 똑같다.

 

 

Ajax Response

 

 

서버에서 보낸 결과를 다시 클라이언트에서 받아야하지만 우리가 왔는지 안왔는지를 정확히 알수없다.

대신에 xhr.onreadystatechange()를 통해 간접적으로 알수있다.

바로 서버에서 보낸 데이터가 클라이언트로 올 경우에만 실행되는 함수를 사용해주는것이다.

저 xhr.onreadystatechange() 안에 실행할 함수를 하나 넣으면 끝.

만약에 안온다면 왜 안오는지 알고싶다면

xhr.readyState를 이용하여 찾아보자.

0~4번까지 각 번호가 있고 의미가 적혀있다.

현재 내가 서버로부터 받은 데이터의 상태가 몇번인지 체크하고 어디서 잘못되었는지 확인하면

에러를 고치는데 더 수월할것이다.