快捷導(dǎo)航

基于jQuery制作迷你背詞匯工具

更新時(shí)間：2010年07月27日 23:13:21 作者：

jQuery提供的Load的函數(shù)可能可以說是實(shí)現(xiàn)ajax功能的最輕巧的方法。

今天我要介紹的是load()函數(shù)的一個(gè)實(shí)際運(yùn)用，希望你讀完以后會(huì)覺得它很簡單、而且很實(shí)用。下面是一個(gè)類似金山詞霸里背單詞的小工具，它和滾動(dòng)文字(圖片)的效果差不多，但是用到的是ajax功能，也就是涉及到服務(wù)器端的腳本的執(zhí)行。

首先我創(chuàng)建的一個(gè)文本文件包含有我要背誦的英文詞匯，然后是下面的PHP代碼，用來讀取詞匯，并且隨機(jī)返回一個(gè)詞匯。

復(fù)制代碼代碼如下:

 
<?php 
$buffer = array(); 
$handle = @fopen("toefl_listen.txt", "r"); 
if ($handle) { 
while (!feof($handle)) { 
array_push ($buffer, fgets($handle, 4096)); 
} 
fclose($handle); 
} 
echo $buffer[array_rand($buffer)]; 
?> 

最后是通過下面的Javascript腳本加上一點(diǎn)Ajax技術(shù)，調(diào)用服務(wù)器端的PHP代碼，并把返回結(jié)果在特定DIV里顯示。因?yàn)槭茄h(huán)播放，所以我用到了setInterval()函數(shù)。此外還使用clearInterval()函數(shù)，實(shí)現(xiàn)鼠標(biāo)滑過 - 暫定播放的功能。

復(fù)制代碼代碼如下:

 
<script> 
$(document).ready(function() 
{ 
//沒隔3秒調(diào)用服務(wù)器端的php文件 
var refreshId = setInterval(function() 
{ 
$('#timeval').load('reflesh.php'); 
}, 3000); 
//鼠標(biāo)滑過 - 暫停播放 
$("#timeval").mouseover(function() 
{ 
clearInterval(refreshId); 
}); 
$("#timeval").mouseout(function(){ 
refreshId = setInterval(function() 
{ 
$('#timeval').load('reflesh.php'); 
}, 3000); 
}); 
}); 
</script> 

我覺得上面介紹的間隔一定時(shí)間調(diào)用服務(wù)器的代碼，其擴(kuò)展性還是挺大的。我這里只是使用它來讀取一個(gè)簡單的文本文件，你還可以用它來調(diào)用數(shù)據(jù)庫，來實(shí)現(xiàn)對某個(gè)數(shù)據(jù)的實(shí)時(shí)更新。