Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Ext.data.JsonP.request and X-Requested-With = XMLHttpRequest

  1. #1
    Sencha Premium Member IAmCoder's Avatar
    Join Date
    Mar 2012
    Posts
    33
    Answers
    4
    Vote Rating
    1
      0  

    Default Ext.data.JsonP.request and X-Requested-With = XMLHttpRequest

    I have the following code returning JSON from various servers just fine:
    Code:
        Ext.data.JsonP.request({
            url: 'http://search.twitter.com/search.json',
            callbackKey: 'callback',
            params: {
                q: 'Sencha'
            },
            success: function(result, request) {
                if (result.results)
                {
                    alert(result.results[0].from_user_name + ': ' + result.results[0].text);
                }
            },
            failure : function(response) {
                alert('failure ');
            }
        });
    But the server I am currently working on requires the 'X-Requested-With' header to be set to 'XMLHttpRequest'. Adding the following code has not helped - it results in a timeout.
    Code:
            headers: {'X-Requested-With': 'XMLHttpRequest'}
    I have also tried Ext.Ajax.request to no avail.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,891
    Answers
    41
    Vote Rating
    89
      0  

    Default

    JSONP is not an XMLHttpRequest. It's a <script> tag. You cannot do anything to the headers.

    Do you really need JSONP?

  3. #3
    Sencha Premium Member IAmCoder's Avatar
    Join Date
    Mar 2012
    Posts
    33
    Answers
    4
    Vote Rating
    1
      0  

    Default

    Thanks! Perhaps not... what should I use instead?

    I have also tried using the proxy of a store, something along the lines of:

    Code:
    Ext.define('App.store.dataStore', {
        extend: 'Ext.data.Store',
        requires: [
            'App.model.dataModel'
        ],
        config: {
            autoLoad: true,
            model: 'App.model.dataModel',
            storeId: 'dataStore',
            proxy: {
                type: 'ajax',
                extraParams: {
                    q: 'Sencha' 
               },
                url: 'http://search.twitter.com/search.json',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                reader: {
                    type: 'json'
                }
            }
        }
    });

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,891
    Answers
    41
    Vote Rating
    89
      0  

    Default

    If it's cross-domain, then you will have to use JSONP, and you will not be able to affect the headers.

  5. #5
    Sencha Premium Member IAmCoder's Avatar
    Join Date
    Mar 2012
    Posts
    33
    Answers
    4
    Vote Rating
    1
      0  

    Default

    Ok, thanks. I might be able to get around this by running from file:\\ - what could I use then instead of JSONP?

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    The options for cross-domain requests are either JSON-P or CORS. You cannot do a normal AJAX request. For a JSON-P request you cannot include custom headers. These are browser security restrictions, not limitations of the library.

    It should also be noted that both JSON-P and CORS require the server to be written to accept those kinds of requests. If you don't have control of the server then you are at the mercy of the communication mechanisms allowed by the third party that does. You cannot just point a JSON-P request at a JSON server, it won't work.

  7. #7
    Sencha Premium Member IAmCoder's Avatar
    Join Date
    Mar 2012
    Posts
    33
    Answers
    4
    Vote Rating
    1
      0  

    Default

    Thanks. I found the CORS flag under the Ext.Ajax.request, as follows:

    Code:
    Ext.Ajax.request({
        url: 'http://search.twitter.com/search.json',
        method: 'POST',
        cors: true,
        params: {
            q: 'Sencha'
        },
        success: function(response) {
            alert('ExtJS.Ajax, cross domain request: success!');
        },
        failure: function(response) {
            alert('ExtJS.Ajax, cross domain request: failure!');
        }
       });
    But I am using the Ext.Ajax.request incorrectly, as it always fails - even without the CORS flag. Any ideas?

  8. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    Is the URL you give in your examples the real URL you're using? Does that Twitter service allow CORS requests? As I explained in my previous post, you can only make a cross-domain request if the service you are contacting allows it.

  9. #9
    Sencha Premium Member IAmCoder's Avatar
    Join Date
    Mar 2012
    Posts
    33
    Answers
    4
    Vote Rating
    1
      0  

    Default

    No, the Twitter service is just a sanity check and only works with the Ext.data.JsonP.request; the service must not allow CORS requests - that would explain it. Thanks for all the info!

    They have now removed the requirement for the X-Requested-With header on the server, but I am still getting a timeout with JsonP.request and an error with Ajax.request. I get a valid response back from the REST Console plugin for Google Chrome, with all the default settings - I used to have to set X-Requested-With.

    So I must still be doing something wrong. My data proxy is also not returning anything. What other method could I use?

  10. #10
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    I feel like we're running round in circles here. Can I just check...

    1. You're trying to contact a service over HTTP that has a different origin to the page making the request?
    2. The service supports either JSON-P or CORS? If yes, which one?

    I strongly recommend that you do some background reading on the same origin policy and how JSON-P and CORS provide solutions to work with cross-origin requests. It sounds to me like you're trying to run before you can walk.

    The only alternative to these techniques is to remove the cross-origin aspect altogether by proxying requests through your webserver.

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •