Question

最近我意识到我需要使用easyXDM而不是jQuery的$.ajax才能发出跨域请求。在设置easyXDM后，我发现这些功能非常接近：

jQuery的：

$.ajax({
    url: "/ajax/",
    method: "POST",
    data: myData
});

easyXDM：

xhr.request({
    url: "/ajax/",
    method: "POST",
    dataType: 'json', // I added this trying to fix the problem, didn't work
    data: myData
});

myData设置如下：

myData = {};
myData[1] = 'hello';
myData[2] = 'goodbye';
myData[3] = {};
myData[3][1] = 'sub1';
myData[3][2] = 'sub2';
myData[3][3] = 'sub3';

当我使用jQuery发出请求时，它会正确处理子字段，但不能使用easyXDM。

以下是POST请求如何通过jQuery进入服务器：

screenshot-with-shadow.png http://img37.imageshack.us/img37/4526/screenshotwithshadow.png

以下是easyXDM的用法：

screenshot-with-shadow.png http://img204.imageshack.us/img204/4526/screenshotwithshadow.png

如何通过像jQuery这样的easyXDM / XHR请求发送javascript对象/键值对数组？

Answer 1

鉴于评论中讨论的easyXDM的局限性，您可以使用它的唯一方法是在将数据传递给.request时手动序列化数据。

xhr.request({
    url: "/ajax/",
    method: "POST",
    data: {jsonData: JSON.stringify(myData)}
});

或者您可以创建自己的postMessage解决方案，但是您将排除IE7及以下版本。

Answer 2

我认为您错误地通过AJAX发送请求跨域。无论JavaScript API如何，您确实可以通过AJAX发送跨域请求。但是，为了接收跨域响应，响应必须是数据类型JSONP。

JSONP只是带填充的JSON，例如：

<强> JSON：

{ Key: "Hello", Value: "World" }

<强> JSONP：

callback({ Key: "Hello", Value: "World" })

这是一个微妙的区别，但JSONP绕过浏览器同源策略，允许您使用其他服务器提供的JSON数据。

要通过jQuery AJAX使用来自其他服务器的JSON数据，请尝试：

$.ajax({
    url: "http://mydomain.com/Service.svc/GetJSONP?callback=callback",
    dataType: "jsonp",
    data: myData,
    success: function(data) {
        alert(data);
    }
});

为此，您必须确保您的Web服务以JSONP而不是JSON的形式返回结果。

Answer 3

由于easyXDM无法正确序列化，您需要手动序列化数据：

JSON.stringify(myData)

由于请求现在将包含json字符串而不是object，因此Index.html不应解析属性以创建json结构。转到easyXDM附带的index.html并找到以下代码：

var pairs = [];
for (var key in config.data) {
    if (config.data.hasOwnProperty(key)) {
        pairs.push(encodeURIComponent(key) + "=" + encodeURIComponent(config.data[key]));
    }
}
data = pairs.join("&");

请勿在POST请求的情况下执行此代码。只需将config.data分配给数据：

data = config.data;

如何使用easyXDM通过AJAX帖子将javascript对象/数组作为键值对发送？

3 个答案: