How to call external webservice using jquery “jsonp”?

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

From memory:

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?

Method 2

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/

Method 3

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

Method 4

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”.

Method 5

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);}
        });


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x