Презареждане без рефреш с ajax
09-10-2009
С този пример ще се опитам максимално ясно да обясня как може да се извлича информация от
текстов файл или база данни и да се показва в 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



/ Трябва да сте регистриран за да напишете коментар /
От: Insident
12:57 09-10-2009
Браво админе..
От: lam3r4370
13:05 09-10-2009
Супер.Точно това ми трябваше :)
От: DevNull
0:29 10-10-2009
Много полезен урок.
От: Liberate
9:02 10-10-2009
БРАВО АДМИН!!!
От: diva4et0o0
10:25 10-10-2009
Точно това ми трябшаше мерси
От: kitchenbg
14:42 10-10-2009
екстра
От: kWo
14:52 27-11-2009
трафик много прави ли ?
От: MaLa_NocHe
22:28 04-02-2010
Защо при мозила, резултата който трябва да излезе без рефреш не го изкарва? При Опера и Chrome е идеално но при мозила се мъчи..
От: split
16:02 06-03-2010
admin, от къде се променя периода през който чеква или става на секундата ?
От: ExpressYourself
19:44 20-06-2010
@split - от тука - var waittime=800;
От: zSix
14:50 10-09-2010
А как да направя енкодинга на windows-1251 в JS кода?

Направих и load.php - УТФ-8, но не работи. По точно при ИЕ не става.
1