PDA

View Full Version : Ajax request using Jsonp



TigrouMeow
25 Sep 2011, 8:50 PM
Hello,

When I look at the examples and the document, it seems that the jsonp proxy only works with the store. Unfortunately, I really need to use an Ext.Ajax.request, and I thought that, logically, using the jsonp proxy would do the trick, but it doesn't.

Any ideas? Thanks a lot.

skirtle
26 Sep 2011, 3:04 AM
You're not comparing like for like. Proxies are a higher level abstraction than Ext.Ajax.request(), providing a uniform way for stores to load their data. An Ajax proxy would use an Ajax request, other proxy types do not.

The equivalent of Ext.Ajax for JSONP is Ext.data.JsonP:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.JsonP

You'll notice the API is quite similar to that of Ext.Ajax but the technique it uses is very different.

You haven't explained exactly why you need to use Ext.Ajax.request(). It should be noted that it is impossible (due to browser security restrictions) to load data from a different server using an Ajax request - this is why JSONP exists in the first place.

mankz
26 Sep 2011, 4:29 AM
It should be noted that it is impossible (due to browser security restrictions) to load data from a different server using an Ajax request - this is why JSONP exists in the first place.


Not entirely true, checkout HTTP access control. https://developer.mozilla.org/en/http_access_control
and http://www.w3.org/TR/cors/

Supported by modern browsers, demo of using Ext 3 + CORS here: http://bryntum.com/playpen/BBC/bbc.html

skirtle
26 Sep 2011, 5:16 AM
@mankz. Thanks for the links, not sure how much they'll help the OP but I found them interesting. In the right circumstances this could certainly be a useful technique.

TigrouMeow
26 Sep 2011, 5:24 PM
You haven't explained exactly why you need to use Ext.Ajax.request(). It should be noted that it is impossible (due to browser security restrictions) to load data from a different server using an Ajax request - this is why JSONP exists in the first place.

I need indeed to load data from a different server. I know well how JSONP operates and I naturally thought that it would work with the Ext.Ajax.request (the aim is to perform an asynchronous request still) + the JSONP proxy. The 'callbackKey' would enable the framework to call an internal callback that would then itself call "success". Wouldn't be neat if it was working this way?

Thanks for guiding me to Ext.data.JsonP (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.JsonP), it's what I'm looking for indeed. I just wonder why it's not possible to do it with the Ext.Ajax.request + JSONP proxy. Maybe because the implementation of Ext.Ajax.request don't let enough room for the proxies to do much?

evant
26 Sep 2011, 5:50 PM
A proxy, as the name suggests, is the intermediary that fetches the data from a particular source. In this case, Ext.Ajax ~is~ the proxy, it's specifically designed to retrieve data over HTTP.

TigrouMeow
26 Sep 2011, 6:20 PM
A proxy, as the name suggests, is the intermediary that fetches the data from a particular source. In this case, Ext.Ajax ~is~ the proxy, it's specifically designed to retrieve data over HTTP.

Thanks for the clarification, I didn't really understand Ext.Ajax as a proxy (as its parent is Ext.data.Connection (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Connection)), but more as an asynchronous connection sending data and retrieving data (json, xml, whatever) through a proxy (using default Ext.data.proxy.Ajax or Ext.data.proxy.JsonP, rest).