smallroomsoftware.com

Recently I've been working on embedded enquiry forms that Rentability users can place on their own website to take enquiries via their Rentability account. We wanted the person enquiring to remain on the owners homepage after submitting their enquiry (rather than be redirected to our site) so an AJAX submission was called for. Of course, when you try to make an ajax request from one domain to another (even if the code that is making the request came from the target domain), you find it doesn't work - most browsers veto the request for security reasons. The workaround is to use SCRIPT tags to emulate AJAX requests. Luckily, Thierry Schellenbach has written a plugin for Prototype to make Prototype AJAX requests use this SCRIPT tag technique.

Unfortunately, there are some major limitations here. For a start, you're obviously limited to using the GET method. In our case this is quite irritating as it's an "update" action that's being called (which is normally only accessible via a POST). Also, the request is going to be made with whatever request headers the browser decides to use. IE is typically braindead in this respect and will probably cause you pain if you have both JS and HTML responses for your action (as we do).

Also, the transport.js only works with prototype 1.5 out of the box. I fiddled for a while trying to fix it for 1.6 but I didn't feel much like wasting hours getting my head around how people hack OO into javascript. That stuff just freaks me out. So I just ended up copying and pasting the AJAX.Request constructor from prototype. Here you go:

    1 Ajax.Request.prototype = Object.extend(Ajax.Request.prototype, {
    2     initialize: function(url, options) {
    3         this.options = {
    4           method:       'post',
    5           asynchronous: true,
    6           contentType:  'application/x-www-form-urlencoded',
    7           encoding:     'UTF-8',
    8           parameters:   '',
    9           evalJSON:     true,
   10           evalJS:       true
   11         };
   12         Object.extend(this.options, options || { });
   13 
   14         this.options.method = this.options.method.toLowerCase();
   15 
   16         if (Object.isString(this.options.parameters))
   17           this.options.parameters = this.options.parameters.toQueryParams();
   18         else if (Object.isHash(this.options.parameters))
   19           this.options.parameters = this.options.parameters.toObject();
   20         
   21         this.transport = (!this.options.crossSite) ? Ajax.getTransport() : new scriptTransport;
   22         this.options.asynchronous = (!this.options.crossSite) ? this.options.asynchronous : false;
   23         //turns of the timed onLoad executer
   24         this.transport.respondToReadyState = this.respondToReadyState.bind(this);
   25         this.request(url);
   26         }
   27 });