Friday, October 26th, 2007

Introducing a cross site Ajax plugin for Prototype

Category: JavaScript, Prototype

<>p>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
< view plain text >
  1. new Ajax.Request('myurl', {
  2.   method: 'GET',
  3.   crossSite: true,
  4.   parameters: Form.serialize(obj),
  5.   onLoading: function() {
  6.     //things to do at the start
  7.   },
  8.   onSuccess: function(transport) {
  9.     //things to do when everything goes well
  10.   },
  11.   onFailure: function(transport) {
  12.     //things to do when we encounter a failure
  13.   }
  14. });

Related Content:

  • Prototype of a policy
    The DTI's recent Information Security Breaches Survey found that three out of four UK businesses have no security policy....
  • Facebook accidental prototype release shuts site
    Facebook shut its site last night after prototypes of its redesigned features were accidently leaked to users. The release of internal...
  • Ajax hype vs. reality
    Ajax is a powerful rich Internet application technology, but Burton Group cautions against overkill and notes that tools and frameworks for using it...
  • Ajax hype vs. reality
    Ajax is a powerful rich Internet application technology, but Burton Group cautions against overkill and notes that tools and frameworks for using it...
  • Ajax hype vs. reality
    Ajax is a powerful rich Internet application technology, but Burton Group cautions against overkill and notes that tools and frameworks for using it...

Posted by Dion Almaer at 9:29 am
14 Comments

++++-
4.2 rating from 61 votes

14 Comments »

Comments feed TrackBack URI

This makes me quite happy. I wonder how it affects security though

Comment by Dromer — October 26, 2007

Well, obviously you have to trust the data that you’re getting.

Comment by Michael Peters — October 26, 2007

…very happy to see this as well. Nice

Comment by Mark Holton — October 26, 2007

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.

Comment by asad sheth — October 26, 2007

This is great, is it working with POST (the example showes only GET)? What is the trick for POSTing?

Comment by Joachim — October 27, 2007

Wouldn’t an iframe be better?

Comment by Andy — October 27, 2007

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…

Comment by Block — October 28, 2007

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?

Comment by hm — October 29, 2007

@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?

Comment by Fredrik — October 29, 2007

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.

Comment by Bollysite — October 30, 2007

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

Comment by Thierry — November 3, 2007

@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.

Comment by Block — November 3, 2007

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.

Comment by Block — November 3, 2007

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?

Comment by craigwillard — December 5, 2007

Leave a comment

You must be logged in to post a comment.