Prototype.js Cross-Domain Ajax 플러그인
예전 블로그에 포스팅한 글이 우연히 스쿨[PHPSchool]에서 보다가 발견했다.
그때에 2007년이였으니 Prototype 1.5.0 에서 적용되던 것이였는데......
extjs에서 크로스도메인 처리하던 localXHR.js와 같은 기능을 하는것이다.
localXHR에서 사용된 개념과 비슷하게 여기에서도 동적으로 <script>태그로 생성한다. 시간나실때 짬짬히 뜯어보시는것도... 괜찮을듯 하다.
this.node.type = 'text/javascript';
this.node.src = arg.url; <----
사용법은 간단한다. prototype.js 를 import한뒤 아래에 transport.js를 import해서 기존 Prototype.js의 Ajax.Request 클래스를 상속받아 쓰면 된다.
Prototype.js에서 사용할때와 같이
method: 'GET',
crossSite: true,
parameters: Form.serialize(obj),
onLoading: function() {
//things to do at the start
},
onSuccess: function(transport) {
//things to do when everything goes well
},
onFailure: function(transport) {
//things to do when we encounter a failure
}
});
Prototype.js 1.6.0 버전에서 쓰려면 기존 transport.js 하단 상속부분을 다음과 같이 수정해 주면 된다.
Ajax.Request.prototype = Object.extend(Ajax.Request.prototype,{
initialize: function(url, options) {
this.setOptions(options);
this.transport = (!this.options.crossSite) ? Ajax.getTransport() : new scriptTransport;
this.request(url);
}
});
[1.6.0 버전]
Ajax.Request.prototype = Object.extend(Ajax.Request.prototype, {
initialize: function(url, options) {
this.options = {
method: 'post',
asynchronous: true,
contentType: 'application/x-www-form-urlencoded',
encoding: 'UTF-8',
parameters: '',
evalJSON: true,
evalJS: true
};
Object.extend(this.options, options || { });
this.options.method = this.options.method.toLowerCase();
if (Object.isString(this.options.parameters))
this.options.parameters = this.options.parameters.toQueryParams();
else if (Object.isHash(this.options.parameters))
this.options.parameters = this.options.parameters.toObject();
this.transport = (!this.options.crossSite) ? Ajax.getTransport() : new scriptTransport;
this.options.asynchronous = (!this.options.crossSite) ? this.options.asynchronous : false;
//turns of the timed onLoad executer
this.transport.respondToReadyState = this.respondToReadyState.bind(this);
this.request(url);
}
});
transport_Prototype1.5.0.js
dynamic_head_append_test.html