Cross Domain AJAX Post using easyXdm

Question

I am trying to get a cross domain AJAX post to work using the easyXdm library.

In my local development environment I have two sites:

1. http://localhost/MySite/ws/easyXDM/cors/index.html (EasyXdm file)
2. http://localhost/MyClientSite/TestPage.html (AJAX post from here)

TestPage.html (AJAX Post)

var rpc = new easyXDM.Rpc({
        remote: "http://localhost/MySite/ws/easyXDM/cors/index.html"
    },
    {
        remote: {
            request: {}
        }
    });

rpc.request({
        url: "http://localhost/MySite/ws/MyService.asmx/DoSomething",
        method: "POST",
        data: jsonData
    }, function(response) {
        console.log(JSON.parse(response.data));

        $('#thanksDiv').fadeIn(2000, function () {
            $('#thanksDiv').fadeOut(4000);
        });
    });

When I do the AJAX post I get the following in my browser's console:

easyXDM present on 'http://localhost/MySite/ws/easyXDM/cors/index.html?xdm_e=http%3A%2F%2Flocalhost%2FMyClientSite%2FTestPage.html&xdm_c=default884&xdm_p=4 
native JSON found 
easyXDM.Rpc: constructor 
{Private}: preparing transport stack 
{Private}: using parameters from query 
easyXDM.stack.SameOriginTransport: constructor 
easyXDM.stack.QueueBehavior: constructor 
easyXDM.stack.RpcBehavior: init 
{Private}: firing dom_onReady 
... deferred messages ... 
easyXDM.Rpc: constructor 
{Private}: preparing transport stack 
{Private}: using parameters from query 
easyXDM.stack.SameOriginTransport: constructor 
easyXDM.stack.QueueBehavior: constructor 
easyXDM.stack.RpcBehavior: init 
... end of deferred messages ... 
easyXDM.stack.SameOriginTransport: init 
easyXDM.stack.RpcBehavior: received request to execute method request using callback id 1 
easyXDM.stack.RpcBehavior: requested to execute procedure request 
easyXDM.stack.QueueBehavior: removing myself from the stack 

Problem: The web service never actually receives the data. This is obvious as my AJAX post success function should show a thanksDiv and also a record should be created in the *database.

Note: I am replacing my existing AJAX post code as I need to use easyXdm to overcome an issue with Internet Explorer 6 and 7 on a client's site.

Additional Information: The file-structure where my easyXdm files are located is as follows:

/ws/easyXDM/easyXDM.debug.js
/ws/easyXDM/easyXdm.swf
/ws/easyXDM/json2.js 
/ws/easyXDM/name.html
/ws/easyXDM/cors/index.html

Answer 1

My web service was throwing a HTTP 500 server error as jsonData was not being sent correctly via easyXdm.

The json data looks like this before it was posted:

{ "param1": "value1", "param2": "value2"...... }

However, the web service was receiving the data one character per line e.g.

{
"
p
a
r
a
m
"
....

I was not serialising the json data prior to my post. So, based on the original code I posted in the original question:

To get it working I changed the line

data: jsonData 

to

data: JSON.parse(jsonData)