Bagaimana Situs Web Berita Misalnya, Forbes / Zdnet Dengan Mudah Menggabungkan Satu Halaman Web ke Yang Lain?

Jika Anda pergi ke Mis:

Ketika Anda sampai di bagian bawah Halaman, sebuah berita Baru memuat dan URL di Browser Internet saya berubah menjadi URL dari Berita Selanjutnya ini. Jadi saya bertanya-tanya bagaimana sebuah halaman web hampir dapat secara instan memuat halaman web berikutnya dengan penundaan antar halaman yang hampir dapat diabaikan. Apakah mereka misalnya Pra-unduh Webpage dari berita Next News, dan kemudian memuat halaman web dengan sangat cepat?

javascript web-development web-applications html websites zordman
sumber

Tekan dan tahan Endtombol dan Anda akan melihat penundaan proses pemuatan.

MonkeyZeus

Pertanyaan yang lebih penting adalah mengapa mereka melakukannya.

Jawaban:

Jawaban singkatnya adalah bahwa kode Javascript sisi-klien halaman mendeteksi ketika Anda "terlalu dekat" ke bagian bawah halaman, dan meminta server untuk lebih banyak data ketika itu terjadi.

Tanpa terlalu teknis, mereka tidak memuat ulang seluruh halaman web. Alih-alih kode Javascript pada halaman itu meminta lebih banyak data dari server, maka ketika menerima data baru, itu menambahkan data ke halaman saat ini. Bagian halaman yang tidak perlu diubah tetap sama sekali tidak berubah.

Cara paling modern untuk melakukan ini adalah dengan menggunakan fitur modifikasi sejarah HTML5 , yang tampaknya menjadi apa yang digunakan situs-situs tersebut.

Ixrec
sumber

Deskripsi Anda tidak memiliki langkah: di mana mereka benar-benar mengubah sejarah, bersama dengan menambahkan lebih banyak data ke halaman. Yang membuat "cara paling modern Anda melakukan ini " agak canggung, karena ini mengacu pada proses memodifikasi sejarah, yang sebenarnya tidak disebutkan dalam jawaban. (Secara tata bahasa, ini merujuk pada membiarkan sisa halaman tidak berubah, atau mungkin menambahkan data ke halaman, yang biasanya dilakukan dengan AJAX, dan tidak dapat dilakukan dengan fitur modifikasi sejarah HTML5.)

KRyan

Jadi bagaimana dengan perubahan URL, bagaimana hal itu terjadi tanpa memaksa memuat ulang? Karena pada tautan Anda, jika Anda memuat ulang 'halaman yang dimodifikasi' (mis. /second), Itu salah. Itu tidak terjadi dengan situs berita OP - mereka mengubah URL dengan tepat sehingga Anda dapat membagikannya.

OJFord

@OllieFord untuk itulah gunanya sejarah API. history.pushStatedan history.replaceStatemembiarkan Anda mengubah URL di bilah alamat tanpa bernavigasi menjauh dari halaman saat ini. Ini adalah penggantian yang lebih modern dari trik lama untuk mengubah fragmen URL ( #something), dengan keuntungan besar adalah bahwa API riwayat memungkinkan Anda mendorong URL "nyata" yang dapat diikutsertakan oleh server, sementara hal fragmen tersebut harus didukung sepenuhnya dari sisi klien.

hobbs

Ah baiklah. Tapi seperti yang saya katakan, demo rusak, yang membingungkan.

OJFord

Entah mengapa demo riwayat yang saya kenal benar-benar rusak ketika pertanyaan ini muncul, jadi tautan itu adalah yang pertama yang saya temukan yang tampaknya berfungsi sama sekali. Jangan ragu untuk menyarankan tautan yang lebih baik.

Ixrec

Satu kunci besar untuk memahami apa yang terjadi: Adalah mungkin, melalui Javascript, untuk mengatur URL di addressbar tanpa benar-benar mengarahkan pengguna. Untuk melihat ini dalam tindakan, rekatkan kode di bawah ini ke konsol browser yang didukung. Perhatikan bahwa itu mengubah bilah alamat Anda menjadi http://programmers.stackexchange.com/yay.html.

history.pushState(null,null,'/yay.html')

Manfaat dari pendekatan ini adalah jika bookmark pengguna setelah bergulir ke sebuah cerita, bookmark akan tahu ke mana harus mengirim pengguna. Pengguliran tak terbatas hasil pencarian DeviantArt adalah contoh yang bagus dari perilaku ini.

Brian
sumber

Tunggu, DeviantArt telah menerapkan modifikasi riwayat dalam hasil pencariannya, jadi Anda benar-benar dapat menautkan ke / bookmark / merekam halaman tertentu? Itu ... sesuatu yang cukup. Berapa lama hasil tertentu tetap pada halaman tertentu untuk permintaan tertentu? Jika Anda membookmark, saya tidak akan mengharapkan untuk melihat hasil yang sama pada halaman tertentu besok ... Saya harus ingat untuk menyelidiki ini.

KRyan

@ KRyan itu hanya memodifikasi offsetparam yang melompati jarak tertentu ke dalam resultset. Karena urutan pengurutan default tampaknya menjadi "populer sepanjang masa", hasilnya mungkin agak stabil, tetapi jelas tidak jika Anda mengalihkan urutan pengurutan ke "terbaru" dan mencari sesuatu yang populer.

hobbs