Lỗi Ajax với JQuery trên iPad

Question

Chúng tôi gặp sự cố trong một trong các ứng dụng web sản xuất của chúng tôi, nhưng chỉ trên iPad/iOS8.

Về cơ bản, trong ứng dụng của chúng tôi, người dùng đang thêm sản phẩm vào giỏ hàng của mình, bằng cách nhấn vào hình ảnh đại diện cho các sản phẩm khác nhau. Khi một hình ảnh được khai thác, sản phẩm được "chọn" và một cuộc gọi không đồng bộ ajax được thực hiện; cuộc gọi này cập nhật giỏ hàng của chúng tôi. Mỗi cuộc gọi không đồng bộ kéo dài khoảng 5-10 giây.

Sự cố xảy ra (nhưng chỉ trên iPad, không phải trên máy tính để bàn Chrome, v.v.) khi người dùng nhấp nhiều lần theo thứ tự. Sau đó, cuộc gọi ajax thứ n thất bại với "lỗi 0". Lưu ý: chúng tôi không thể chặn cuộc gọi ajax thứ hai khi cuộc gọi đã được thực hiện (vì một số câu trả lời sẽ đề xuất), vì giỏ hàng sẽ không được cập nhật đúng cách.

Tôi đã theo dõi xuống hành vi này trong một ví dụ jsFiddle bạn có thể tìm thấy ở đây:

http://jsfiddle.net/oc1ktv6u/30/

function updateCart() 
{ 
var data = { 
     json: $.toJSON({ 
      text: 'some text', 
      array: [1, 2, 'three'], 
      object: { 
       par1: 'another text', 
       par2: [3, 2, 'one'], 
       par3: {} 
      } 
     }), 
     delay: Math.round(Math.random()*12) 
} 

$.ajax({ 
    url:"/echo/json/", 
    data:data, 
    type:"POST", 
    success:function(response) 
    { 
     $(".target").append("+"); 
    }, 
    error:function(xhr, ajaxOptions, thrownError) 
    { 
     alert("There was an error in the ajax call: ["+xhr.status+"] ["+thrownError+"]"); 
    } 
}); 

} 

câu hỏi chính của tôi là:

• Tại sao điều này xảy ra (và tại sao , rõ ràng, chỉ trên iPad/Safari)?

Answer 1

1. khối các nhấp chuột khi ajax đang hoạt động
2. sử dụng preventDefault không theo liên kết

Please click <a href="#" id="aia">here</a> many times on iPad/Safari. 
    <div class='target'> 
     Result: 
    </div> 

$(function() { 
    var active = false; 
    $("#aia").on("click",function(e) { 
    e.preventDefault(); 
    if (active) return; 
    active=true; 
    var data = { 
     json: $.toJSON({ 
     text: 'some text', 
     array: [1, 2, 'three'], 
     object: { 
      par1: 'another text', 
      par2: [3, 2, 'one'], 
      par3: {} 
     } 
     }), 
     delay: Math.round(Math.random()*12) 
    } 

    $.ajax({ 
    url:"/echo/json/", 
    data:data, 
    type:"POST", 
    success:function(response) { 
     $(".target").append("+"); 
     active=false; 
    }, 
    error:function(xhr, ajaxOptions, thrownError) { 
     alert("There was an error in the ajax call: ["+xhr.status+"] ["+thrownError+"]"); 
    } 
    }); 
}); 

Answer 2

Bạn có thể muốn thử điều này:

var xhr = null; 

function aia(){ 
    if (xhr == null) 
     xhr = $.ajax({ 
      //... 
      success: function(data){ 
       xhr = null; 
      } 
      //... 
     }); 
} 

Answer 3

Như câu trả lời khác đã đề cập, bạn nên có một hàng đợi để xử lý các yêu cầu và chắc chắn rằng họ đang được xử lý theo thứ tự chúng được tạo ra:

var active = false; 
var requests = []; 

var updateCart = function (data) { 
if(active) { 
    requests.push(data); 
} else { 
    $.ajax({ 
     type: 'POST', 
     url: url, 
     data: data, 
     beforeSend: function() { 
      active = true; 
      //show loading on the cart symbol or something to tell the user there is a process going on, UX goodness 
     }, 
     success : function() { 
      active = false; 
      if(requests.length > 0) { 
       next = requests.shift(); 
       updateCart(next); 
      } 
     } 
    }); 
}; 

Trang web này dường như đưa ra một số cái nhìn sâu sắc vào số lượng kết nối hiện hoạt có sẵn cùng một lúc và bạn có thể thử nghiệm trên iPad của mình http://www.browserscope.org/?category=network

Tôi tự chạy nó và đề cập đến 17 kết nối tối đa, nhưng tôi cũng tò mò về mạng bạn đang sử dụng iPad, nếu nó chậm hơn, nói trên 3G hoặc Edge, hơn những kết nối này có thể sao lưu khá nhanh . Tôi đã thử nghiệm iPad của tôi trên Wifi và không thể tái tạo lỗi của bạn trên Fiddle. Hy vọng rằng điều này giúp ít nhất là chẩn đoán vấn đề.

Answer 4

Làm việc với các phiên bản mới nhất của jquery trong fiddle sau: http://jsfiddle.net/oc1ktv6u/41/

HTML

<body> 
    Please click <a href="#" id="js">here</a> many times on iPad/Safari. 
    <div class='target'> 
     Result: 
    </div> 
    <br /> 
     <div id='log'> 
    </div> 
</body> 

JAVASCRIPT

var i=0; 
$('#js').on('touchstart click',function() { 
      var data = { 
      text: 'some text', 
      array: [1, 2, 'three'], 
      object: { 
       par1: 'another text', 
       par2: [3, 2, 'one'], 
       par3: {} 
      } 
     } 
var jsondata = JSON.stringify(data);   
var request = $.ajax({ 
url:"/echo/json/", 
type: "POST", 
data: jsondata, 
dataType: "json" 
}); 
request.done(function(msg) { 
$(".target").append("+"); 
    i++; 
$("#log").html('clicked '+ i + 'times'); 
}); 
request.fail(function(jqXHR, textStatus) { 
alert("Request failed: " + textStatus); 
}); 
});