How to consume external webservice in sencha touch2

Question

I am new to sencha touch2 and i want to consume external web service in sencha touch2.I have written code for this cause, showing alert msg not working! in console giving error like this XMLHttpRequest cannot load http://localhost/SLS.BRND.Services/Service1.asmx/Helloworld?_dc=1336466078991&method=Helloworld&format=json.

Origin http://localhost:49692 is not allowed by Access-Control-Allow-Origin. app/view/Blog.js?_dc=1336466047687:27Response Status:- 0

please help me what is the problem. Thank you

Here's my code :-

   Ext.define("GS.view.Blog", {
    extend: 'Ext.navigation.View',
    xtype: 'blog',
    config: {
        title: 'WebService',
        scrollable: true,       
        items: [
            {
            xtype: 'button',
            text: 'Press Me',
            height: 40,
            width: 200,
            listeners: {
                tap: function () {
//                    alert("Hi Welcome To Sencha");
                    Ext.Ajax.request({
                        method: 'GET',
                        url: 'http://localhost/SLS.BRND.Services/Service1.asmx/Helloworld',
                        params: { method: 'Helloworld', format: 'json' },
                        success: function (response, request) {
                            alert('Working!')
                            alert(response.responseText)
                            console.log('Response:-' + response.responseText)
                        },
                        failure: function (response, request) {
                            alert('Not working!')
                            console.log('Response Status:- ' + response.status)
                        }
                   });
                }
            }
          }
        ]
    }
});

Answer 1

Try this code

        Ext.data.JsonP.request({

                    url: 'http://localhost/SLS.BRND.Services/Service1.asmx/Helloworld',
                    params: { method: 'Helloworld', format: 'json' },
                    success: function (response) {
                        alert('Working!')
                        console.log(response);
                    },
                    failure: function (response) {
                        alert('Not working!')
                        console.log(response);
                    }
               });

Answer 2

You can use eval function for convert plain text to JSON data.

var newObject=eval('('+response.responseText+')');

Answer 3

I think, I figured out the solution to your problem.

First, read this excellent article on Cross-domain Ajax with Cross-Origin Resource Sharing by Nicholas C. Zakas. It clearly explains this Cross-domain Cross-Origin resource sharing problem.

So, In your case, you need to make an JSONP request.

JSONP or "JSON with padding" is a complement to the base JSON data format, a usage pattern that allows a page to request and more meaningfully use JSON from a server other than the primary server.

JSONP is an alternative to a more recent method called Cross-Origin Resource Sharing.

All you need to do is make an Ext.util.JSONP.request() call like this,

Ext.util.JSONP.request({
     url: 'http://localhost/SLS.BRND.Services/Service1.asmx/Helloworld',
     params: { 
         method: 'Helloworld',
         format: 'json',
         callback: 'callback',
     },

     success: function (response) {
           alert('Working!')
           console.log(response);
     },
     failure: function (response) {
            alert('Not working!')
            console.log(response);
     }
});

and that should work now!