javascript - 使用 nsIXMLHttpRequest 发布到服务器时，POST 有效负载是什么样的？

Question

经过多次争论和实验，并在 @nmaier 和 @canuckistani 的慷慨帮助下，我能够构建一种 POST 的方法。将数据从 Firefox 插件 (SDK) 传输到在 node.js 中运行的 Web 服务器(使用 express app.post() 获取 POST 编辑数据)。它看起来像这样:

var { Cc, Cu, Ci, Cr, Cm, components } = require('chrome');
var oReq = Cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createInstance(Ci.nsIXMLHttpRequest);

oReq.open('POST', targetURL);
oReq.setRequestHeader('Content-Type', 'text/plain');
oReq.onreadystatechange = function() 
{
    // readyState and status status handlers here...
};

oReq.send({ data : aURIEncodedString }); // object variant

还有

oReq.send( aURIEncodedString );          // string variant

我尝试了两种方式POST ing 我的数据:作为一个( encodeURIComponent 编码)字符串和一个只有一个键值对的对象。

服务器端是node.js应用程序，抓取 POST编辑数据并用它做事。不幸的是，我无法让它工作，因为我似乎无法从 POST 中提取数据。 。它看起来像这样:

app.post('/grab/:fid', function(request, response)              
{
    var filename = request.param('fid');
    var dataURL = request.body.data; // (and also just "request.body")
    ...
    ...
}

所以这里我使用express中间件，带有 app.VERB (本例中为POST)接收数据POST来自客户的编辑。到目前为止工作正常: targetURL从客户端正确指向此处并在此处捕获，执行此代码，参数( filename )被很好地提取。

但我无法获得实际的 POST ed 有效负载。正如我所说，我尝试了字符串和对象，但都没有产生任何结果；我得到一个空的dataURL变量( { } 或 undefined )。

我尝试发送的数据是由 toDataURL() 创建的字符串HTML 5 的功能 canvas目的;它是表示图像的 Base64 编码字符串。所以它是一个带有几个额外符号的纯 ASCII 字符串，使用 JavaScript encodeURIComponent 进行编码。功能。到目前为止，大小相当小(我认为这可能是一个问题，但我目前发送大约 3K - 尽管我确实想发送更大的字符串 - 长度最多可达几百 Kb 左右)。

通常在 node.js ，您使用request.body.<key-name>从 POST 提取数据时作为对象发送，其中 key-name是正在发送的数据值的键。我在应用程序中还有一些此类逻辑的其他实例，它们都工作正常(主要区别在于 POST 是通过 jQuery 完成的，并且不是在扩展但位于常规网页内。例如，

$.post("http://mydomain.herokuapp.com/queue", 
{ 
    URL     : URL, 
    Title   : URLTitle,
    ToWhom  : ID 
}).done(function(data) .....

与

app.post('/queue', function(request, response)
{
    DB.myShopping(request.body.ToWhom, request.body.Title, request.body.URL, ....

这非常有效。

所以我需要知道 nsIXMLHttpRequest 如何版本包数据为POST ed，以及我需要如何在服务器端构建接收器来捕获数据 POST编辑。如果有人有想法，我将非常感激了解它们。

Answer 1

好吧，首先让我们看看 $.post() 会产生什么:

$.post("/", { 
    URL     : "test &&", 
    Title   : "ting",
    ToWhom  : "this" 
});

发送以下请求:

X-Requested-With: XMLHttpRequest
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Content-Length: 38

URL=test+%26%26&Title=ting&ToWhom=this

不，让我们先看看 request 是什么？模块(由于某种原因你仍然忽略)将发送:

Request({
    url: "http://example.org/",
    content: { 
        URL     : "test &&", 
        Title   : "ting",
        ToWhom  : "this" 
    },
    onComplete: function (response) {
        console.log("complete");
    }
  }
).post();

回复:

Content-Type:   application/x-www-form-urlencoded; charset=UTF-8
Content-Length: 38

URL=test+%26%26&Title=ting&ToWhom=this

宾果游戏!

现在，如果您仍然想在更好的建议下使用 nxIXMLHttpRequest，那么您需要自己正确编码您的数据，也许需要 querystring 的帮助。模块:

var { Cc, Cu, Ci, Cr, Cm, components } = require('chrome');
const {stringify:querystring} = require("sdk/querystring");
var oReq = Cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createInstance(Ci.nsIXMLHttpRequest);
oReq.open('POST', "http://example.org");
oReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
data = querystring({ 
    URL     : "test &&", 
    Title   : "ting",
    ToWhom  : "this" 
});
oReq.send(data);