Reverse engeering cross domain POST requests which use Ext.Ajax.request

Question

I'm working with a script which seems to use Ext.Ajax.request (with ExtJS 3) to send cross-domain requests - some of them POST requests. Considerations are being made to move away from ExtJS3 (perhaps move away from ExtJS in general) but a quick attempt at using XMLHttpRequest didn't work; how can I find out what technique is being used to send those cross domain requests?

score 3 · Answer 1 · edited Oct 20 '11 at 13:30

3

I'm currently using ExtJS 3.3.1, I haven't made the switch to 4 yet but will most likely when a new project comes about. Without looking at the Ext source I can tell you they are using JSONP to accomplish this task, it is the only way to make a cross-domain AJAX call because JavaScript has to abide by the same-origin policy.

Are you trying to do a pure JS implementation of JSONP? Or are you using a JS library already?

Edit

Per our comments... they are making POST requests. That's not possible with JSONP. So as far as I can tell, they are using iframe trickery similar. It's the same trick used to "AJAX" upload files on older browsers.

This link explains it in more detail.

Also, the same method (iframe to, POST, upload a file) is used in Valum's file uploader. It's much easier to follow then the ExtJS source.

edited Oct 20 '11 at 13:30

Peter O.

32,158
14
82
96

answered Oct 18 '11 at 19:38

John Strickler

25,151
4
52
68

But can you use JSONP to send POST requests? I'm watching the network activity in Firebug and the page is sending cross-domain POST requests – Richard JP Le Guen Oct 18 '11 at 19:43
Now you have me curious... I'd assume JSONP can only send GET requests. I'm going to go digging. – John Strickler Oct 18 '11 at 19:52
Haven't read the article in detail... but it makes no mention of `Ext.Ajax.request`; it's more about form submission. Still, I'll take a look. – Richard JP Le Guen Oct 19 '11 at 15:44

Timothy Allyn Drake · Answer 2 · 2011-10-18T20:48:24.557

0

The Ext JS 3.4 online documentation will provide you with the Ext.Ajax class inheritance model which can be used to trace the source code correlate to the Ext.Ajax.request method invocation. However, rather than spending more time and resources in re-creating the wheel, I would suggest implementing the native Ext JS Ext.data.ScriptTagProxy class into your pre-existing stores via the proxy config option, to facilitate your cross-domain requests for remote stores. Below is an abbreviated example of what I'm referring to.

Example

var myJsonStore = new Ext.data.JsonStore
({
    autoLoad : true,
    proxy : new Ext.data.ScriptTagProxy
    ({
        url : 'http://www.cross-domain.com/file.php'
    }),
    fields : ['myIdColumn','myCharColumn','myDateColumn']
});

ADDITION

Because you intend on moving away from using Ext JS please checkout the ACD (AJAX Cross Domain) library.

edited Oct 18 '11 at 20:48

answered Oct 18 '11 at 07:59

Timothy Allyn Drake

926
6
22

But I'm intending to move away from using ExtJS... doesn't this suggest continuing to use ExtJS? – Richard JP Le Guen Oct 18 '11 at 19:45
Not necessarily. I was trying to suggest that you start by reviewing the `Ext.Ajax` class inheritance model and its underlying `request` method logic using the Ext JS 3.4 online documentation. By starting there and understanding the inheritance hierarchy you should be able to easily traverse up the tree, identify and review the superclass method(s) and the logic responsible for facilitating cross-domain requests. My example may have been miscommunicated, but was intended to hint to the specific `Ext.data.ScriptTagProxy` class where you will likely find what you are looking for. – Timothy Allyn Drake Oct 18 '11 at 20:44
Please checkout my addition of very simple and lightweight JavaScript AJAX library that provides cross-domain support. You may either use the library itself, or the source code as a reference if you are set on writing a homegrown solution. – Timothy Allyn Drake Oct 18 '11 at 20:50

score 0 · Answer 3 · answered Oct 19 '11 at 21:59

JSONP is a bit of a hack, but usable.

However, consider using CORS if you control the domains being crossed. CORS involves placing a header (Access-Control-Allow-Origin) in the responses from the web site: http://enable-cors.org/

It's supported by IE 8+ (with caveat, natch), Firefox, and WebKit browsers. The IE caveat is this: IE uses a different request object (XDomainRequest) for CORS requests. If you have to support Opera you'll need to use JSONP or a polyfill (something like https://github.com/gimite/web-socket-js/, which requires Flash).

If you don't control the domains in question, you can try asking them to support CORS.

score -2 · Answer 4 · answered Oct 16 '11 at 21:23

You can try to use jsonp Jquery example:

$.ajax({
  url: "test.php",
  dataType: "jsonp"
  success: function(data){
     console.log(data)
  }
});

Or if you have access to the requested content you can set the Access-Control-Allow-Origin header. PHP example:

header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);

Reverse engeering cross domain POST requests which use Ext.Ajax.request

4 Answers4