Extjs 서로 다른 도메인일 경우 ScriptTagProxy를 이용한 Ajax통신

ExtJS에서는(비단, Extjs뿐만 아니라 기존 XHR과 마찬가지로)  같은 도메인일 경우는 HttpProxy를 사용하면 아무런 문제가 되지 않으나 서로 다른 도메인일 경우 ScriptTagProxy로 해당 URL의 Ajax통신을 할수 있게 잘(?) 만들어져 있다.기존 XHR(XMLHttpRequest)를 이용할 시에는 서버쪽에서 Proxy script를 만들어 사용해야 하나 jQuery나 ExtJS의 경우는 제공하는 Proxy를 사용하면 된다.

ScriptTagProxy로 가져온 Datastore파일을 JsonReader로 읽을 때에는 기존의 HttpProxy를 사용할때와 달리 다음과 같이 서버측에 callback 파라미터값을 던지고 아래와 같은 구조로된 Json을 받게 된다.

stcCallback1013(
	{
		Json형식
	}
)

 ExtJS에서  ScriptTagProxy는 아래와 같은 로직으로 구현되어 있다.

boolean scriptTag = false;
String cb = request.getParameter("callback");
if (cb != null) {
    scriptTag = true;
    response.setContentType("text/javascript");
} else {
    response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (scriptTag) {
    out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (scriptTag) {
    out.write(");");
}

scriptTagProxy 와 Form Submit은  callback 이라는 파라미터 값을 함께 던지므로 서버상에서 callback 파라미터를 받게 만들어 줘야 한다. 그렇게 때문에 서버에서 별도의 작업을 해줘야 하는데 PHP와 JSP의 경우를 비교해서 기술한다.

 

String callback = request.getParameter("callback");
    String jsonData = getJsonData();
    if (callback != null) {
        out.write(callback + "(");
    }
    out.write(jsonData);
    if (callback != null) {
        out.write(");");
    }

 
 $callBack = isset($_REQUEST["callback"]) ? $_REQUEST["callback"] : '';

 if($callBack) {
 	echo $callBack . "(";
 }
 echo getJsonData();
 if($callBack) {
 	echo ");";
 }