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 () {
return 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 (NewLine) ؛
استبدل هذا الرمز بتنبيه ("الوصول إلى القاع") ؛ ويمكنك أن ترى أنه عندما يتم تمرير شريط التمرير إلى الأسفل ، سيتم إضافة سطر "عنصر جديد" في أسفل الصفحة. تمرير مختلف لأسفل ، وزيادة بشكل مستمر ، إلى ما لا نهاية.
5. قم بتعديل رمز العينة إلى الكود المتعلق بـ AJAX:
نسخة الكود كما يلي:
<script>
window.onscroll = function () {
إذا (getScrollTop () + getClientheight () == getScrollheight ()) {
var xmlhttpreq = null ؛
// IE Browser يستخدم ActiveX
if (window.activexobject) {
XMLHTTPREQ = جديد ActiveXObject ("Microsoft.xmlhttp") ؛
}
// تستخدم المتصفحات الأخرى كائن طفل النافذة XMLHTTPREQUEST
آخر إذا (window.xmlHttprequest) {
xmlhttpreq = new xmlhttprequest () ؛
}
if (xmlhttpreq! = null) {
// قم بتعيين الطلب (غير مفتوح حقًا) ، صحيح: يعني عدم التزامن
xmlhttpreq.open ("get" ، "/ajaxtest" ، true) ؛
// قم بتعيين رد الاتصال ، عندما تتغير الحالة المطلوبة ، سيتم استدعاؤها ، تمرير المعلمة 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 (NewLine) ؛
}
</script>
عندما يصل شريط التمرير إلى أسفل الصفحة ، ستتم إضافة العقد التالية ، على النحو التالي:
2 200
3 200 AJAX OK
4 200 AJAX OK
هنا 2 و 3 و 4 هي الحالة المطلوبة ReadyState ، 200 هي حالة استجابة HTTP ، Ajax OK هو النص الذي تم إرجاعه بواسطة تطبيق /ajaxtext. للحصول على التفاصيل ، يرجى التحقق من المواد المرجعية التالية.
وفقًا لتعليمات التوثيق الخاصة بـ XMLHTTPrequest ، يجب أن تكون قادرًا على الطباعة:
0 200
1 200
2 200
3 200 AJAX OK
4 200 AJAX OK
لكنني لم أطبع الحالتين من 0 و 1. لماذا هذا؟ هل من المناسب أن يصنع المارة؟