c# - 使用超时循环将数据加载到 iframe 的更好选择

Question

我不太确定如何恰本地为这个问题命名。

我想讨论及时与另一个网站发布/获取数据并使用 jQuery 作为主力的最佳方式。当然，我愿意接受更好的方法和库的建议，尽管是基于 Javascript 或 C# 的。

让我尝试设置场景。

这两个站点共享子域“a.company”，但它们是两个独立的 IIS7 站点。

站点 1

• a.company.com/products
• ASP MVC 5
• 包含一个“puesdo”购物车方法，用于收集需要准备好传递给站点 2 的产品。

站点 2

• a.company.com/checkout
• 由 vendor 预编译，无法访问 CS 文件，但可以修改 aspx/masterfile 文件
• ASP 网络表单
• 具有将网址转换为产品并添加到购物车的有限 API。
• 例如 a.company.com/checkout/product/qty

目前，当在 站点 1 上单击“继续结帐”按钮时，jQuery 函数会循环遍历每个购物车项目并生成类似于:a.company.com/checkout/product/qty 然后将 URL 加载到文档的 iframe 中。这个循环也有一个 setTimeout 函数，

jQuery(function(){

  $('#proceed').on('click', function(){
       // set integer for timeout

       n = 2;

       $(cartobject).each(function(i){

              q = item.get('qty');
              p = item.get('productid');

              // delay loop
              setTimeout(function(){ 
                   ProceedItems(q,p) 
              }, 1000 * (i + 1));
              n = n + parseInt(i);
       });

       n = n * 2 + "000"; // from each function
       // delay redirect so loop can finish
       setTimeout(function(){
            RedirectCustomerToCheckout();
       }, n );


  });

  // Proceed each item to Checkout API
  function ProceedItems(quantity, productid)
  {
      $("#iframe").attr("src","http://a.company.com/checkout/" + productid + "/" + quantity);
  }

  // when loop as finished :: take customer to checkout process.
  function RedirectCustomerToCheckout()
  {
       window.location.href = "http://a.company.com/checkout";
  } 

});

这种方法很有效，我很欣赏整个“如果它没有坏” - 但我一直都很焦虑，因为我认为必须有更好的方法。也许添加代码来检查 iframe 是否已完成加载/回发？

主要关注点是: - iframe 不加载(不生成任何反馈) - 页面在没有完成循环的情况下重定向用户(因为连接速度慢)？

在确保加载完成方面，使用带有回复成功/失败/完成检查的 Ajax POST/GET 函数是否更安全。

真的很喜欢一些建议。

Remote Address:10.0.0.100:800
Request URL:http://a.company.com/checkout/46026/1
Request Method:GET
Status Code:302 Found

GET /checkout/46026/1 HTTP/1.1
Host: a.company.com
Connection: keep-alive
Accept: */*
Origin: http://a.company.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
Referer: http://a.company.com
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

Answer 1

我假设您网站上的 iframe 是隐藏的，用户实际上看不到它。
为此，我绝对使用ajax 而不是使用iframe。

此示例将并行执行所有请求(在 chrome 中一次最多 6 个)，然后如果它们全部成功完成将调用 RedirectCustomerToCheckout，否则它将调用 onFailedCheckout 如果任何请求失败或超过默认的 ajax 超时。

您可以使用 $.ajax如果你想使用每个请求超时，而不是 $.get。

jQuery(function () {
    $('#proceed').on('click', function () {
        var checkouts = [];
        $(cartobject).each(function (item) {
            var q = item.get('qty');
            var p = item.get('productid');
            checkouts.push($.get('http://a.company.com/checkout/' + p + '/' + q));
        });
        // $.when will wait for all checkouts to complete
        $.when.apply($, checkouts)
           .done(RedirectCustomerToCheckout)
           .fail(function onFailedCheckout() {
                alert('stuff broke !');
           });
    });

    // when loop as finished :: take customer to checkout process.
    function RedirectCustomerToCheckout() {
        window.location.href = 'http://a.company.com/checkout';
    }
});