Có sự kiện cập nhật tiến trình nào trong jQuery ajax không?

Question

tôi có nhiệm vụ chạy dài được gọi là sử dụng jquery ajax. tôi đang sử dụng "tải" block ui plugin to show. là có anyway tôi có thể gửi tin nhắn tiến độ trở lại cho khách hàng để hiển thị tiến bộ và có cập nhật trên các thông báo plugin khối ui.

Vì vậy, nó sẽ hiển thị điều này (khi máy chủ hoạt động). .

"Đang tải nguồn đầu tiên..."
"Đang tải nguồn thứ hai..."
"Đang tải nguồn thứ ba..."
"Kết quả Parsing..."

Answer 1

Từ những gì tôi đã thấy trong trường hợp tải lên nội dung - mọi người tạo một cổng riêng và truy vấn nó để biết thông tin tiến trình vì nó chỉ có sẵn ở phía máy chủ. Nhưng tôi nghĩ đó không phải là điều tốt nhất trong trường hợp của bạn.

Nếu bạn muốn tải nội dung có thông tin tiến trình hoặc cho phép máy chủ bật thông tin khi tiến hành trong khi tạo đầu ra thì http streaming là những gì bạn muốn. Nó được bao phủ độc đáo here. Về cơ bản nó là một yêu cầu http duy nhất, mà máy chủ đáp ứng trong khối trong một phút hoặc lâu hơn (do đó gửi các công cụ khi nó muốn) và sau đó một kết nối mới được mở ra.

này khá một khám phá đối với tôi;)

[sửa]

Hiện nay có rất nhiều kỹ thuật tốt hơn sẵn, và tất cả chúng được bọc trong Socket.IO - Websockets với fallbacks để các kỹ thuật khác bao gồm http streaming

Socket.IO là một mô-đun cho nodeJS, nhưng có các triển khai khác và tương tự. Tôi đã trao đổi một số gói với việc triển khai JAVA Socket.IO từ https://github.com/Atmosphere/atmosphere

Answer 2

Tôi chỉ mới nhận thức được dự án thực hiện "đẩy" ajax. Bạn có thể muốn kiểm tra xem nó ra:

http://www.ape-project.org/

Theo như tôi biết có một vài dự án khác ngoài kia làm những điều tương tự, đây là chân thật nhất để: "gửi thông điệp tiến bộ lại cho khách hàng", nơi các giải pháp khác đòi hỏi một yêu cầu thăm dò ý kiến ​​cho tiến bộ (vẫn là một giải pháp rất hợp pháp và tốt).

Answer 3

tôi sẽ có mỗi yêu cầu AJAX trả về một phản ứng JSON chứa một tin nhắn, dữ liệu, và URL bên cạnh yêu cầu: {message: "Loading second resource...", data: ..., next_url: "/next_part"}

Trước khi yêu cầu AJAX đầu tiên của bạn, thiết lập các thông điệp BlockUI để "Loading ..." . Khi bạn nhận được phản hồi, hãy đặt thông báo BlockUI thành tin nhắn bạn nhận được từ cuộc gọi AJAX của mình. Sau đó thực hiện cuộc gọi AJAX tiếp theo với giá trị của "next_url", v.v., lặp lại cho đến khi bạn hoàn thành tất cả các tác vụ.

Nếu bạn đang tải một tập dữ liệu lớn, nhưng theo từng phần, bạn có thể muốn làm một cái gì đó như progressive loading design pattern, nhưng cũng đặt thông báo tiến trình khi bạn nhận được từng câu trả lời.

Answer 4

Một cách là sử dụng Trình xử lý HTTP và AJAX với jQuery.

1. Tiến hành Server side yêu cầu

$("#btnCreateInvoice").click(function() {    
     $.ajax({ type: "POST", url: "YourHttpHandler.ashx", 
     contentType: "text/html; charset=utf-8", 
     dataType: "html", 
     success: function(data) { start the block UI } 
     }); 
    }); 

2. Polling

gì tiếp theo bạn cần làm là để thăm dò ý kiến ​​các máy chủ tại khoảng 't' và nhận được trạng thái. Để làm được điều đó, chúng ta cần gọi hàm ở khoảng thời gian 't' sẽ bắt đầu một cuộc gọi AJAX tới một HTTPHandler để nhận trạng thái.

$(function() { 
    setInterval(updateStatus, 't'); 
}); 

function updateStatus() { 
    $.ajax({ type: "POST", url: "GetStatusHandler.ashx", 
     contentType: "text/html; charset=utf-8", 
     dataType: "html", 
     success: function(data) { process 'data' here and update the block UI message box } 
     }); 
} 

Trong trường hợp của bạn ở đây, GetStatusHandler.ashx có thể trả lại trạng thái bên trong hoàn chỉnh cho trạng thái. Đối với ví dụ trên là người đầu tiên gọi nó sẽ trở lại 'Đang tải nguồn đầu tiên ...', sau đó nó có thể quay trở lại: nguồn
loding Trước ...
tải nguồn thứ hai ...
và vân vân.

Answer 5

Những gì bạn đang cố gắng làm là một cái gì đó tương tự như Comet. Các máy chủ web truyền thống ("không sao chổi") không được thiết kế cho loại mô hình giao dịch này và do đó không phải là giải pháp mong muốn.

Đề nghị của tôi là để phá vỡ quá trình xử lý trong một yêu cầu khách hàng cho mỗi nguồn dữ liệu:

function loadData() { 
    // Each call passes callback(id) as a success handler 
    fireAsynchronousRequest("source1"); 
    fireAsynchronousRequest("source2"); 
    fireAsynchronousRequest("source3"); 
} 

function callback(var source) { 
    if (source == "source1") { 
     updateStatus("Source 1 loaded"); 
    } 
    else if (source == "source2") { 
     updateStatus("Source 2 loaded"); 
    } 
} 

Đây là một ví dụ về một giải pháp đồng bộ. Bạn có thể thực hiện xử lý trạng thái trong callback() nếu bạn cần nó để được đồng bộ.

Answer 6

Tôi cũng có một tình huống tương tự và tôi giải quyết nó bằng cách tiếp cận khác. Đó là một công việc rất xung quanh, tôi biết rằng vì vậy xin vui lòng không bắt đầu nói xấu như thế nào, vì tôi biết điều đó, nhưng nó là ok cho những gì tôi cần nó.

Tôi đang đặt tiến trình trong một tệp, ở phía máy chủ. Ví dụ, tôi có process.php được gọi là cần phải làm rất nhiều công việc và phải mất một thời gian cho đến khi nó hoàn thành, vì vậy người dùng đang lo lắng và đóng trình duyệt (không quá tốt). Vì vậy, process.php là tiết kiệm một số đầu ra cho một tập tin trên máy chủ. Trên trang được gọi là process.php Tôi có một div nhỏ, span, hoặc bất cứ điều gì mà tôi muốn hiển thị tiến độ, nhưng tôi đề nghị div. Mỗi x mili giây, hoặc giây, tôi tải một tập lệnh khác từ máy chủ trong div, giả sử display_info.php Bây giờ display_info.php đang đọc tệp được output.php xuất ra và nội dung được trao đổi trong div.

Bạn phải cẩn thận rằng đầu ra từ process.php phải là duy nhất cho mỗi dịp, nếu không bạn sẽ làm hỏng đầu ra thông tin cho trình duyệt.

Emil