[JavaScript] 자바스크립트 Ajax 사용하는 방법 (POST/GET)

들어가며

  JavaScript에서 웹 개발을 할때 Front의 코드를 구현할때 Ajax를 이용하면 쉽게 서버로부터 데이터를 받아오고, 전송을 할 수 있다. 아래 소스코드는 nodeJs와 같이 웹 서버 프레임워크가 설치가 되어있고, 서버가 실행이 되어 있어, 해당 요청 URL을 처리를 할 수 있는 상태가 필요하다. 

  전송하는 방법은 앞서 설명했던 HTTP Request를 사용하고, 보통은 HTTP GET을 통해 서버로부터 데이터를 받아오고, HTTP POST를 통해서 데이터를 전송하는 방법을 사용하지만. POST로도 데이터 전송이 가능하다는 점~

서버에서 Web Front로 데이터 전송

  서버로 부터 초기의 데이터를 Web Application으로 불러오는 소스코드입니다. ajax로 설정한 url을 요청을 하면 데이터가 전송이 되고 result로 결과 값이 전송이 됩니다. 만약 result가 있다면, 파싱해서 사용하시면 되고, 만약 데이터가 없다면 "불러오기 실패"의 에러 창을 띄워줍니다.

Web Front에서 입력된 데이터를 서버로 전송

  Front에 입력된 데이터를 서버로 데이터를 전송하는 소스코드 입니다. 전송하는 데이터는 params로 dict의 형태를 띄고 있습니다. 아무래도 dict의 형태는 json과 유사하기 때문에 data를 JSON.stringify(params)를 해줘야지만 json형태로 전송이 되고, 서버에서도 요청된 데이터를 파싱해서 사용이 가능합니다. 서버에서 데이터를 받은 이후에 응답을 했을때 성공을하면, "저장되었습니다. 결과가 없으면 "잠시 후에 시도해주세요", 만약 에러가 발생하면 "에러 발생"의 창을 띄워줍니다.