1. ลงทะเบียนเหตุการณ์การเลื่อนหน้า, window.onscroll = function () {};
2. ฟังก์ชั่นที่เกี่ยวข้องเพื่อให้ได้ความสูงของหน้าตำแหน่งแถบเลื่อนและความสูงของเอกสาร:
การคัดลอกรหัสมีดังนี้:
// รับตำแหน่งปัจจุบันของแถบเลื่อน
ฟังก์ชั่น getScrolltop () {
var scrolltop = 0;
if (document.documentElement && document.documentelement.scrolltop) {
scrolltop = document.documentelement.scrolltop;
-
อื่นถ้า (document.body) {
scrolltop = document.body.scrolltop;
-
กลับ scrolltop;
-
// รับความสูงช่วงปัจจุบัน
ฟังก์ชั่น getClientHeight () {
var clientHeight = 0;
if (document.body.clientheight && document.documentelement.clientheight) {
clientHeight = math.min (document.body.clientheight, document.documentelement.clientheight);
-
อื่น {
clientHeight = math.max (document.body.clientheight, document.documentelement.clientheight);
-
ส่งคืนไคลเอ็นต์
-
// รับความสูงเต็มของเอกสาร
ฟังก์ชั่น getScrollheight () {
ส่งคืน math.max (document.body.scrollheight, document.documentelement.scrollheight);
-
3. เพิ่มรหัสที่ด้านล่างของหน้า HTML:
การคัดลอกรหัสมีดังนี้:
<script>
window.onscroll = function () {
ถ้า (getScrolltop () + getClientHeight () == getScrollheight ()) {
การแจ้งเตือน ("ไปถึงด้านล่าง");
-
-
</script>
สิ่งนี้จะทำให้เกิดการแจ้งเตือน ("ไปถึงด้านล่าง") เมื่อแถบเลื่อนถึงด้านล่างของหน้า สิ่งที่คุณต้องทำต่อไปคือการเปลี่ยนฟังก์ชั่นทริกเกอร์เป็นการโทร AJAX และเพิ่มเนื้อหาลงในหน้าแบบไดนามิก
4. ตัวอย่างรหัสสำหรับการเพิ่มองค์ประกอบหน้าแบบไดนามิก:
การคัดลอกรหัสมีดังนี้:
var newNode = document.createElement ("A");
newNode.setAttribute ("href", "#");
newNode.innerhtml = "รายการใหม่";
document.body.appendchild (Newnode);
var newLine = document.createElement ("br");
document.body.appendchild (ใหม่);
แทนที่รหัสนี้ด้วยการแจ้งเตือน ("ไปถึงด้านล่าง"); และคุณจะเห็นว่าเมื่อแถบเลื่อนเลื่อนไปที่ด้านล่างจะมีการเพิ่ม "รายการใหม่" บรรทัดที่ด้านล่างของหน้า การเลื่อนที่แตกต่างกันเพิ่มขึ้นอย่างต่อเนื่องไม่รู้จบ
5. แก้ไขรหัสตัวอย่างเป็นรหัสที่เกี่ยวข้องกับ AJAX:
การคัดลอกรหัสมีดังนี้:
<script>
window.onscroll = function () {
ถ้า (getScrolltop () + getClientHeight () == getScrollheight ()) {
var xmlhttpreq = null;
// IE เบราว์เซอร์ใช้ ActiveX
if (window.activexobject) {
xmlhttpreq = new ActiveXObject ("microsoft.xmlhttp");
-
// เบราว์เซอร์อื่นใช้วัตถุลูกของหน้าต่าง xmlhttprequest
อื่นถ้า (window.xmlhttprequest) {
xmlhttpreq = ใหม่ xmlhttprequest ();
-
if (xmlhttpreq! = null) {
// ตั้งค่าคำขอ (ไม่เปิดจริง ๆ ) จริง: หมายถึงแบบอะซิงโครนัส
xmlhttpreq.open ("รับ", "/ajaxtest", จริง);
// ตั้งค่าการโทรกลับเมื่อสถานะที่ร้องขอการเปลี่ยนแปลงจะถูกเรียกผ่านพารามิเตอร์ xmlhttpreq
Xmlhttpreq.onreadyStateChange = function () {onajaxtest (xmlhttpreq); -
// ส่งคำขอ
xmlhttpreq.send (null);
-
-
-
ฟังก์ชั่น 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 (ใหม่);
-
</script>
เมื่อแถบเลื่อนมาถึงด้านล่างของหน้าจะเพิ่มโหนดต่อไปนี้ดังต่อไปนี้:
2 200
3 200 AJAX ตกลง
4 200 AJAX ตกลง
ที่นี่ 2, 3 และ 4 เป็นสถานะ ReadeState ที่ร้องขอ, 200 คือสถานะการตอบกลับของ HTTP, Ajax OK เป็นข้อความที่ส่งคืนโดยแอปพลิเคชัน /ajaxtext สำหรับรายละเอียดโปรดตรวจสอบเอกสารอ้างอิงต่อไปนี้
ตามคำแนะนำเอกสารของ XMLHTTPREQUEST คุณควรพิมพ์ออกมา:
0 200
1 200
2 200
3 200 AJAX ตกลง
4 200 AJAX ตกลง
แต่ฉันไม่ได้พิมพ์สองสถานะของ 0 และ 1 ทำไมถึงเป็นเช่นนี้? มันสะดวกหรือไม่สำหรับผู้คนที่จะส่งเสียงดังเอี๊ยด?