反向使用Ext.Ajax.request进行跨域POST请求

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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']);