Friday, October 26th, 2007
Introducing a cross site Ajax plugin for Prototype
Category: JavaScript
, Prototype
Thierry Schellenbach has implemented a Prototype plugin that allows you to do cross site remoting using the dynamic script tag method that other frameworks such as Dojo and jQuery have supported for awhile.
You can implement this by simply setting crossSite: true as a config parameter to Ajax.Request:
JAVASCRIPT:
-
-
new Ajax.Request('myurl', {
-
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
-
}
-
});
-
4 rating from 46 votes
This makes me quite happy. I wonder how it affects security though
Well, obviously you have to trust the data that you’re getting.
…very happy to see this as well. Nice
So, am I correct in understanding that this only works with server endpoints that return valid javascript code? If so, is it just a wrapper for doing the whole adding a *script* node to the head?
Cool little piece of code either way.
This is great, is it working with POST (the example showes only GET)? What is the trick for POSTing?
Wouldn’t an iframe be better?
That’s great, but that blocks any scripts in Opera until the Ajax request has not completed.
This makes each Ajax request synchronous, and it is not possible to do things like Ajax polling, events like onclick are blocked, etc…
Cool script, although seems to generate errors in Firebug and doesn’t work in IE6 (still the web’s dominant browser by a large margin). Any plans for a fix?
@Block
Regarding Opera and blocking xss calls. I’m not quite sure I’ve seen/understand the effect you describe. Do you have an example or reference?
The best way to understand cross site ajax scripting is, study Google/Yahoo! MAP API.
e.g.
Now every thing will be done (DRAG MAP, ZOOM MAP) on your page is cross site ajax.
Figured out the cross browser problems. Seems to be working splendidly. I tested in IE7 FF2 and Safari. They all seem fine. I also made a little test page for the purpose, in order to establish if it really works on all browsers.
Post will be upcoming on http://www.mellowmorning.com soon
@hm:
test
setInterval(function(){document.body.appendChild(document.createElement(’div’)).innerHTML=(new Date);}, 1000);
new Ajax.Request(’test.php’, {
method: ‘GET’,
crossSite: true,
onSuccess: function(transport)
{ document.body.appendChild(document.createElement(’div’)).innerHTML=transport;
}
});
The function called be setInterval will be blocked until the request to test.php has not finished (test.php is just a script which do a sleep(60)). Clicks on the tag will also be blocked until the request has not finished.
Oops, tags has been striped :/
[body]
[p onclick=”alert(’test’);”]test[/p]
[script]
setInterval(function(){document.body.appendChild(document.createElement(’div’)).innerHTML=(new Date);}, 1000);
new Ajax.Request(’test.php’, {
method: ‘GET’,
crossSite: true,
onSuccess: function(transport)
{ document.body.appendChild(document.createElement(’div’)).innerHTML=transport;
}
});
[/script]
[/body]
The function called be setInterval will be blocked until the request to test.php has not finished (test.php is just a script which do a sleep(60)). Clicks on the [p] tag will also be blocked until the request has not finished.
I’m getting an error in Firebug:
_xsajax$transport_status is not defined
http://www.wediditman.com/consolation/transport.js
Line 62
Know what this is all about?