1. Daftarkan acara gulir halaman, window.onscroll = function () {};
2. Fungsi terkait untuk mendapatkan tinggi halaman, posisi batang gulir, dan tinggi dokumen:
Salinan kode adalah sebagai berikut:
// Dapatkan posisi scrollbar saat ini
fungsi getscrolltop () {
var scrolltop = 0;
if (document.documentelement && document.documentelement.scrolltop) {
scrolltop = document.documentelement.scrolltop;
}
lain if (document.body) {
scrolltop = document.body.scrolltop;
}
mengembalikan scrolltop;
}
// Dapatkan tinggi kisaran saat ini
fungsi getClientHeight () {
var clientHeight = 0;
if (document.body.clientheight && document.documentelement.clientHeight) {
clientHeight = math.min (document.body.clientHeight, document.documentelement.clientHeight);
}
kalau tidak {
clientHeight = math.max (document.body.clientHeight, document.documentelement.clientHeight);
}
kembalikan klienheight;
}
// Dapatkan ketinggian penuh dokumen
fungsi getScrollHeight () {
return math.max (document.body.scrollheight, document.documentelement.scrollheight);
}
3. Tambahkan kode di bagian bawah halaman HTML:
Salinan kode adalah sebagai berikut:
<script>
window.onscroll = function () {
if (getScrollTop () + getClientHeight () == getScrollHeight ()) {
waspada ("mencapai bagian bawah");
}
}
</script>
Ini akan memicu peringatan ("mencapai bagian bawah") ketika bilah gulir mencapai bagian bawah halaman. Yang perlu Anda lakukan selanjutnya adalah mengubah fungsi yang dipicu ke panggilan AJAX dan secara dinamis menambahkan konten ke halaman.
4. Contoh kode untuk menambahkan elemen halaman secara dinamis:
Salinan kode adalah sebagai berikut:
var newNode = document.createElement ("a");
newnode.setAttribute ("href", "#");
newnode.innerHtml = "item baru";
Document.Body.AppendChild (NewNode);
var newline = document.createElement ("br");
document.body.appendchild (newline);
Ganti kode ini dengan peringatan ("Jangkau bagian bawah"); Dan Anda dapat melihat bahwa ketika scrollbar menggulir ke bawah, garis "item baru" akan ditambahkan di bagian bawah halaman. Berbagai gulungan ke bawah, meningkat terus menerus, tanpa henti.
5. Ubah Kode Sampel ke Kode Terkait AJAX:
Salinan kode adalah sebagai berikut:
<script>
window.onscroll = function () {
if (getScrollTop () + getClientHeight () == getScrollHeight ()) {
var xmlhttpreq = null;
// IE Browser menggunakan ActiveX
if (window.activexObject) {
xmlhttpreq = new ActivexObject ("microsoft.xmlhttp");
}
// browser lain menggunakan objek anak Window XMLHTTPREQUEST
lain if (window.xmlHttpRequest) {
xmlhttpreq = new xmlHttpRequest ();
}
if (xmlhttpreq! = null) {
// Atur permintaan (tidak benar -benar dibuka), benar: berarti asinkron
xmlhttpreq.open ("get", "/ajaxtest", true);
// Atur panggilan balik, saat keadaan yang diminta berubah, itu akan dipanggil, melewati parameter xmlhttpreq
xmlhttpreq.onreadystatechange = function () {onAjaxtest (xmlhttpreq); };
// Kirimkan permintaan
xmlhttpreq.send (null);
}
}
}
fungsi onAjaxtest (req) {
var newNode = document.createElement ("a");
newnode.setAttribute ("href", "#");
newnode.innerHtml = req.readystate + "" + req.status + "" + req.responsetext;
Document.Body.AppendChild (NewNode);
var newline = document.createElement ("br");
document.body.appendchild (newline);
}
</script>
Ketika bilah gulir mencapai bagian bawah halaman, node berikut akan ditambahkan, sebagai berikut:
2 200
3 200 Ajax ok
4 200 AJAX OK
Di sini 2, 3, dan 4 adalah state readyState yang diminta, 200 adalah status respons HTTP, Ajax OK adalah teks yang dikembalikan oleh aplikasi /Ajaxtext. Untuk detailnya, silakan periksa materi referensi berikut.
Menurut instruksi dokumentasi XmlHttpRequest, Anda harus dapat mencetak:
0 200
1 200
2 200
3 200 Ajax ok
4 200 AJAX OK
Tapi saya tidak mencetak dua negara bagian 0 dan 1. Mengapa ini? Apakah nyaman bagi orang yang lewat untuk membuat cicit?