web-touristПрезареждане без рефреш с ajax
Автор: admin
С този пример ще се опитам максимално ясно да обясня как може да се извлича информация от
текстов файл или база данни и да се показва в web страницата без да се налага рефреш.
Кода е супер кратък и ясен.
Файловете са два .
index.php и load.php
load.php може да съдържа текст или html.
Добавил съм и пример (rar файл) най-долу за същия скрипт но работещ с база данни. Показва последните теми от форум.
Промените във файла load.php ще се отразяват в index.php без рефреш.
Може просто да променяте съдържанието на load.php и да следите как се отразява това в
index.php.
Скрипта index.php проверява през определен период от време (var waittime=800; ) файла load.php.
С числото регулирате колко често да проверява за промени.
$text е текста (или html код), който ще се появява при първоначалното зареждане на страницата.
<?
//този текст се зарежда при първоначалното стартиране на страницата
$text="test";
?>
<html>
<head>
<title>Ajax</title>
</head>
<body>
<img src="http://web-tourist.net/forum/templates/Maxmedia/images/php.png" alt="" />
<div id="loadmsg" onkeyup="keyup(event.keyCode);">
<div id="loadwindow" onkeyup="keyup(event.keyCode);">
</div>
</div>
Това е текст, който не се променя!
<script>
var waittime=800;
loadmsg.focus()
document.getElementById("loadwindow").innerHTML = "<? echo $text; ?>";
var xmlhttp = false;
var xmlhttp2 = false;
function ajax_read(url) {
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType('text/xml');
}
} else if(window.ActiveXObject){
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch(e){
}
}
}
if(!xmlhttp) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4) {
document.getElementById("loadwindow").innerHTML = xmlhttp.responseText;
zeit = new Date();
ms = (zeit.getHours() * 24 * 60 * 1000) + (zeit.getMinutes() * 60 * 1000) + (zeit.getSeconds() * 1000) + zeit.getMilliseconds();
intUpdate = setTimeout("ajax_read('load.php?x=" + ms + "')", waittime)
}
}
xmlhttp.open('GET',url,true);
xmlhttp.send(null);
}
/* Request for Writing the Message */
function ajax_write(url){
if(window.XMLHttpRequest){
xmlhttp2=new XMLHttpRequest();
if(xmlhttp2.overrideMimeType){
xmlhttp2.overrideMimeType('text/xml');
}
} else if(window.ActiveXObject){
try{
xmlhttp2=new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try{
xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
} catch(e){
}
}
}
if(!xmlhttp2) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
xmlhttp2.open('GET',url,true);
xmlhttp2.send(null);
}
/* Submit the Message */
function submit_msg(){
nick = document.getElementById("loadnick").value;
msg = document.getElementById("loadmsg").value;
if (nick == "") {
check = prompt("please enter username:");
if (check === null) return 0;
if (check == "") check = "anonymous";
document.getElementById("loadnick").value = check;
nick = check;
}
document.getElementById("loadmsg").value = "";
ajax_write("w.php?m=" + msg + "&n=" + nick);
}
/* Check if Enter is pressed */
function keyup(arg1) {
if (arg1 == 13) submit_msg();
}
/* Start the Requests! ;) */
var intUpdate = setTimeout("ajax_read('load.php')", waittime);
</script>
</body>
</html>От тук може да изтеглите файловете за да тествате:
Ajax_refresh
Изтеглете и скриптовете за последни мнения от phpbb2 форум, който ползва същия код.
Ajax_last_topics_phpbb2
ако имате проблеми с енкодинга ще трябва файла load.php да го направите UTF 8.
При други проблеми или въпроси може да пишете тук или във форума.
Кода е преработена малка част от един чат, който може да разгледате тук:
http://www.linuxuser.at/chat/index.html
