PDA

View Full Version : Simple Ajax



Tob1as
30 Nov 2011, 6:42 PM
Hi,

I was trying to retrieve data from php through Ext.Ajax. First from a localhost, later I want to access a REST service.

The http://localhost/test.php file returns {success:true}, when I open it in my browser.

When I trigger the ajax request from extjs, my responseText is empty. firebug reveals: OPTIONS test.php is triggered. See below.

I am new to version 4.x. I realized in version 4.x, there are now actionMethods for proxies. In the API for Ext.Ajax, I can not find any actionMethods or proxy property. How would I approach this?

Best regards and thank you in advance,

Tobi

Here my code:


Ext.onReady(function(){

Ext.QuickTips.init();

Ext.Ajax.request({
url: 'http://localhost/test.php',
params: {
id: 1
},
success: function(response){
var text = response.responseText;

}
});

29713

skirtle
30 Nov 2011, 6:56 PM
The OPTIONS request is a result of the browser switching to CORS mode: it is not explicitly being sent by ExtJS. Pre-Firefox 3.5, if you tried to do an AJAX request to a URL that wasn't from the same origin as the rest of the page it just used to block it. Recent browsers have added support for an XHR2 feature called CORS.

I suggest you do some background reading about the same-origin policy, CORS and JSON-P. CORS isn't supported in all browsers and JSON-P is the old-school workaround that works everywhere, albeit with limitations. Another alternative is just to proxy the remote server through your own server.

Tob1as
30 Nov 2011, 8:18 PM
Thanks skirtle. I was successful. This thread helps as well, if anyone is interested.
http://www.sencha.com/forum/showthread.php?135920-Ext.util.JSONP.request-not-working

One last question, can forms use JSONP as well?
Under http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.action.Submit I can not find any option to set it to jsonp.

I put the jsonp.request inside my submit button for testing. Is there a better solution?


handler: function() {
var form = this.up('form').getForm();

if (form.isValid()) {

Ext.data.JsonP.request({

junkfd
16 Jun 2012, 2:14 AM
for XML case please, check this out :
XmlP (The JsonP for XML data) : http://www.sencha.com/forum/showthread.php?215309-XmlP-(The-JsonP-for-XML-data)&p=834269#post834269 (http://www.sencha.com/forum/showthread.php?215309-XmlP-%28The-JsonP-for-XML-data%29&p=834269#post834269)