关于y向下滚动加载动态内容

Question

function yHandler(){ 
var wrap = document.getElementById('wrap'); 
var contentHeight = wrap.offsetHeight; 
var yOffset = window.pageYOffset; 
var y = yOffset + window.innerHeight; 
if(y >= contentHeight){ 
wrap.innerHTML += '<div class="newData"></div>'; 
} 
} 


div#wrap{width:800px; margin:0px auto;}
div.newData{height:50px; background:#09F; margin:10px 0px;}

这些是我的div，目前在y向下滚动它加载了这些浅蓝色条，但我希望加载我的对话，而不是这些浅蓝色条，我如何调用我的对话

这是我的y处理程序。当页面到达底部时，我想让它从我的数据库中加载对话，我该怎么做呢？

Answer 1

使用AJAX (我喜欢在PHP中使用它，但您也可以使用其他服务器端语言回传响应)。其中你有wrap.innerHTML += "";...使用AJAX从服务器端页面获得您想要的结果。

Brett在IBMs网站上写了一些很棒的文档，你可以通过谷歌搜索"mastering ajax site:ibm.com filetype:pdf“找到它，不加引号……

另外，如果您对jQuery感兴趣，可以看看$.ajax、$.post或$.get函数。

基本上，使用jQuery，您可以调用：

$.post(
     'serversidepage.php',
     attrs, //being an array filled with variables you want to use on the server
     function(data){
        wrap.innerHTML += data;
        //or data.html if you decide to use JSON / XML to pass back your data
     }
);

然后在您的服务器上，创建文件'serversidepage.php'，并使用$_POST变量来确定通过attrs JS变量发送的内容，并回显您希望返回到post命令的内容。一旦它返回，它将调用$.post中的函数，该函数将在您的包装元素中设置回显数据。