[JavaScript] XMLHttpRequest를 이용한 바닐라자바스크립트 ajax

XMLHttpRequest를 이용한 바닐라자바스크립트 ajax

웹을 개발하면서 ajax기술은 거의 필수라고 해도 무방할정도로 널리 사용되어지고 있습니다. 하지만 대부분의 ajax들이 과거 jquery가 유행하던 시절에 jquery를 기반으로 하여 작성되어 지다보니 jquery를 사용하지 않는 프로젝트에서는 어떻게 ajax를 작성하는지 궁금해 졌습니다. 더군다나 jquery를 점점 제거하는 추세여서 라이브러리가 없는 순수 자바스크립트에서는 ajax를 어떻게 작성하는지 알아볼 필요가 있다고 생각되어졌고 오늘 이에 대하여 포스팅을 남겨보려고 합니다.

 

앞서 설명한것처럼 그 어떤 라이브러리 없이 순수한 자바스크립트 즉, 바닐라자바스크립트로만 ajax를 구현하며 서버백단은 java를 이용하여 통신하는 코드를 기술할 예정입니다.

 

 

 

[ 1 ]  JSP작성

 

      function ajax() {
        var xhr = new XMLHttpRequest(); // XMLHttpRequest객체 생성, 함수 내 지역변수로 선언 권장


        // onreadystatechange는 서버와의 통신이 끝났을 때 호출 됨
        xhr.onreadystatechange = function() {
          if (xhr.readyState === 4) {
            // readyState(0) = 초기화 되지 않음. open 메소드가 아직 호출되지 않았음
            // readyState(1) = open 메소드가 호출되었으나 send 메소드는 호출되지 않았음
            // readyState(2) = 송신완료. send 메소드가 호출되었음. 요청이 시작되었음
            // readyState(3) = 수신 중, 서버가 응답을 보내는 중임.
            // readyState(4) = 통신완료

            if (xhr.status === 200) {
              // 200 : 통신성공
              // 302 : Moved Temporarily,요청한 리소스가 임시적으로 이동, 클라이언트가 리소스에 접근하기 위해 
              //       현재의 URI를 반환해야 함을 나타냄. 라이언트는 자동으로 GET또는 HEAD 요청을 리다이렉트 할것이다.
              // 400 : Bad Request, 클라이언트의 요청이 부정확한 형태이며 서버가 요청을 처리 할 수 없음
              // 401 : Unauthorized, 클라이언트가 제공되지 않은 사용자 인증이 필요한 리소스를 요청했거나 인증에 실패했음.
              // 403 : Forbidden, 서버가 클라이언트의 요청을 이해하지만 클라이언트가 요청한 리소스의 접근을 거절.
              // 404 : Not Found, 요청된 URI에 리소스를 위치시킬수 없는 웹서버가 사용한다. (파일없음)
              // 405 : 메서드 허용 안함
              // 500 : Internal Server Error, 예기치 않은 에러가 발생(문법오류이거나 Exception이 대부분)

              console.log("작업내용 작성");
            }
          }
        };

        // 세팅, post와 get방식 선택 / URL / true(비동기적), false(동기적)
        xhr.open("POST", "/todo/TodoTypeServlet", true);

        // 서버로 전송할 데이터 타입의 형식(MIME)을 지정, POST방식에서만 사용, open다음에 사용해야함
        // xhr.setRequestHeader('Content-Type', "application/x-www-form-urlencoded"); - &으로 분리되고, 
        // "=" 기호로 값과 키를 연결하는 key-value 형태 전송시 사용
        // xhr.setRequestHeader("Content-Type", "application/json"); - JSON전송시 사용
        // xhr.setRequestHeader("Content-Type", "text/plain; charset=UTF-8");
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-www-form-urlencoded"
        );

        // send method가 호출될 때 XMLHttpRequest객체가 통신을 시작하게 된다
        // 데이터는 문자열로 raw하게 날라가므로 반드시 본인이 타입에 맞게 인코딩 해야함 ex) xhr.send(JSON.parse(data));
        xhr.send(null);
      }

 

 

 

 

아래 코드는 주석문이 제거된 ajax코드이다.

복사에서 사용하기를 원한다면 아래코드를 이용하면 되겠다.

      function ajax() {
        var xhr = new XMLHttpRequest(); 

        xhr.onreadystatechange = function() {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              console.log("작업내용 작성");
            }
          }
        };

        xhr.open("POST", "/todo/TodoTypeServlet", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(null);
      }