jquery批量ajax请求的正确方法

Question

我有用户选择的行列表,我想逐个删除它们,并在最后显示结果.

很明显,如果我只做简单的循环并且每次调用ajax函数,但是我如何循环并检查哪一个成功,哪一个失败以及何时完成？

你会怎么做？什么是批量编辑/删除的正确方法？

Answer 1

每个ajax请求都会产生与之相关的开销.为每一行打电话是一个坏主意,因为它可能会使请求超载服务器,如果您收到足够的流量,您可以自己动手.此外,所有浏览器都限制一次可以发出多少HTTP请求,因此(取决于浏览器),删除将以突发形式发生,而不是一次性发生,即使您告诉它们一个接一个地执行.

您最好的选择是将行分组编辑/删除为JSON数组,并在单个请求中将它们发送到服务器.然后,在服务器上,您可以解析JSON并相应地删除项目.完成后,返回包含结果的JSON数组.

这个jQuery伪代码代码假设您要么使用本机JSON对象定位浏览器,要么使用json2.js.基本上,此代码只是在您向用户显示的表的每一行中查找"隐藏ID"字段,并将其添加到数组中.您可以根据需要调整此值.

var recordsToDelete = [];
$("tr.myRow").each(function() {
    var id = $(this).find("input:hidden").val();
    recordsToDelete.push(id);
});
var json = JSON.stringify(recordsToDelete);

处理结果可能更难.您应该设计系统,以便(如果成功)删除每一行.除非你正在处理一个非常复杂的系统,否则你应该永远不会遇到某些行传递而某些行失败的情况.如果发生这种情况,您需要重新考虑您的系统架构.jQuery有事件success和failure您可以使用它来处理请求的一般成功还是失败,我推荐你使用.

继续上面的代码,这是处理删除记录的一种方法.complete为简单起见,我在这里使用此事件,但如果可能,您应该使用success和failure事件.该complete事件总是发生,请求是否成功或失败.

$.ajax({
    url: "http://stackoverflow.com/questions/1653127",        
    type: "POST", // Always use POST when deleting data
    data: { ids: json },
    complete: function(xhr, status) {
        var response = JSON.parse(xhr.responseXML);
        // Response will be an array of key/value
        // pairs indicating which rows succeeded or failed
        for (var i = 0; i < response.length; i++) {
            var recordID = response[i].recordID;
            var status = response[i].status;
            // Do stuff with the status codes here
        }
    }
});

回应评论:

• 对于像gmail这样的应用程序,它的工作方式是如此复杂,以至于"我会这样做,因为Google会这样做",这不是一个好主意.并非适用于Google的所有内容都适用于每个公司或网站.像谷歌这样的公司有问题需要处理,几乎没有其他网站需要担心.但是要回答你的问题
  • 我只是验证了这一点:GMail使用一个带有ID数组的AJAX请求.不会发回任何个人状态代码.似乎(我在这里推测)Gmail会为您刚刚执行的操作返回"操作ID",因此您可以通过单击删除电子邮件后短暂显示的撤消链接撤消该操作.
  • 在处理应用程序时,您通常希望使其足够可靠,以确保操作不会失败.您应该执行严格的质量保证以确保这一点.基本上,删除操作应该作为一个整体通过或失败.如果用户在服务器出现故障时单击"删除",则可能发生这种情况.对于用户来说,该站点仍在运行,因为您没有重新加载页面,但AJAX请求将失败,因为它无处可去.你会想要处理这样的事情.
  • 这实际上取决于您的应用程序的业务规则.如果您的应用程序在多人可以同时更改记录的情况下使用(仅作为示例),则在用户单击"删除"按钮之前,其他人尝试删除的内容可能已被其他人删除.在大多数情况下,我看不到有人关心谁首先删除了记录,因为如果它被删除,它就会被删除,无论是谁真的做到了.但是,业务规则可能要求(尽可能荒谬)您需要向用户报告此信息.在这种情况下,您必须为每次删除返回状态数组.
• 为了防止黑客删除其他人的记录,有几件事要做:
  • 对待您的AJAX处理程序与网站的其他部分没有什么不同.他们应该没有特权.对AJAX处理程序的请求应该像其他一样进行身份验证.
  • 使用POST请求(我在我的示例中提到)进行破坏性操作或更改数据的操作.这将使黑客更难以执行跨站请求伪造(CSRF).显然这不是一个万无一失的事情,但它阻止了轻松的攻击.
  • 显然,不要仅仅因为用户发送了删除请求而假设用户有权删除记录.确保验证执行删除的用户是否有权删除每条记录.如何执行此操作取决于您的服务器端应用程序.
  • 确保编码从客户端发送到服务器的所有值.这将阻止SQL注入.
  • 确保您熟悉OWASP十大名单.它涵盖了网站上最常见(但不是全部)的主要漏洞,并解释了如何防止成为它们的受害者.