php - 如何向 PHP 发送简短的 Ajax 请求、获得确认并且无需等待完整处理完成

Question

第一篇文章在这里:) 我有一个移动应用程序(Phonegap)，它向 PHP 服务器发送 ajax 请求，比如 friend 邀请。收到请求时，必须执行一些操作(创建链接、授权、发送电子邮件等)，这需要很长时间(5 秒)。在此期间，应用程序上的用户正在查看旋转器，等待 ajax 请求完成。

理想情况:

• 返回确认信息“已收到好友请求”，无需等待流程完成。
• 没有 Cron 作业，因为等待 1 分钟太长。
• 简单的事情(Gearman 很可怕)

在应用程序上:

$.ajax({
    url: 'http://www.my_site.com/action.php',
    type: 'POST',
    data: "my_guid="+my_guid+"&friend_guid="+friend_guid, 
    dataType: 'json',
    success: function(json) {
        // Send confirmation
    },
    error: function(json) {
        // Show error
    }
}

在服务器上(PHP):

$my_guid = $_POST['my_guid'];
$friend_guid = $_POST['friend_guid'];
// return here confirmation to the app
veryLongFunction($my_guid,$friend_guid); //continue executing long function

Answer 1

很简单，不显示微调器。

无论如何它都是异步的

只是不显示微调器。请求本身是异步的。当请求在后台等待响应时，用户可以继续使用该页面。仅当收到响应时，成功处理程序才会启动。

替代反馈

因此，我不会显示旋转叠加层，而是在页面顶部显示一个小通知，上面写着“正在保存...”，不会过多遮挡视线，甚至可能只是一个小图标或动画在角落里，或者在他们单击的按钮顶部(参见下面的代码片段)来执行操作。

然后，当收到响应时，会显示更明显的通知，指示成功或错误。

处理导航

离开页面将结束请求。这并不意味着 PHP 脚本会立即结束，但是如果您开始输出信息并将其发送到客户端，您的服务器会注意到连接已消失，并且会终止 PHP 脚本。您可以通过使用 ignore_user_abort(true) 来阻止这种情况并让 PHP 完成请求。 .

小细节:保存好友邀请时，您无法真正看到它，因此如果您导航到也显示好友邀请按钮的另一个页面，则很难使其显示正确的状态。一种解决方案可能是在开始保存邀请后立即设置“保存”标志，但就我个人而言，我不会走那么远。只需确保您的脚本能够妥善处理重复保存并向用户隐藏冲突即可。

内联指示器原型(prototype)

这里有一个小片段来展示我通过内联显示它的意思。它不执行实际请求，而是使用 setTimeout 模拟它。您可以单击每个按钮，然后可以继续使用该页面。我没有显示一个大的旋转图标，而是在您刚刚单击的按钮中显示一条文本，这样您就知道要保存哪个好友请求。

这样，用户可以获得更多的反馈(正在保存的确切名称)，反馈也不会那么突兀(它只出现在无论如何都不应该再点击的按钮的位置)，并且您可以在同一位置显示响应，或选择显示通知(或两者)。

$('button').on('click', function(){
  
  // Button is clicked. Disable and show an indicator.
  var button = $(this);
  button.prop('disabled', true);
  button.text('saving...');
  
  // Simulate the request that takes 5 seconds.
  setTimeout(
    function(){
      // Simulate success
      button.text('Saved!');
      button.css('color', 'green');
    }, 5000);
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>John <button>Send friend request</button>
<li>Jane <button>Send friend request</button>
<li>Jack <button>Send friend request</button>
<li>Janet <button>Send friend request</button>