해결하고자 하는 물음은 아래와 같다.
내가 아는 것
클라이언트로부터 데이터를 받을 때
<form>태그의 action 속성에 url을 명시하고 그 url과 연결된 메소드를 호출한다.(Controller안에 있는 메소드)
요청하는 방식은 method 속성을 통해서 결정된다. (GET 또는 POST)<form>태그 내부<input>태그를 통해 데이터를 클라이언트로부터 받고 그것을 앞서 언급된 컨트롤러의 메소드에 전달한다.
내가 모르는 것
그렇다면 JSON은 어떻게 받는걸까?
HTML의 형태, Javascript의 형태
이게 너무 궁금했다.
내가 모르는 부분을 오늘 정리해보려고 한다.
JSON
JSON이란 무엇일까?
일단 서버와 클라이언트가 데이터를 주고받을 때
데이터에 무게가 있다고 가정하자
좀 더 가볍게 주고받을 수 있도록 한 것이 JSON이다.
JSON은 경량화 된 데이터 교환 형식이다.
그 이유는 key:value 형태로 데이터를 교환하기 때문인데
처음 Javascript에서 파생되었지만 독립형 언어 포맷이다.
그래서 C, JAVA 등 대부분의 언어에서 사용이 가능하다.
궁금증
클라이언트가 파라미터로 데이터를 보낼 때 어떻게 보내는가
언제 Controller가 받을 수 있는 JSON 형태의 데이터가 완성되는지 이게 너무 궁금했다.
일단 HTML의 형태는 똑같다!
앞서 말한
클라이언트로부터 데이터를 받을 때
<form>태그의 action 속성에 url을 명시하고 그 url과 연결된 메소드를 호출한다.(Controller안에 있는 메소드)
요청하는 방식은 method 속성을 통해서 결정된다. (GET 또는 POST)<form>태그 내부<input>태그를 통해 데이터를 클라이언트로부터 받고 그것을 앞서 언급된 컨트롤러의 메소드에 전달한다.
이 부분이다.
JSON의 형태로 바꿔주는 것은 Javascript에서 담당한다.
function reqAjax2() {
var name = $("#username").val();
var phone = $("#phone").val();
if(name.trim() =='' || phone.trim()==''){
alert('데이터를 입력해주세요')
return;}
//서버로 보낼 데이터 준비 : 파라미터로 만들기 . json 으로 만들기
var sendData = {"name":name,"phone":phone}
$.ajax({
url:'reqAjax2'
, method : 'POST'
, data: JSON.stringify(sendData)
,contentType : 'application/json; charset=UTF-8'
,dataType : 'json'
, success :function(resp){
alert( JSON.stringify(sendData))
}
})
}-
$(선택자).동적함수
선택자에는 html파일의 태그가 들어감
$는 JQuery를 의미하며 JQuery가 접근할 수 있는 식별자로
HTML 요소에 접근한다.
(JQuery란 자바스크립트의 라이브러리) -
#id지정 -
Json.stringify() : JSON->String으로 변환
-
즉 HTML의
<input>으로부터 데이터를 받아 Javascript에 넘기고 이를 Javascript에서 JSON으로 변경해서 Controller에 전달 -
Controller는 아래와 같다.
@ResponseBody @RequestMapping(value="/reqAjax2", method=RequestMethod.POST) public Map<String,String> reqAjax2(@RequestBody Map<String,String> map ) { System.out.println(map); return map; }
stack overflow
일단 나와 같은 궁금증을 갖은 사람이 역시나 stack overflow에 있었다!
https://stackoverflow.com/questions/22195065/how-to-send-a-json-object-using-html-form-data
사실은
사실은 클라이언트로부터 JSON형태의 데이터를 받기란
결국은 조금 이상한 문제인거 같다.
일단 HTML에서 JSON을 만들지 못하며
Javascript를 통해서 만드는 것이다.
JSON의 형태로 데이터를 주고 받는 것은 대부분 API를 사용하는 경우인거 같다. 즉 API는 프로그램 사이에서도 데이터를 주고 받을 수 있게 해주며 그 데이터의 무게를 API를 통해서 가볍게, 형식을 정해서 주고받는 것이다.
API는 무엇일까?
내가 사용하는 사이트의 로그인 페이지
대부분은 github 계정과 연결되거나 카카오톡 계정과 연결되는 방식으로 회원가입이 가능하다.
이것은 곧 카카오나 github에서 자기들의 DB를 접근할 수 있게 하는 서비스를 제공하는 것이다. 물론 그 서비스의 내부 구조란 우리는 알지 못하고 url를 통해서 접근하게 하는 거 같다.
사실 API란 결국 url일까?
그렇다면 실사용자는 주소창에 url을 쳐서
그 서비스 제공하는 곳의 DB를 사용자가 보기 편하게 나열해주는 서비스를 이용하는 것이다.
네이버 홈페이지 화면이라든지
이미지를 클릭하면 관련 내용의 페이지로 이동하는 것 또한 API를 이용하는 것이다.
사실은 아직 이 개념이 제대로 확립되지 못했다.
정말로 API를 이용하는 로그인 페이지를 집적 만들어봐야
JSON이 무엇인지
API가 무엇인지
정확히 알 수 있을거 같다.
