Phát hiện sự cố JSONP
Nếu bạn không muốn tải xuống phần phụ thuộc, bạn có thể tự phát hiện trạng thái lỗi. Dễ thôi.
Bạn sẽ chỉ có thể phát hiện lỗi JSONP bằng cách sử dụng một số loại thời gian chờ. Nếu không có phản hồi hợp lệ trong một thời gian nhất định, thì giả sử có lỗi. Tuy nhiên, lỗi về cơ bản có thể là bất cứ điều gì.
Đây là một cách đơn giản để kiểm tra lỗi. Chỉ cần sử dụng một successlá cờ:
var success = false;
$.getJSON(url, function(json) {
success = true;
});
setTimeout(function() {
if (!success)
{
alert("Houston, we have a problem.");
}
}, 5000);
Như thedawnrider đã đề cập trong nhận xét, bạn cũng có thể sử dụng clearTimeout để thay thế:
var errorTimeout = setTimeout(function() {
if (!success)
{
alert("Houston, we have a problem.");
}
}, 5000);
$.getJSON(url, function(json) {
clearTimeout(errorTimeout);
});
Tại sao? Đọc tiếp ...
Tóm lại, đây là cách JSONP hoạt động:
JSONP không sử dụng XMLHttpRequest như các yêu cầu AJAX thông thường. Thay vào đó, nó đưa một <script>thẻ vào trang, trong đó thuộc tính "src" là URL của yêu cầu. Nội dung của phản hồi được bao bọc trong một hàm Javascript, sau đó sẽ được thực thi khi tải xuống.
Ví dụ.
Yêu cầu JSONP: https://api.site.com/endpoint?this=that&callback=myFunc
Javascript sẽ đưa thẻ script này vào DOM:
<script src="https://api.site.com/endpoint?this=that&callback=myFunc"></script>
Điều gì xảy ra khi <script> thẻ được thêm vào DOM? Rõ ràng, nó được thực thi.
Vì vậy, giả sử phản hồi cho truy vấn này mang lại kết quả JSON như:
{"answer":42}
Đối với trình duyệt, đó là thứ giống như nguồn của tập lệnh, vì vậy nó được thực thi. Nhưng điều gì sẽ xảy ra khi bạn thực hiện điều này:
<script>{"answer":42}</script>
Cũng không có gì. Nó chỉ là một đối tượng. Nó không được lưu trữ, lưu trữ và không có gì xảy ra.
Đây là lý do tại sao các yêu cầu JSONP gói kết quả của chúng trong một hàm. Máy chủ, phải hỗ trợ tuần tự hóa JSONP, nhìn thấy callbacktham số bạn đã chỉ định và trả về thông số này thay thế:
myFunc({"answer":42})
Sau đó, điều này được thực thi thay thế:
<script>myFunc({"answer":42})</script>
... hữu ích hơn nhiều. Ở đâu đó trong mã của bạn, trong trường hợp này, một hàm toàn cục được gọi là myFunc:
myFunc(data)
{
alert("The answer to life, the universe, and everything is: " + data.answer);
}
Đó là nó. Đó là "điều kỳ diệu" của JSONP. Sau đó, để xây dựng trong một kiểm tra thời gian chờ rất đơn giản, như được hiển thị ở trên. Thực hiện yêu cầu và ngay sau đó, bắt đầu thời gian chờ. Sau X giây, nếu cờ của bạn vẫn chưa được đặt thì yêu cầu đã hết thời gian chờ.