우리 기쁨을 나눠요^^

Ajax(예. XMLHttpRequest) 를 이용해서 다른 사이트로부터 정보를 가져올 때 다른 도메인일 경우, 보안정책에 걸려 가져올 수 있습니다. 보안을 위해서 소스의 근원이 같을 때만 허용한 다는 동일 근원지 정책(Same origin policy, 이하 SOP)입니다.

간단히 말하면, SOP에 따르면 같은 프로토콜을 이용하고, 같은 서버(호스트)에서 같은 포트를 사용하는 경우만 정보를 주고 받을 수 있습니다.
(링크가 걸려있는 위키에 나와 있는 표를 보면 이해가 쉽습니다. )

어쨌든 이를 해결하기 위한 방법으로는 다음과 같은 방법이 있습니다.

1. 이름 속이기(?)

window.document.domain = 'google.co.kr';

자바스크립트에서 간단하게 도메인 이름만 같은 것처럼 이름을 속여서 가져오는 방법이지만,
여러 곳에서 정보를 가져오거나, 나중에 이름이 바뀌는 경우에는 유지보수의 어려움이 있습니다.

2. JSON with padding

JSON 데이타를 다른 사이트에서 가져오기 특별한 포장지로 감싸는 작업을 하는 겁니다.
XMLHttpRequest로 바로 가져오면 동일 근원지 정책에 위반되기에 자바스크립트 소스인 것처럼 가져오면 이 정책에 위반되지 않고 가져올 수 있습니다.
이에 대한 설명은 Remote JSON이라는 다른 사이트에 올라와있는 글이 있습니다.
http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/
(이를 구현하는 방법에 관한 글은 다른 곳에도 많이 올라와 있을 것으로 생각하므로 여기선 생략하고 넘어갑니다. 필요시에는 간단하게 정리해서 올리겠습니다.)

위 방법으로 이전에 올렸던 JSON 데이타를 자바스크립트 소스인 것처럼 다음과 같이 만들어서 가져오면 됩니다.

callback2([{"symbol":"ee","price":42.0460580763757,"change":0.03570531273294014}])

이전 글의 JSON 데이타에 callback2()라는 함수를 불러오는 것처럼 만듭니다.
함수의 이름을 인자값으로 넘기는 건 다음과 같이 한다고 가정합시다.

이전 글과 달라진 점은 callback이라는 인자를 넘겨서 그 값으로 함수명을 결정도록 한 것 밖에 없습니다.

위와 같이 인자를 바꿔서 자바스크립트 소스처럼 감싸진 결과를 만들려면 이전 소스가 다음과 같이 바뀌면 됩니다.

예전 소스에서 크게 달라진 것은 없죠? 함수명을 인자로 받아서 감싸준 부분밖에는요.
이 소스의 예제는 원래 구글 코드에 python으로 만들어졌고, 그 전 소스는 php로 만들어졌는데,
자기 컴퓨터에서는 무엇을 설치해도 상관이 없지만 만약 서버에서 구현할 때 이것저것 설치해야 한다면 문제가 될 수 있으므로
다 JSP 소스로 바꾸기만 한 것입니다.

원 소스 주소는 다음과 같습니다.
http://code.google.com/docreader/#p=google-web-toolkit-doc-1-5&s=google-web-toolkit-doc-1-5&t=GettingStartedJSON

화면에 json 코드가 보여진다고 다 만들어진 것이 아니었습니다.

예를 들어 다음과 같은 json을 만들어주는 페이지가 있다고 할 때,

[ 
{ "symbol": "ABC", "price": 96.204659543522, "change": -1.6047997669492 }, 

{ "symbol": "DEF", "price": 61.929176899084, "change": 0.22809544419493 } 
]

위 json을 만들어주는 코드를 jsp로 짜고 출력했더니 화면에 똑같이 나왔습니다. 그런데 계속 파싱에러 ㅡ.ㅡ

이상해서 받은 거 그냥 뿌렸더니 html 코드랑 섞여 나오더군요.

중요한 건 contentType을  text/html이 아니라 text/javascript로 해주는 것이었습니다.

이걸 실수해서 괜히 엄한 코드 디버깅하며 쫓아가며 겨우뚱 했네요 ㅎㅎ

컨텐트 타입을 자바스크립트로 하면 웹에 뿌려지는 것이 아니라 보통은 다운로드됩니다.

참고로 위 json 만드는 JSP 소스를 싣습니다. (구글 코드에 있는 php 예제를 단순히 jsp로 바꾼 겁니다.)

<%@ page language="java" contentType="text/javascript; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<%@page import="java.util.Random"%>

<%

  final double MAX_PRICE = 100.0; // $100.00

  final double MAX_PRICE_CHANGE = 0.02; // +/- 2%

  double price;

  double change;
Random random = new Random();
String q = request.getParameter("q"); 

 out.print("[" + "");

 if(q != null){

  String[] symbols = q.split(" ");

  for(int i=0; i<symbols.length; i++){




   price = random.nextDouble() * MAX_PRICE;

   change = price * MAX_PRICE_CHANGE * (random.nextDouble() * 2.0 - 1.0);

   out.print("{" + "");   out.print("\"symbol\":\"" + symbols[i] +"\"," + "");   out.print("\"price\":" + price +"," + "");

   out.print("\"change\":" + change +"" + "");   out.print("}" + "");

   if(i < symbols.length - 1)

    out.print("," + "");

  }

 }

 out.print("]" + "");

%>