[Javascript] 자바스크립트로 비동기 데이터 전송 구현 방법

---

---

# 비동기 함수

요즘 웹 추세는 비동기로 데이터 통신을 하는 방식으로 가고 있다.

비동기 데이터 통신을 모르면 웹을 할줄 모르는 사람이라고 할 정도로

비동기 데이터 통신은 필수적이며 절대적이다.

때문에 우리는 비동기 방식을 알아햐 한다.

비동기 방식과 동기방식의 차이는 조만간 포스팅 하도록 하겠다.

먼저 코드를 보도록하겠다.

---

const req = new XMLHttpRequest()

req.open('GET', '/resource', true);

req.onreadystatechange = () => {

  if (req.readyState === 4) {

    if (req.status === 200) success()

    else faile()

  }

}

req.send(null) 

> 우리는 XMLHttpRequest객체를 사용하여 비동기 데이터 통신을 구형할 것이다.

> 그러므로 XMLHttpRequest객체를 생성하고

> url에 접근하기 위해 XMLHttpRequest객체에 open메소드를 사용한다.

> open(method , url , async , user , password )

> 간단히 메소드와 url, async(비동기) 여부만 넣고 데이터를 접근하기 위한 준비를 마친다.

> onreadystatechange  메소드를 통해 데이터를 실제로 접근 하며

> readyState에 따라 정상적으로 비동기 데이터 통신 순서에 따라 이벤트를 구성한다.

> 0 : 클라이언트를 생성했지만 open()을 호출하지 않았다.

> 1 : open()을 호출했다.

> 2 : send()를 호출했고, Header 및 Status를 사용할 수 있다.

> 3 : 결과값을 다운로드 하는 중이다.

> 4 : 데이터 통신이 완료 되었다.

> 따라서 Status값에 따라 해당 결과를 리턴하면 된다.(정상 status 200 그 외 특정 오류)

---

# 마무리

위 포스트는 제가 직접 제작한 것 입니다.

그렇기 때문에 틀린점이나 설명이 엉성한 점이 존재할 수 있습니다.

만약 틀린점이나 설명이 엉성한 부분이 존재하면 댓글로 알려주세요.

빠른 처리 하도록 하겠습니다.

티스토리 앱으로는 댓글 이용이 불가능 하므로 웹 브라우저로 봐 주세요

(URL : http://junprogramer.tistory.com/)

읽어주셔서 감사합니다.