Javascript 비동기통신 - XMLHttpRequest(XHR)

업무 중 비동기 통신으로 jsp에서 문자열을 받아오고 싶은데 라이브러리 없이 바닐라js로 해야하는 상황이 있었다.

찾아보니 대표적으로 XMLHttpRequest(XHR)과 Fetch API를 사용하는 두가지 방법이 있었는데 첫번째 방법으로 해결했다.

 

getUserInfo() {
    let jspRes = null;
    let trimmedRes = null;
    let id = null;    
    
    // XMLHttpRequest 객체 선언
    const xhr = new XMLHttpRequest();

	// ('방식', 'url', '비동기여부(true가 비동기)')
    xhr.open('GET', '여기에 url 입력', false);
 
    xhr.onreadystatechange = function() {    
      if (xhr.readyState == 4 && xhr.status == 200) {
      	
        // xhr의 response를 변수에 저장
        jspRes = xhr.response;
        
        // 문자열 trim
        trimmedRes = jspRes.split('[');
        id = trimmedRes[1].split(']');
      }
    };

    xhr.send();

    return {
      "result": "1234",
      "userId": id[0],
      "userNm": "유저이름"
    };
  }

 

시간을 너무나 허비했지만 해결되어서 다행이다...

 

이 밖에도 앞서 언급한 fetch() 함수를 이용하는 방법과

라이브러리를 사용한 jquery, axios 등의 방법이 있는것 같다.

 

참고 : 

https://velog.io/@dasssseul/JS-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%86%B5%EC%8B%A0-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0XHR%EA%B3%BC-Fetch-API

[JS🐣] 비동기 통신 이해하기(XHR과 Fetch API)

https://m.blog.naver.com/dndlab/221783285664

[블로그] Javascript에서의 비동기 통신