Rev. 2.73

오래전에 포스팅하려다가 이제서야 포스팅하게 되는군요. Prototype 버전1.6.x에서 제공되는 것으로 responseJSON을 이용한 JSON수신방법입니다. 아시다시피 Ajax를 이용하여 요청한 결과물을 받아올 때 서버로부터 여러가지 형식으로 응답받을 수 있습니다. HTML이나 자바스크립트 코드를 직접 받아 실행하거나 XML또는 JSON타입 등이 바로 그것입니다. 여기에서 JSON형식으로 자료를 수신하는 경우 responseJSON 프로퍼티를 이용하면 수신된 문자열을 이밸류에이션(evaluation)하거나 XML처럼 노드를 분석하여 변수로 할당하는 작업이 불필요하기 때문에 더욱 간결한 수신구조를 만들수 있게 됩니다. 아래의 예제를 봅시다.

서버-사이드: JSON 생성

{
  id: 1,
  name: 'firejune',
  city: 'seoul',
  contry: 'korea',
  birthday: 199724400000
}

여기에는 중요한 서버단 작업이 있습니다. 응답헤더의 Content-Type을 application/json으로 설정해야 합니다. 왜냐하면 Prototype은 이 해더값을 근거로 responseJSON에 객체를 자동으로 할당하기 때문입니다. php에서 헤더를 설정하는 방법은 아래와 같습니다.

<?php
  header("Content-Type: application/json; charset=utf-8");
?>

클라이언트-사이드: JSON 호출

new Ajax.Request("/lab/person.json.php", {
  onSuccess: function(transport) {
    var person = transport.responseJSON;  
    alert(person.city);
  }, method: "get" 
});

자, alert에는 무엇이 찍힐까요? 직접 확인해 봅시다. 그렇다면, Content-Type이 application/xml(또는 text/xml)인 경우에는 어찌될까요? 당연히 transport.responseXML에 할당되겠죠. JSON타입으로 사용될 때와 비교하기 위해서 위 상황을 XML타입으로 재현 해 보겠습니다.

서버-사이드: XML 생성

<?xml version="1.0" encoding="utf-8" ?>
<person type="object">
  <id type="number" value="1"/>
  <name type="string" value="firejune"/>
  <city type="string" value="seoul"/>
  <contry type="string" value="korea"/>
  <birthday type="number" value="199724400000"/>
</person>

클라이언트-사이드: XML 호출

new Ajax.Request("/lab/person.xml.php", {
  onSuccess: function(transport) {
    var xmlDoc = transport.responseXML.documentElement;
    var person = {};
    // xml to object
    $A(xmlDoc.childNodes).each(function(item) {
      if (item.tagName) person[item.tagName] = item.getAttribute('value');
    });
    alert(person.city);
  }, method: "get" 
});

결과는 동일합니다. 두 방식을 비교해 보면 JSON타입이 여러모로 유용하다는 사실을 알 수 있습니다.

Comments

Got something to add? You can just leave a comment.

  • Classic ASP와 함께 prototype을 많이 쓰는 매번 기웃거리면서 많은 팁 잘 보고 있습니다.
    메뉴얼에 responseJSON 기능이 추가되어있었던거 알고서
    사용하려 해보았을때 안되서 예전 방식을 고수했었는데, 헤더 선언을 안해서 안되었었군요.
    잘 배웠습니다.

    Classic ASP 에서의 내용형식 선언은 Response.ContentType = "application/json" 입니다.
    (저같이 ASP 하시는분 참고하시라고 남겨둡니다.)

    reply edit

  • 저역시도 해더를 선언해야 돌아가는지 모르고 삽질했던 기억이 나는군요. ^^;

    reply edit

  • 기존 Prototype 을 이용한 ajax 개발시 Aajx.Request 를 사용하고 처리상황을 0 또는 1 과 같이 하거나 임의의 분리자가 섞인 문자열로 사용하곤 했다. 그러다가 보게 된것이 처리 후 리턴값..

Your Reaction Time!

captcha

avatar