Use jQuery to retrieve single value from another domain

Question

I'm doing some work for a charity that's having a fund drive. Whenever someone makes a pledge, their pledge amount is logged to SQL Server. They'd like to have the pledge total posted across a couple of other websites, so I thought, "a-ha! this is an opportune time to learn about web services!" I assumed I could set up a web service that returns the pledge total as a string, and then dump some jquery code on the external sites that would call the web service.

It's about nine hours later, and I'm still trying to figure this stuff out. It sounds like JSONP is the only way to do cross-domain requests, but even after reviewing a bunch of tutorials, I'm not sure how to make my .NET page return the right value, and now I'm wondering if there isn't a better way of doing this altogether. Can anyone provide a totally simplified code sample?

TL;DR: I need to return a single value to a bunch of pages using jquery or javascript from another web server.

Answer 1

JSONP is the way to go. The bottom line is that you supply a function name to use as the callback in the query string, serialize the returned data as JSON, then wrap the serialized data (string) in a function call. jQuery will receive this back inside a script tag so that it will call the callback function with the JSON data.

Here's a bit of code adapted from one of my ASP.NET MVC projects. Given an object to serialize and the callback parameter, it will return a string that can be sent back as the content. In my class it actually returns a ContentResult, but I've changed it to return a simple string.

public class JsonPSerializer
{
    private string Callback { get; set; }

    public JsonPSerializer(string callback)
    {
        this.Callback = callback;
    }

    private static string GetJson<T>(T obj)
    {
        using (MemoryStream stream = new MemoryStream())
        {
            var serializer = new DataContractJsonSerializer(typeof(T));
            serializer.WriteObject(stream, obj);

            return Encoding.UTF8.GetString(stream.GetBuffer().TakeWhile( b => b != '\0')).ToArray());
        }
    }

    public string Serialize<T>(List<T> list) where T : IModel
    {

        StringBuilder builder = new StringBuilder();
        builder.AppendFormat("{0}([", Callback);
        foreach (var obj in list)
        {
            builder.Append(GetJson(obj));
            builder.Append(",");
        }
        return builder.ToString().TrimEnd(',') + "])";
    }

    public string Serialize<T>(T obj) where T : IModel
    {
        string content = GetJson(obj);
        return  Callback + "(" + content + ")";
    }
}

Answer 2

Here is your "totally simplified code sample":

Your WebMethod(Place it in the example.aspx code behind file):

[WebMethod(CacheDuration = 0, EnableSession = true)]
public static YourResultType YourMethodName(string param1,int param2)
{
    YourResultType result=new YourResultType();
    result.x1=true;
    result.x2="The Response can be in any type";
return result;
}

Your Result Type:

public class YourResultType
{
  public YourResultType(){}
  public bool x1;
  public string x2;
}

The JavaScript Codes(Based on jQuery):

$.ajax({
    type: "POST", cache: false,
    url: "example.aspx/YourMethodName",
    data: "{'randomparam':'" + ((new Date()).getTime()) + 
    //randomparam is for preventing cache
    "','param1':'param1Value','param2':'param2Value'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        if (msg.hasOwnProperty("d")) msg = msg.d;
        //And Here, The msg parameter, 
        //contains the result of the WebMethod 
        //and you can use that like this:
        alert(msg.x1);      
        alert(msg.x2);
    }
});