자바스크립트 비동기 AJAX

JS 비동기 통신

- (Asynchronous Javascript and XML)은 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술입니다.

 

일반적인 경우 데어터 처리는 요청 순서대로 진행하지만 AJAX 는 순차적으로 진행하지 않습니다. 

이런 방식을 비동기 방식이라고 합니다. 

 

자바스크립트의 비동기 방식은 상당히 까다로운데, 이를 간단하게 사용할수 있게 해주는 최신 자바스크립트 API인 fetch API를 이용하도록 하겠습니다.

 

API는 중간에서 작동하는 특정기능이라고 할수있습니다. 

 

동기적이라는거는 한가지 작업을 순서대로 진행합니다. 

원리를 보면 어디인가에 파일을 가져옵니다(지구반대편이라고도 할수있습니다.) 아무리 빨라도 1초이상은 걸립니다.

동기적으로 실행시키면 1다음에 2번에서 펜딩으로 3초 혹은 한시간 등등 걸릴수도 있습니다 (사람들이 몰려서 서버가 불안정하거나해서)

그래서 1 다음에 2번으로 넘어갈때 펜딩으로 무한정 으로 대기할수도 있어서

비동기적으로 실행을 시킵니다.

promise라는 함수로 실행해서 1다음에 3번으로 넘어가고 2번에서 답을 받으면 그 후에 돌아옵니다. 

 

 var pro = fetch("hi.text");
        pro.then(function(response){
            console.log(response);

        })
 console.log(1)
        fetch("hi.text").then(function(response){
        console.log(2)

  })
  console.log(3)
        console.log(31)
        console.log(32)

답은 

이렇게 숫자2가 맨 마지막에 나오는것을 볼수 있겠습니다.

 

 

fetch를 사용하면 promise객체를 받는다.(promise에는 요청에 대한 상태정보가 있습니다. 

promise안에 then함수안에 콜백함수를 넣으면, 콜백함수의 첫번째 매개변수에 응답에 대한 내용을 넣어줍니다.

단 then()은 시간이 오래걸릴수 있기 때문에 비동기적으로 실행됩니다. 

 

 

 

 

 

 

XML 형식으로도 간단하게 변경하여 만들수있습니다. 

xml파일은 문자열의 형식으로 일단 변경을 해주어야합니다. 

변경하는 방법은 new DOMparser()을 써서 문자열의 형태로 만들어줍니다. 

 

 

그리고 

 

response를 콘솔로 찍어보면 status:200 이 라는 값이 나오느데 보면 뜻은 성공이라는 것이다.  그외에 값들중엔 404 혹은 505이 나올수 있습니다.