Ok here a first start of the work, most of it is ok, but still need to
translate IE support and Safari:
Change in prototype.js ajax.request initialize to:
initialize: function(url, options) {
this.setOptions(options);
this.transport = (!this.options.crosssite) ? Ajax.getTransport() :
new MyXajaxTransportClass;
this.request(url);
},
Now when specifying your javascript, go like this:
function ajaxTest() {
new Ajax.Request('/frontend_dev.php/comment/giveratingjs', {
method: 'GET',
crosssite: true,
parameters: { theorder: '1', down: '1', threadid: '5' },
onLoading: function() {
},
onSuccess: function(transport) {
},
onFailure: function(transport) {
}
});
}
The magic happens in the MyXajaxTransportClass (ill rename it soon),
have a look at the current version:
Still need to improve some things
MyXajaxTransportClass = Class.create();
//modeled after XmlHttpRequest http://en.wikipedia.org/wiki/XMLHttpRequest
//functions open, send (setRequestHeader) - variable readyState,
status
//
//* 0 = uninitialized - open() has not yet been called.
//* 1 = open - send() has not yet been called.
//* 2 = sent - send() has been called, headers and status are
available.
//* 3 = receiving - Downloading, responseText holds partial data.
//* 4 = loaded - Finished.
//TODO:
//Implementation for indicating Failure
//Delayed removal of script nodes
//
//-- initialize, open and send
--
//
MyXajaxTransportClass.prototype.initialize = function() {
this.readyState = 0;
}
MyXajaxTransportClass.prototype.open = function(method, url,
asynchronous) {
if(method != 'GET') alert('Method should be set to GET when using
cross site ajax');
this.readyState = 1;
this.onreadystatechange();
this.url = url;
this.userAgent = navigator.userAgent.toLowerCase();
this.setBrowser();
this.prepareGetScriptXS();
}
MyXajaxTransportClass.prototype.send = function(body) {
this.readyState = 2;
this.onreadystatechange();
this.getScriptXS(this.url);
}
//
//-- actually do the request: setBrowser,
prepareGetScriptXS, callback, getScriptXS --
//
// Figure out what browser is being used, is this good practise?
MyXajaxTransportClass.prototype.setBrowser = function(body) {
MyXajaxTransportClass.prototype.browser = {
version: (this.userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) ||
[])[1],
safari: /webkit/.test(this.userAgent),
opera: /opera/.test(this.userAgent),
msie: /msie/.test(this.userAgent) !/opera/.test(this.userAgent),
mozilla: /mozilla/.test(this.userAgent) !/(compatible|
webkit)/.test(this.userAgent),
konqueror: this.userAgent.match(/konqueror/i)
};
}
MyXajaxTransportClass.prototype.prepareGetScriptXS = function () {
if (this.browser.safari || this.browser.konqueror) {
this._xsajax$node = [];
this._xsajax$nodes = 0;
}
}
//node helper for safari needs fixing
MyXajaxTransportClass.prototype.callback = function () {
this.readyState = 4;
this.onreadystatechange();
//TODO, timed cleanup
//$(this).remove();
}
MyXajaxTransportClass.prototype.getScriptXS = function () {
/* determine arguments */
var arg = {
'url': null
};
if (typeof arguments[0] == string) {
/* simple usage, is all we need */
arg.url = arguments[0];
}
/* generate script node */
this.node = document.createElement('SCRIPT');
this.node.type = 'text/javascript';
this.node.src = arg.url;
/* optionally apply event handler to script node for
garbage collecting script node after loading and/or
calling a custom callback function */
var node_helper = null;
if (this.browser.msie) {
/* MSIE doesn't support the onload event on
script nodes, but it at least supports an
onreadystatechange event instead. But notice:
according to the MSDN documentation we would have
to look for the state complete, but in practice
for script the state transitions from loading
to loaded. So, we check for both here... */
try{this.node.get(this[0]).onreadystatechange = function () {
if (this.readyState == complete || this.readyState ==
loaded)
this.callback();
};} catch(e) {dump(e)}
}
else if (this.browser.safari || this.browser.konqueror) {
/* Safari/WebKit and Konqueror/KHTML do not emit
_any_ events at all, but we can exploit the fact
that dynamically generated script DOM nodes
are executed in sequence (although the scripts
theirself are still loaded in parallel) */
this._xsajax$nodes++;
var helper =
'var ctx = jQuery._xsajax$node[' + this._xsajax$nodes +
'];' +
'ctx.callback.call(ctx.node);' +
'setTimeout(function () {' +
'jQuery(ctx.node_helper).remove();' +
'}, 100);';
