Ajax 마스터하기, Part 11: 서버 측의 JSON (한글) :: 에이젝스 일반[SSISO Community]
 
SSISO 카페 SSISO Source SSISO 구직 SSISO 쇼핑몰 SSISO 맛집
추천검색어 : JUnit   Log4j   ajax   spring   struts   struts-config.xml   Synchronized   책정보   Ajax 마스터하기   우측부분

에이젝스 일반
[1]
등록일:2008-04-02 15:15:20 (0%)
작성자:
제목:Ajax 마스터하기, Part 11: 서버 측의 JSON (한글)

서버 측 스크립트와 프로그램에서 JSON으로 응답하기

developerWorks
문서 옵션

JavaScript가 필요한 문서 옵션은 디스플레이되지 않습니다.

수평출력으로 설정

이 페이지 출력

이 페이지를 이메일로 보내기

이 페이지를 이메일로 보내기

영어원문

영어원문


제안 및 의견
피드백

난이도 : 고급

Brett McLaughlin, Author and Editor, O'Reilly Media Inc.

2007 년 10 월 09 일

지난 기술자료에 서는 JavaScript의 객체를 JSON으로 변환하는 방법을 배웠습니다. 이 포맷은 객체들 또는 객체 어레이들로 매핑하는 데이터를 보내는데(그리고 받는데) 사용할 수 있습니다. 본 시리즈 마지막 기술자료에서는, JSON 포맷으로 서버에 보내진 데이터를 핸들하는 방법과, 같은 포맷을 사용하여 스크립트에 응답하는 방법을 설명합니다.

JSON의 실질적 가치

소셜 북마크

mar.gar.in mar.gar.in
digg Digg
del.icio.us del.icio.us
Slashdot Slashdot

본 시리즈의 이전 기술자료에 서 언급된 것처럼, JSON은 Ajax 애플리케이션을 위한 유용한 포맷으로서 JavaScript 객체와 스트링 값 사이를 빠르게 변환할 수 있게 해준다. Ajax 애플리케이션들은 플레인 텍스트를 서버 측 프로그램으로 보내고 받는데 가장 알맞고, 텍스트를 생성하는 API는 텍스트를 생성하지 않는 API를 통해서 이루어진다. JSON은 네이티브 JavaScript 객체들과 함께 작동할 수 있도록 해주며, 이러한 객체들이 표현되는 방식에 대해서는 걱정하지 않는다.

developerWorks Ajax 리소스 센터
Ajax 리소스 센터는 Ajax 프로그래밍 모델 관련 튜토리얼, 디스커션 포럼, 블로그, wiki, 이벤트, 뉴스 등을 제공하고 있습니다. Ajax에 관한 모든 것이 집대성 되어 있습니다.

XML 은 똑같은 텍스트 효과를 제공하지만, JavaScript 객체를 XML로 변환하는 API는 JSON API만큼 성숙하지 못했다. JavaScript 객체를 생성하여 여러분이 선택했던 XML 변환 API로 실행될 수 있는지를 확인해야 한다. JSON은 다르다. 매우 인지 가능한 객체 유형을 핸들하고 훌륭한 JSON 데이터 표현을 제공한다.

JSON의 가장 큰 가치는 JavaScript가 데이터-포맷 언어로서가 아닌 JavaScript로서 역할을 할 수 있다는 점이다. JavaScript 객체를 사용하면서 배운 모든 것을 코드에 적용할 수 있고, 이러한 객체들이 텍스트로 변환되는 방식에 대해서는 걱정할 필요가 없다. 이제 간단한 JSON 메소드 호출을 해보자.

String myObjectInJSON = myObject.toJSONString();

이제 여러분은 결과 텍스트를 서버에 보낼 준비가 되었다.




위로


JSON을 서버로 보내기

JSON 을 서버로 보내는 것은 특별히 어려운 것은 아니지만, 중요한 문제이고 몇 가지 선택권이 있다. 하지만, 일단 JSON을 사용하기로 결정했다면, 선택은 훨씬 단순하고 제한되어 있다. 따라서 이 부분에 대해 크게 염려할 필요가 없다. 최소한, JSON 스트링을 서버에 가능한 빠르고 간단하게 보내기만 하면 된다.

GET을 통해 이름/값 쌍으로 JSON 보내기

JSON 데이터를 서버로 보내는 가장 쉬운 방법은 이것을 텍스트로 변환하고, 이름/값 쌍의 값으로 보내는 것이다. JSON으로 포맷된 데이터는 하나의 긴 객체일 뿐이며, Listing 1처럼 보인다.


Listing 1. JSON 포맷으로 된 JavaScript 객체
                
var people = { "programmers": [ { "firstName": "Brett", "lastName":"McLaughlin",
"email": "brett@newInstance.com" }, { "firstName": "Jason", "lastName":"Hunter",
"email": "jason@servlets.com" }, { "firstName": "Elliotte", "lastName":"Harold",
"email": "elharo@macfaq.com" } ], "authors": [ { "firstName": "Isaac",
"lastName": "Asimov", "genre": "science fiction" }, { "firstName": "Tad",
"lastName": "Williams", "genre": "fantasy" }, { "firstName": "Frank",
"lastName": "Peretti", "genre": "christian fiction" } ], "musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" } ] }

이것을 이름/값 쌍으로서 서버 측 스크립트로 보낼 수 있다.

var url = "organizePeople.php?people=" + people.toJSONString();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updatePage;
xmlHttp.send(null);

잘 되는 것처럼 보이지만, 한 가지 문제가 있다. 웹 브라우저가 인터프리팅을 시도할 수도 있는 공간과 모든 종류의 문자들이 JSON 데이터에 생겼다. 이러한 문자들이 서버에서(또는 데이터를 서버로 전송할 때) 혼란을 일으키지 못하게 하려면, JavaScript escape() 함수를 추가한다.

var url = "organizePeople.php?people=" + escape(
people.toJSONString()
);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);

이 함수는 공백, 사선(slash) 등을 처리하고, 이것들을 안전한 문자로 변환한다. (예를 들면, 공백은 %20으로 변환되어, 브라우저는 이것을 공백으로 취급하지 않고, 변경되지 않은 채로 서버로 전달한다. 그리고 나면, 서버는 (일반적으로 자동으로) 이것을 전송 후에 다시 변환한다.

이러한 방식의 단점은 두 가지이다.

  • GET 요청을 사용하여 많은 데이터 청크를 보내는데, 이는 URL 스트링에 길이 제한을 갖고 있다. 이것은 허용되는 길이이지만, 객체의 JSON 스트링 표현의 길이는 가늠할 수 없다. 특히 매우 복잡한 객체를 사용할 때는 더욱 알 수가 없다.
  • 텍스트로서 네트워크를 통해서 모든 데이터를 보낼 때, 이는 매우 불안한 상태로 데이터를 보내는 것이다.

간 단히 말해서, 이러한 문제들은 JSON 데이터와 구체적으로 관련이 있다기 보다는 GET 요청의 제한 요소라고 볼 수 있다. 하지만, 사용자의 이름과 성 이외의 것을 보낼 때 큰 문제가 된다. 원격으로 확인이 되었거나, 매우 긴 경우를 다룰 경우에는 POST를 고려해 볼 수 있다.

JSON 데이터의 포스팅(POST)

JSON 데이터를 서버로 보낼 때 POST 요청을 사용하기로 결정했다면, 코드를 크게 변경할 필요가 없다. 다음을 보자.

var url = "organizePeople.php?timeStamp=" + new Date().getTime();
request.open("POST", url, true);
request.onreadystatechange = updatePage;
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send(people.toJSONString());

이 코드 대부분이 POST 요청을 보내는데 초점을 맞추었던 " Ajax 마스터하기, Part 3: Ajax의 고급 요청과 응답"에서 보았던 것이다. 요청은 GET 대신 POST를 사용하여 열리고, Content-Type 헤더는 서버가 어떤 종류의 데이터를 기대하는지 알 수 있도록 설정된다. 이 경우, application/x-www-form-urlencoded인데, 이것은 서버가 텍스트를 통해 보낸 것이 일반 HTML 폼에서 온 것처럼 알도록 한다.

한 가지 주지할 점은 URL에 현재 시간을 붙였다는 점이다. 이로써 요청이 처음 보내진 후에 캐싱되지 않고, 메소드가 호출될 때마다 재생성 및 재전송 된다는 것이 확실해 진다. 이 URL은 변화하는 타임 스탬프 때문에 미묘하게 다르다. 이것은 스크립트로 POST 하는 것이 반복적으로 새로운 요청을 매번 생성하고 웹 브라우저는 서버에서 응답을 시도하고 저장하지 않는다.

JSON은 텍스트일 뿐이다!

GET 또는 POST를 사용하든지 간에, 중요한 것은 JSON은 단순한 텍스트 데이터일 뿐이라는 점이다. 특별한 인코딩을 필요로 하지 않으므로 쉽게 조작할 수 있고 서버로 보낼 수 있고, 모든 서버 측 스크립트는 텍스트 데이터를 처리할 수 있다. JSON이 바이너리 포맷이거나 이상한 텍스트 인코딩을 갖고 있다면, 상황은 달라졌을 것이다. 다행히도, JSON은 일반적인 텍스트 데이터이다. POST 섹션과 Content-Type 헤더에서 보았던 것처럼 이것을 서버로 보낼 때 많은 걱정을 할 필요가 없다.




위로


서버에서 JSON 인터프리팅 하기

클 라이언트 측 JavaScript 코드를 작성했고, 사용자들이 웹 폼과 페이지와 상호 작동 할 수 있도록 했고, 서버 측 프로그램으로 보내야 하는 정보를 수집했다면, 서버가 이제 중요한 역할을 할 차례이다. (비동기식으로 사용하는 서버 측 프로그램에 호출한다고 가정한다면, "Ajax 애플리케이션"으로 생각할 수도 있다.)

JSON 두 단계

서버에서 어떤 언어를 사용하든지 간에, 서버 측에서 JSON을 작동시키는 것은 두 단계이다.

  1. 자신이 사용하고 있는 언어용 JSON parser/toolkit/helper API를 찾아서 서버 측 프로그램을 작성한다.
  2. JSON parser/toolkit/helper API를 사용하여 클라이언트에서 요청 데이터를 가져다가 이것을 스크립트가 이해할 수 있는 것으로 바꾼다.

이것이 전부이다. 이제 이러한 단계를 보다 상세히 알아보자.

JSON 파서 찾기

JSON 파서나 툴킷을 찾을 수 있는 최상의 리소스는 JSON 웹 사이트이다. (참고자료) 포맷에 대한 많은 것을 배우는 것은 물론이고, ASP부터 Erlang, Pike, Ruby 등을 위한 JSON 툴과 파서에 대한 링크도 제공한다. 스크립트가 작성된 언어를 찾고 툴킷을 다운로드 한다. 이것을 제거, 확장, 설치하여(서버에서 C#, PHP, 또는 Lisp를 사용할 때 여러 변수들이 있다.) 서버 상의 스크립트와 프로그램이 이 툴킷을 사용할 수 있도록 한다.

예 를 들어, PHP를 사용하고 있다면, PHP 5.2로 업그레이드 하고 이것을 사용하여 수행될 수 있도록 한다. 최신 버전의 PHP에는 JSON 확장이 포함되어 있다. 사실, 이것은 PHP로 작업할 때 JSON을 다룰 수 있는 최상의 방법이다. 자바 서블릿을 사용한다면, json.org에 호스팅 된 org.json 패키지가 제격이다. 이 경우, JSON 웹 사이트에서 json.zip을 다운로드 하고 포함된 소스 파일을 프로젝트의 빌드 디렉토리에 추가한다. 이 파일을 컴파일 하면 실행할 준비가 된 것이다. 다른 지원 언어도 과정은 비슷하다. 여러분이 사용하는 언어에 대한 전문적인 지식을 갖추는 것이 중요하다.

JSON 파서 사용하기

프로그램에 사용할 수 있는 리소스가 있다면, 호출 할 올바른 메소드를 찾는 것이 중요하다. 예를 들어, PHP와 함께 JSON-PHP 모듈을 사용하고 있다면,

// This is just a code fragment from a larger PHP server-side script
require_once('JSON.php');

$json = new Services_JSON();

// accept POST data and decode it
$value = $json->decode($GLOBALS['HTTP_RAW_POST_DATA']);

// Now work with value as raw PHP

여기에서, 여러분은 모든 데이터 -- 배열 포맷, 다중 행, 단일 값, JSON 데이터 구조에 들어갈 것들 -- 를 $value 변수에 네이티브 PHP 포맷으로 한다.

서블릿에서 org.json 패키지를 사용한다면, 다음과 같이 한다.

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

StringBuffer jb = new StringBuffer();
String line = null;
try {
BufferedReader reader = request.getReader();
while ((line = reader.readLine()) != null)
jb.append(line);
} catch (Exception e) { //report an error }

try {
JSONObject jsonObject = new JSONObject(jb.toString());
} catch (ParseException e) {
// crash and burn
throw new IOException("Error parsing JSON request string");
}

// Work with the data using methods like...
// int someInt = jsonObject.getInt("intParamName");
// String someString = jsonObject.getString("stringParamName");
// JSONObject nestedObj = jsonObject.getJSONObject("nestedObjName");
// JSONArray arr = jsonObject.getJSONArray("arrayParamName");
// etc...
}

자세한 내용은 org.json 패키지 문서를 참조하라. (참고자료). (주: org.json 또는 기타 JSON 툴킷에 대한 상세한 내용을 원한다면, 필자에게 이메일을 보내도 좋다. 여러분의 의견을 다음 기술자료에 반영하겠다!).




위로


결론

이제는 서버 측에서 JSON을 다루는 방법에 익숙해 질 때이다. 본 기술자료와 Part 10에 서는 단순한 기술적인 도움을 주는 것을 넘어서 JSON이 진정으로 유연하고 강력한 데이터 포맷이라는 것을 증명했다. 이것이 모든 애플리케이션에 사용되는 것이 아니더라도, 훌륭한 Ajax와 JavaScript 프로그래머라면 툴박스에 JSON 정도는 갖추고 있을 것이고, 사용할 수도 있을 것이다.

필자는 여러분의 JSON 사용 경험이나, 여러분이 서버에서 사용하기에 좋았던 혹은 좋지 않았던 언어에 대한 의견도 듣고 싶다. 자바와 XML 뉴스 그룹에 등록하여 알려주기 바란다. (참고자료) JSON과 텍스트 데이터 포맷의 힘을 누리기 바란다.



참고자료

교육

토론


필자소개

Photo of Brett McLaughlin

Brett McLaughin은 Logo 시절부터 컴퓨터 업계에서 일했다 (작은 트라이앵글 기억하는가?). 최근에 그는 Java 및 XML 커뮤니티에서 인기 저자 및 프로그래머가 되었다. Nextel Communication에서는 복잡한 기업 시스템을 구현했으며, Lutris Technologies 에서는 애플리케이션 서버를 작성했다. 최근 O'Reilly Media에서는 이러한 주제들로 집필 활동을 하고 있다. Brett의 최근 저서인 Head Rush Ajax 는 Ajax에 혁신적인 Head First 접근 방식을 가져왔다. 최근 저서인 Java 1.5 Tiger: A Developer's Notebook 은 최신 자바에 적용할 수 있다. Brett의 고전이 된 Java and XML 은 자바 언어에서 XML 기술을 활용한 명백한 업적 중 하나로 남아 있다.

[본문링크] Ajax 마스터하기, Part 11: 서버 측의 JSON (한글)
[1]
코멘트(이글의 트랙백 주소:/cafe/tb_receive.php?no=7078
작성자
비밀번호

 

SSISOCommunity

[이전]

Copyright byCopyright ⓒ2005, SSISO Community All Rights Reserved.