AJAX流程化技术

AJAX Streamlining techniques?

本文关键字：技术 流程化 AJAX      更新时间：2023-09-26

我的问题有点抽象。

我们都熟悉AJAX预加载器/旋转器，它们会在AJAX请求发出时出现。我的问题是如何避免这些?

以可排序列表为例。当用户拖放物品时，将调用AJAX来更新订单。

以前，我会弹出一个全屏AJAX旋转器，以防止用户在AJAX调用完成之前做任何事情。

我的问题是，我该如何避免AJAX旋转器并"简化"AJAX请求，以确保如果用户在2秒内发起20个AJAX请求，它们将按顺序执行?

我真的不需要代码示例，只是接受或流行的技术/想法。或者如果我在这里完全偏离了轨道。

谢谢

update

使用async javascript库代替这个来实现你想要的

老低于

到目前为止，在使用数组或队列来确保每次加载并返回一个方面，

是好的答案。我会像gmail一样把旋转器全部去掉，只在必要的时候给用户发消息。没有必要用这些旋转器交易来打扰用户。反正他们看起来就像个小机器人。下面是我编写的一些代码。

既然我得到了点头，我将解释它的特性。

    如果发生错误，
  1. 停止队列
  2. 当成功发生时继续队列
  3. 具有上下文
    4. 的成功/错误事件处理程序
我写插件，所以这是一个值得插件的想法吗?我不这么认为，但是你永远不会知道。 
var queue = [],
doRequest = function(params) {
    params.running = true;
    $.ajax({
        url: params.url,
        dataType: 'json',
        success: function(d) {
            params.success.call(params,d);
            queue.unshift(); // Quit counting your change and move along.
            if (queue.length > 0) {
                doRequest(queue[0]); // Hey buddy, your next.
            }
        },
        error: function(a,b,c) {
            params.error.call(params,a,b,c);
            alert('"oops"'); // Rick Perry
        }
    });
},
queueRequest = function(params) {
    queue.push(params); // Sir, you'll need to go to the BACK of the line.
    if (!queue[0].running) {
        doRequest(queue[0]);
    }
};
// so to use this little snippit, you just call "queueRequest" like so (over and over)
queueRequest({
    url: 'someajax.abc',
    success: function(d) {
        // let the user know their stuff was saved etc.
        // "this" will be the context of the "params"
    },
    error: function(a,b,c) {
        // let the user know something went wrong etc.
        // "this" will be the context of the "params"
    } 
});

您可以创建一个"ajax请求管理器"，用于排队(并可能捆绑在一起)等待的ajax请求。我有一个包含许多ajax可更新控件的复杂应用程序，我只在正在更新的控件上显示微调器。因为你的可拖拽列表更新的只是服务器上的东西，所以你可以不使用旋转器。

其中一个选项可能是在客户机上创建某种请求队列。一旦用户对两个项目进行排序，一个项目就被添加到队列中并开始执行。如果在第一次调用完成之前发生了另一次排序，则将其放入队列中，并将在第一次调用完成后执行。

更新:
当执行同步请求时，您肯定应该处理一个用例。在这个阶段，所有ajax请求应该以某种方式存储在隐藏字段中(只是一个想法)，并在同步请求本身之前由服务器处理。

我建议你jquery队列，它可以帮助你排队任何东西，如果它ajax请求或动画队列…

这个答案有点抽象，但是看看jQuery Deferred对象:http://api.jquery.com/category/deferred-object/

它可能对您的情况有所帮助，因为它基本上向AJAX调用添加了一些状态信息，您可以随意读取/更新。

  • 有一个中心请求q
  • 和一个隐藏的旋转器。

中央请求Q有一个中心数组，临时保存所有请求，因此伪代码将是这样的…

var centralQ = []; //holds the entire process Q
var inProc = false; //provides an in Q proc lock
//processes the request one at a time
function reqProc() {
    if( centralQ.length == 0 ) {
        inProc = false;
        return true;
    }
    inProc = false; //locks it 
    var req = centralQ[0];
    function callBack() {
        //error / res processing??
        if( req.callback ) {
            req.callback.apply( req, arguments ); //calls the request callback
        }
        window.setTimeout( reqProc, 0 ); //loop backs, uses timeOut to defer the the loop
    }
    //Your loader???
    jQuery.get( req.url, req.data, callBack );
}
function addReq( addRequest ) {
    centralQ.push( addRequest );
    if( !inProc ) { //does not process if it is already running
        reqProc();
    }
}

你可能需要做一些错误捕获/重试，但你得到了大致的想法。

全球转轮

只需在需要时开始淡化顶部旋转器，并在不需要时淡化它。

这不是为什么，在jquery中有一个async选项?

使用async: true将请求排队。

保持

转轮是为了避免重复发送相同的请求。举个例子，有一个选项可以启用和禁用一个功能……如果用户再次点击相同的按钮，您将一次又一次地发送相同的请求。只在这些情况下使用旋转器。

弹出一个大框，以避免访问整个页面…这只是一个愚蠢的想法(无意冒犯)。

使用旋转器，到特定的元素…以某种方式被处理或操纵。对于请求，只需使用async…

相关文章：