CODEWITHSUNDEEP
asp.netjqueryjsonp
Abbas
Abbas

Reputation: 5044

Formatting JSONP for cross domain webservice in Jquery

i have webservice on external domain, which contain a web-service for sending mails

I want to call cross-domain web-service using jquery ajax, the problem is i could not get the success value, it goes to error even if webservice has successfully executed and mail has been sent

i checked in the firebug (Net Tab), while executing it appends ?callback=[some junk function], and because it does not finds that function, it does not displays proper message.

below is my webmethod

[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)]
public string SendMail()
{
    string returnVal = string.Empty;
    try
    {
        MailMessage message = new MailMessage();
        message.From = new MailAddress("[from]");
        message.To.Add("[to]");
        message.Subject = "TEST";
        message.Body = "TEST MAIL";
        message.Priority = MailPriority.High;
        SmtpClient client = new SmtpClient("smtp.gmail.com", 587);
        client.EnableSsl = true;
        client.Credentials = new NetworkCredential("[username]", "[password]");
        client.Send(message);
        returnVal = "[mycallback]({'status':'Success'})";
    }
    catch (System.Exception ex) { returnVal = "[mycallback]({'status':'Fail Reason: " + ex.Message + "'})"; }
    return returnVal;
}

and below is my ajax jquery call

    $(document).ready(function(){
            $.ajax({
                type:"GET",
                url:"http://audiomedia.dev.asentechdev1.com/MailSender.asmx/SendMail",
                dataType:"jsonp",
                jsonpCallback: 'mycallback',
                success: function(data){
                    alert(json.Parse(data));
                },
                error: function (data) {
                    alert("Error: " + data.responseText);
                }   
            });
            function mycallback(data){
                alert("CallBack: " + JSON.stringify(data));
            }
        });

with changing the return value and adding callback i get below reply from server enter image description here but still its going into the error callback, even after successfully sending mail. can anyone tell me how can format the success message.

Upvotes: 0

Views: 485

Answers (2)

Basic
Basic

Reputation: 26766

You need to wrap the response data inside a function with the same name as SomeJunkFunction. Eg...

SomeJunkFunction() {return {"SomeProperty":"SomeValue"}};

As to why this is needed...

The Same origin policy prevents queries cross-domain from returning data. To work around this, you simulate including an external javascript file. The simulated JS file has a function which returns data. The browser assumes the function is static and legitimate so allows it to run.

For the client to know the name of the function provided in "static" js, it passes it in the call eg SomeJunkFunction and trusts that the new function you create will be named that way.

See This page for more information and some example code.

Edit: To clarify, you don't create the SomeJunkFunction on the page itself, it needs to be included in the response from the server. It has no parameters. Your server doesn't return data, it returns a function which, when called, returns data.

Upvotes: 1

nullability
nullability

Reputation: 10677

You are getting an error state because you are not returning proper JSONP. In order to complete a cross-domain JSONP request you must return the request wrapped in the callback function generated by jQuery. If jQuery does not receive a response wrapped in this function then the success callback will never be triggered.

Change

 return returnVal;

to

 return "[callback]({status: [returnVal]})";

Upvotes: 0

Related Questions