How to call external webservice using jquery "jsonp"?

Question

I had a previous question can jquery ajax call external webservice?

and some good developers answered me to use jsonp, but i don't know how to use it, i am trying to call my service using this code:

$.ajax({
            type: "POST",
            url: "http://localhost:1096/MySite/WebService.asmx?callback=?",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "jsonp",
            success: function(msg) {alert(msg);}
            });

and this is my service code:

[WebMethod]
public string HelloWorld() {
    return "Hello World " ;
}

anyone have examples or can explain this issue for me?

UPDATE:
I wrote the code again to be like this:

$.getJSON("http://localhost:1096/YourShoppingTest1/WebService.asmx/HelloWorld?jsonp=?",{name:"test"},
    function(data){
    alert(data.x);
    });

and the service like this:

[WebMethod]
public string HelloWorld(string name)
{
    return "( {\"x\":10 , \"y\":100} )";
}

But it always give me this error when back: "missing ; before statement [Break on this error] ( {"x":10 , "y":100} )"

and never call the success function, can anyone help with that?

Why have you accepted the answer to your other question if it didn't help you? You should keep asking in your old question and follow that thread. — Seb, Apr 08 '09 at 12:48
because they answered me with this way: $.getJSON which is working, but i am asking about another way using $.ajax — Amr Elgarhy, Apr 08 '09 at 12:52

score 2 · Answer 1 · answered Nov 13 '09 at 13:49

The point with JSONP is the P! P as in padding. You are padding the JSON object literal with a function call - invoking a function on the calling page taking the data object as an argument.

I.e. if you request the webservice, send the desired callback function name in the query string

...service/?callback=hello

Then the service should answer (using appropriate mime type):

hello({a: 17, b: 4117});

For a more in-depth explanation, see: http://www.stpe.se/2008/10/cross-site-data-retrieval-using-jsonp/

score 2 · Accepted Answer · edited May 23 '17 at 12:07

I've had a similiar problem, unfortunately I don't have the code at hand.

From memory:

Add [ScriptService] as an attribute to your Web Method
Also change your url to call the HelloWorld procedure.
Something like http://localhost:1096/MySite/WebService.asmx/HelloWorld?callback

See: What are some good examples of JQuery using JSONP talking to .net? & What is the best way to call a .net webservice using jquery?

score 0 · Answer 3 · answered Nov 13 '09 at 11:34

0

Hezil's code worked for me, but I had to change the server code to this:

$data = '{"name" : "hello world"}'; echo $_GET['callback'] . '(' . $data . ');';

Note the "callback" instead of "jsoncallback".

answered Nov 13 '09 at 11:34

Kris Khaira

132
11

score 0 · Answer 4 · answered Apr 08 '09 at 13:39

0

You can't issue a POST request using JSONP, only GET (because <script src="..."> GETs the resource).

answered Apr 08 '09 at 13:39

Jaka Jančar

11,386
9
53
74

score -1 · Answer 5 · edited Dec 01 '12 at 00:13

First you should add jsonp ('callback') in your web server like $_GET['callback']

Second ,don't forget the ';' after the output scripts

$data = '{"name" : "hello world"}';
echo $_GET['jsoncallback'] . '(' . $data . ');';

Now you can find out why the "missing ; before statement" problem occured.

html:

$.getJSON({"http://localhost:1096/MySite/WebService.asmx?callback=?",
        function(data){alert(data);}
        });

How to call external webservice using jquery "jsonp"?

5 Answers5

Linked