将数据发布到 JsonP

Question

是否可以将数据发布到 JsonP？还是所有数据都必须作为 GET 请求在查询字符串中传递？

我有很多数据需要发送到服务，跨域，并且太大而无法通过查询字符串发送

有哪些方法可以解决这个问题？

Answer 1

由于same origin policy 的（相当合理的）限制，不可能对另一个域上的服务执行异步POST。 JSON-P 之所以有效，是因为您可以在 DOM 中插入<script> 标签，并且它们可以指向任何地方。

当然，您可以将另一个域上的页面设置为常规表单 POST 的操作。

编辑：如果您愿意花很多精力插入隐藏的<iframe>s 并处理它们的属性，那么就有一些interesting hacks。

Answer 2

如果您需要跨域发送大量数据。我通常会创建一个您可以分两步调用的服务：

1. 首先，客户端执行 FORM 提交（允许跨域发布）。该服务将输入存储在服务器上的会话中（使用 GUID 作为键）。 （客户端创建一个 GUID 并将其作为输入的一部分发送）

2. 然后客户端执行正常的脚本注入 (JSONP) 作为参数，您使用的 GUID 与您在 FORM 帖子中使用的 GUID 相同。该服务处理来自会话的输入并以普通的 JSONP 方式返回数据。在此之后会话被销毁。

这当然取决于您编写服务器后端。

Answer 3

我知道这是严重的死灵法，但我想我会使用 jQuery 发布我的 JSONP POST 实现，我已成功将其用于我的 JS 小部件（用于客户注册和登录）：

基本上，我使用的是 IFrame 方法，正如接受的答案中所建议的那样。我正在做的不同是在发送请求后，我正在观察，如果可以使用计时器在 iframe 中访问表单。当表单无法到达时，表示请求已返回。然后，我使用普通的 JSONP 请求来查询操作的状态。

我希望有人觉得它有用。在 >=IE8、Chrome、FireFox 和 Safari 中测试。

function JSONPPostForm(form, postUrl, queryStatusUrl, queryStatusSuccessFunc, queryStatusData)
{
    var tmpDiv = $('<div style="display: none;"></div>');
    form.parent().append(tmpDiv);
    var clonedForm = cloneForm(form);
    var iframe = createIFrameWithContent(tmpDiv, clonedForm);

    if (postUrl)
        clonedForm.attr('action', postUrl);

    var postToken = 'JSONPPOST_' + (new Date).getTime();
    clonedForm.attr('id', postToken);
    clonedForm.append('<input name="JSONPPOSTToken" value="'+postToken+'">');
    clonedForm.attr('id', postToken );
    clonedForm.submit();

    var timerId;
    var watchIFrameRedirectHelper = function()
    {
        if (watchIFrameRedirect(iframe, postToken ))
        {
            clearInterval(timerId);
            tmpDiv.remove();
            $.ajax({
                url:  queryStatusUrl,
                data: queryStatusData,
                dataType: "jsonp",
                type: "GET",
                success: queryStatusSuccessFunc
            });
        }
    }

    if (queryStatusUrl && queryStatusSuccessFunc)
        timerId = setInterval(watchIFrameRedirectHelper, 200);
}

function createIFrameWithContent(parent, content)
{
    var iframe = $('<iframe></iframe>');
    parent.append(iframe);

    if (!iframe.contents().find('body').length)
    {
        //For certain IE versions that do not create document content...
        var doc = iframe.contents().get()[0];
        doc.open();
        doc.close();
    }

    iframe.contents().find('body').append(content);
    return iframe;
}

function watchIFrameRedirect(iframe, formId)
{
    try
    {
        if (iframe.contents().find('form[id="' + formId + '"]').length)
            return false;
        else
            return true;
    }
    catch (err)
    {
        return true;
    }
    return false;
}

//This one clones only form, without other HTML markup
function cloneForm(form)
{
    var clonedForm = $('<form></form>');
    //Copy form attributes
    $.each(form.get()[0].attributes, function(i, attr)
    {
        clonedForm.attr(attr.name, attr.value);
    });
    form.find('input, select, textarea').each(function()
    {
        clonedForm.append($(this).clone());
    });

    return clonedForm;
}

Answer 4

一般来说JSONP是通过在调用文档中添加<script>标签来实现的，这样JSONP服务的URL就是“src”。浏览器通过 HTTP GET 事务获取脚本源。

现在，如果您的 JSONP 服务与调用页面在同一个域中，那么您可以通过简单的 $.ajax() 调用来拼凑一些东西。如果它不在同一个域中，那么我不确定它怎么可能。

Answer 5

您可以使用CORS Proxy 使用此project。它将所有流量定向到您域上的端点，并将该信息中继到外部域。由于浏览器将所有请求注册到同一个域，我们可以发布 JSON。 注意：这也适用于服务器上保存的 SSL 证书。

Answer 6

有一个（hack）解决方案我已经做过很多次了，你将能够使用 JsonP 发布。 （您将能够发布表单，大于 2000 个字符，而不是您可以通过 GET 使用）

客户端应用程序 Javascript

$.ajax({
  type: "POST", // you request will be a post request
  data: postData, // javascript object with all my params
  url: COMAPIURL, // my backoffice comunication api url
  dataType: "jsonp", // datatype can be json or jsonp
  success: function(result){
    console.dir(result);
  }
});

JAVA：

response.addHeader( "Access-Control-Allow-Origin", "*" ); // open your api to any client 
response.addHeader( "Access-Control-Allow-Methods", "POST" ); // a allow post
response.addHeader( "Access-Control-Max-Age", "1000" ); // time from request to response before timeout

PHP：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Max-Age: 1000');

这样做，您正在向任何发布请求打开服务器，您应该通过提供 ident 或其他内容来重新保护它。

通过这个方法，你也可以将请求类型从jsonp更改为json，两者都可以，只需设置正确的响应内容类型

jsonp

response.setContentType( "text/javascript; charset=utf-8" );

json

response.setContentType( "application/json; charset=utf-8" );

请注意，您的服务器将不再遵守 SOP（同源政策），但谁在乎呢？

Answer 7

有可能，这是我的解决方案：

在您的 javascript 中：

jQuery.post("url.php",data).complete(function(data) {
    eval(data.responseText.trim()); 
});
function handleRequest(data){
    ....
}

在你的 url.php 中：

echo "handleRequest(".$responseData.")";