javascript - Mengakses respons parsial menggunakan AJAX atau WebSockets?

Saya menggunakan beberapa kode JavaScript sisi klien untuk mengambil banyak data JSON dari server web melalui HTTP GET. Jumlah data bisa besar, katakanlah 50 MB. Ini di LAN jadi tidak terlalu menjadi masalah, tetapi masih memakan waktu sekitar sepuluh detik.

Untuk membuat antarmuka saya lebih responsif, saya ingin memproses respons dalam potongan-potongan, menampilkan data di UI segera setelah tersedia (misalnya, per MB atau per detik). Kompatibilitas browser bukan masalah; selama bekerja di Chrome dan Firefox versi terbaru, itu akan baik-baik saja. Namun, saya tidak dapat memodifikasi kode server.

Apakah mungkin melakukan ini, menggunakan XMLHttpRequest atau WebSockets atau beberapa teknologi lain yang belum pernah saya dengar?

XMLHttpRequest.responseText tidak secara eksplisit kosong sementara statusnya LOADING:

Atribut responseText harus mengembalikan hasil dari menjalankan langkah-langkah ini:

  1. Jika status tidak LOADING atau DONE, kembalikan string kosong dan hentikan langkah-langkah ini.
  2. Kembalikan isi badan entitas respons teks.

Tapi saya kira buffering akan terjadi pada berbagai tahap sepanjang jalan, jadi apakah akan berhasil jika saya mengatur timer untuk secara berkala memeriksa responseText?

Sejauh yang saya tahu, WebSocket juga memerlukan protokol khusus di sisi server, jadi itu tidak bisa digunakan.

Pembatasan: Saya tidak dapat memodifikasi kode server.

Jawaban #1

Ingin memposting ini sebagai komentar tetapi area teks komentar agak terbatas

Apakah server mengirim data secara bertahap saat ini atau dalam aliran tunggal yang terus-menerus? Jika Anda menambahkan handler ke xmlHttpRequestInstance.onreadystatechange, seberapa sering handler itu dipicu? Jika xmlHttpRequestInstance.readystate memiliki nilai 3, maka Anda bisa mendapatkan nilai saat ini dari xmlHttpRequestInstance.responseText dan melacak panjangnya. Kali berikutnya readystate berubah, Anda dapat mendapatkan data terbaru dengan mengambil semua data baru mulai dari titik itu.

Saya belum menguji yang berikut ini tetapi semoga cukup jelas:

var xhr = new XMLHttpRequest();
var lastPos = 0;
xhr.onreadystatechange = function() {
  if(xhr.readystate === 3) {
    var data = xhr.responseText.substring(lastPos);
    lastPos = xhr.responseText.length;

    process(data);
  } 
};
// then of course do `open` and `send` :)

Ini tentu bergantung pada pemicuan event onreadystatechange. Ini akan bekerja di IE, Chrome, Safari, dan Firefox.