크롬 개발자모드로 브라우저에서 HTTP POST방식 호출하기 (feat.XMLHttpRequest 객체란?)

프론트에서 백엔드로 비동기식 호출을 하는 경우, 클라이언트단에서 특정 기능의 url를 호출하면 백엔드에서 실행된다. 

만약, 프론트엔드 범위까지 개발 담당이 아닌경우 테스트를 위해서 임의로 테스트 페이지를 만들곤 하는데 굳이 화면개발 없이 크롬 개발자모드의 콘솔에서 간단히 호출 및 테스트 할 수 있는 방법이 있어 공유한다.

 

웹에서 크롬 개발자 모드 (단축키 F12)의 console 에서 비동기 통신 객체인 XMLHttpRequest 객체를 생성하여 서버로 요청을 보내는 방법이다. 먼저 XMLHttpRequest 객체에 대해서 간단히 알아보자.

 

 

 

XMLHttpRequest(XHR)객체란? 

ajax 요청을 생성하는 javaScript API로 브라우저와 서버간의 네트워크 요청을 전송한다.

서버와 상호작용하여 전체 페이지를 새로고치지 않고 페이지의 일부만 업데이트 할 수 있다. Ajax 비동기 통신에서 주로 사용된다. 

• XMLHttpRequest();  // 비동기식 통신 객체로 서버 요청에 사용.
• xhr.open(전송방식, url, sync); //서버로 보낼 요청의 형식 설정.
  HTTP메소드 방식 및 동기/비동기 설정(true or false)을 할 수 있다.
  url에는 테스트 할 url입력. 
• xhr.setRequestHeader(header속성, value); //POST방식 사용시 헤더 설정.
  필요한 헤더 정보를 입력한다.   
• xhr.send(param); 서버로 요청을 실행한다.
  body에 필요한 파라미터가 있다면 셋팅하여 호출한다. 
• xhr.status; 서버 요청 상태 (200,404 .. )
• xhr.response; 서버 요청에 대한 결과값 (return값 존재 시)

 

 

예제를 통해 알아보자. 

예시) 해당 예시는 POST방식의 비동기 json 통신의 경우를 테스트 한다. 

 

*참고로 return값을 가지지 않는 명령어를 실행하는 개념이므로 undefined가 찍히는건 정상임.

물론 크롬 console 탭이 아니어도 자바스크립트에서 코딩하여 호출해볼수도 있겠다.

당장 소스반영이 불가한 경우이거나, IDE를 여는것도자 귀찮을때..... 크롬 개발자모드에서 시도해보자. 

 

소스코드)

var calltest = new XMLHttpRequest; //객체 생성 
calltest.open("POST","http://localhost:8080/test.do",true);//요청 방식
calltest.setRequestHeader("Content-Type","application/json"); //헤더 정보 
calltest.send(JSON.stringify({"id":"kim123","date":"20220817"})); //param으로 json 데이터 전달. 
//(데이터형식이 String 이라면 "id=kim123&date=202120817"의 형태로 셋팅해준다.)

 

이렇게 send함수를 호출 하고, Network 탭으로 가 보면 요청 URL이 호출된 것을 확인할 수 있다.

해당 요청을 클릭하여  Header 에서 응답 상태코드 및 요청헤더, 응답헤더, 파라미터 등이 잘 설정되었는지 확인하고,  response에서 결과값이 잘 전달왔는지 확인한다.

예시화면은 테스트 용으로 구글에서 날린 결과이기 때문에 당연히 실패이지만, 

실제 개발환경 또는 테스트 환경에서 서버에 존재하는 호출 URL을 날리면 별도로 화면개발 없이도 network 탭에서 call 이 된 것을 확인할 수 있다. 각 탭을 활용하여 (요청값, 응답값 확인가능) 테스트 시 요긴하게 활용하도록 하자! 

 

*또는 그대로 console창에서 

calltest.status //응답상태코드 ex)200 
calltest.response //응답값 ex) {"result":"success","password":"1234"}

으로 간단히 확인할 수도 있다. 이번에는 반환값이 있기 때문에 undefined가 아닌 

200, return value등이 정상적으로 찍힐 것이다. 끗!