Kiedy chcemy odświeżyć pewien element na stronie bez konieczności jej przeładowania, z pomocą przychodzi AJAX. Dzięki niemu użytkownik nie musi przerywać pracy na stronie – połączenie z serwerem następuje w tle, zaś dane są aktualizowane niezwłocznie po jego zakończeniu.
Bardzo dobrym przykładem zastosowania tej technologii jest Gmail – nie musisz przerywać pisania maila, żeby przeładować stronę i sprawdzić czy w tym czasie coś przyszło – strona sama łączy się z serwerem w tle co jakiś odstęp czasu, dzięki czemu o nowej poczcie zostaniesz poinformowany niezwłocznie bez konieczności przerywania pracy.
Załóżmy, że mamy DIVa i chcemy odświeżać jego wnętrze co sekundę. Poniżej przedstawiam kod JavaScript konieczny do wykonania tego zadania. JavaScript potrafi łączyć się z serwerem w tle dzięki obiektowi XMLHttpRequest.
Poniższy kod wrzucamy do sekcji HEAD naszej strony.
<script language=javascript> // tworzymy zmienna var object = false; // tworzymy obiekt XMLHttpRequest (dla IE jest troche inaczej, stad funkcja warunkowa) if (window.XMLHttpRequest) object = new XMLHttpRequest(); else if (window.ActiveXObject) object = new ActiveXObject("Microsoft.XMLHTTP"); // ponizsza funkcja pobiera dane ze wskazanego zrodla (pliku lub skryptu php) do wskazanego // DIVa poprzez obiekt XMLHttpRequest function getData(dataSource, divID) { // kontynuuje wylacznie gdy obiekt nie jest zajety if (object.readyState==4 || object.readyState==0) { // tworzy zmienna odpowiadajaca konkretnemu obiektowi na stronie var obj = document.getElementById(divID); // czyta z pliku lub wykonuje skrypt object.open("GET", dataSource); // definiuje metode obslugi odpowiedzi serwera object.onreadystatechange = function() { // kontynuuje jesli transmisja zostala zakonczona powodzeniem if (object.readyState == 4 && object.status == 200) obj.innerHTML= object.responseText; } // wysyla zadanie do serwera object.send(null); } } // w ponizszej funkcji wywolujemy funkcje getData z odpowiednimi parametrami // oraz wywolujemy ja sama rekurencyjnie po co okreslony czas (w naszym wypadku 1000 ms) function odswiezaj() { getData('ajax.php','mojDIVIK'); setTimeout("odswiezaj()", 1000); } </script>
Teraz pozostaje nam utworzenie DIVa o nazwie mojDIVIK gdziekolwiek w „ciele” strony oraz wywołać funkcję odswiezaj().
<html> <head> <!-- tutaj powinien sie znalezc powyzszy kod javascript --> </head> <body> <div id="mojDIVIK"> </div> <script language=javascript> odswiezaj(); </script> </body> </html>
Na koniec pozostawiłem utworzenie skryptu ajax.php, który będzie zwracał żądane przez nas dane. Może on łączyć się z bazą danych czy też czytać z pliku. W naszym przypadku będzie zwracał losową liczbę od 1 do 10.
<? srand(time()); $numer = rand(1, 10); echo $numer; ?>
I to już wszystko Nasz div będzie aktualizowany w tle co sekundę losową liczbą z przedziału (1,10).
bardzo się przydało wielkie dzięki!!!
super
szukalem tego dosc dlugo i wreszcie cos co dziala
super wielkie dzięki dziala próbuje modyfikować to do shoutboxa z odświeżaniem
Pod FF wszystko działa idealnie, ale IE nie odświeża ;/ Jaki może być tego powód?
Pod IE7 nie działa !!!
Pod IE nie działa wiele rzeczy, niestety M$ nie raczy trzymać się standardów. Nie znam odpowiedzi i nie mam możliwości sprawdzić, bo na chwilę obecną nie mam dostępu do IE7. Ale ten skrypcik wykorzystywałem wielokrotnie i zawsze wszystko było OK. Jak dorwe jakiegoś compa z Windowsami to sprawdze i dam odpowiedź.
FF & chrome – działa, pod IE7 niestety nie.
A poniższa zmiana też sprawy nie rozwiązuje;
var object = createXmlHttpRequestObject();
function createXmlHttpRequestObject()
{
var object;
try
{
object = new XMLHttpRequest();
}
catch(e)
{
var XmlHttpVersions = new Array(„MSXML2.XMLHTTP.7.0″,
„MSXML2.XMLHTTP.6.0″,
„MSXML2.XMLHTTP.5.0″,
„MSXML2.XMLHTTP.4.0″,
„MSXML2.XMLHTTP.3.0″,
„MSXML2.XMLHTTP”,
„Microsoft.XMLHTTP”);
for (var i=0; i<XmlHttpVersions.length && !object; i++)
{
try
{
object = new ActiveXObject(XmlHttpVersions[i]);
}
catch (e) {}
}
}
if (!object)
displayError(„Błąd podczas tworzenia obiektu XMLHttpRequest.”);
else
return object;
}
Rozwiązanie dla IE; na szybko zamiast GET zrobić POST, albo poczytać o cache IE (fajnie opisane na http://pl.wikipedia.org/wiki/XMLHTTP)
Zdrowia!
mógłby mi ktoś z tym pomóc ????
nie ma sprawy ale w czym jest problem? w zakladce „o mnie” dalem dane kontaktowe, mozna pisac
Przydalo sie , THX
pod IE
zamiast
trzeba wstawić
<!– –>
u mnie działa pod IE
A można zrobić aby przez ten skrypt działały polskie znaki? Bo jak wchodzę na stronę odczytu shouboxa to jest ok, a jak przez ten kod odświeżam to nie działają polskie znaki. Proszę o pomoc
co do mojej poprzedniej wiadomości to widać skrypt usuwający niechciane rzeczy działa wyśmienicie skontaktowałem się z autorem i może za jakiś czas napisze to co mu podałem odnośnie IE albo przerobi skrypt… co do polskich znaków użyj kodowania UTF-8
niestety to wciąż nie działa :/
jak możesz odpisz mi w temacie: http://forum.4programmers.net/viewtopic.php?id=151032 bo nie chcę tu komentarzy spamować
A jesli chce odswiezyc dany element strony TYLKO RAZ np. z opoznieniem 3 sekund po wejsciu na strone.
Jak cos takiego zrobic ?
modyfikujesz funkcje odswiezaj mniej wiecej tak:
function odswiezaj()
{
setTimeout(„getData(‘ajax.php’,'mojDIVIK’)”, 3000);
}
mi coś nie dziala w ogóle nic nie ma na stronie, w ogóle nie mówiąc o odświerzaniu link do pliku http://streetfights.unl.pl/templates/refresh.php
No thx za to przydało się bardzo
Witam. Odświeżania działa. Powiedzmy, że do diva wczytuję stronkę ajax.php – w tym pliku mam skrypt js (animacja tekstu) i on nie działa. Co zrobić aby we wczytywanej stronie działały skrypty js? Proszę o pomoc.
Nie da się. Przenieś ten skrypt do tego samego dokumentu gdzie wywołujesz funkcję getData i wywołaj go po tej funkcji, np:
getData(‘ajax.php’,'div’);
animateText(‘div’);
lub cos w tym stylu.
Dzięki.
Zrobiłem tak:
function anima(divID)
{
(tutaj kod animacji)
}
a następnie wywołuję to tak:
function odswiezaj()
{
getData(‘/rand.php’,'mojDIVIK’);
anima(‘mojDIVIK’);
setTimeout(„odswiezaj()”, 2000);
}
Za pierwszym razem animacja działa i wszystko jest tak jak ma być lecz gdy przychodzi czas odświeżenie to strona odświeża się całą a nie tylko div. Proszę o pomoc i jeszcze raz dzięki za podpowiedź.
Moze sprobuj wywolac funkcje anima tylko raz przy zaladowaniu stronki… Zmiana zawartosci diva nie powinna miec wplywu na jej dzialanie i wszystko powinno smigac… teoretycznie:)
witam, mam z tym problem chciałem zrobić żeby odświeżało mi historię piosenek które było grane na radiu. Skrypt histori mam. Tylko chodzi oto że jak wstawiam zamiast rand(1,10), include(lista.php) to wszystko jest ok oprócz tego że pod tą historią pokazuje się cały czas cyfra 1.
Mi nie działało pod mozillą. Zmieniłam na:
window.setTimeout(„odswiezaj()”, 1000);
i teraz działa
Ponieważ powyższy przykład nie obsługuje poprawnie IE warto użyć dobrodziejstwa jQuerry
Sekcja HEAD (musimy pobrać bibliotekę jQuery z http://jquery.com/):
function odswiez_diva(){
$.post(‘plik_do_zaladowania.php’,{pokaz:’nazwa_diva’},function(odebrane_dane){
$(‘#nazwa_diva’).html(odebrane_dane)
})
setTimeout(„odswiez_diva()”, 1000);
}
w BODY:
i możemy cieszyć się przeładowywaniem DIV’a w FF, Operze, Safari i najważniejsze w IE
Pozdrawiam,
Maciej
A czy jeżeli posiadam stronę opartą na bazie mysql to czy na stronie która jest wczytywana do diva muszę tworzyć nowe połączenie z bazą czy wystarczy, ze połączenie jest na stronie na której znajduje się odświeżany div ?
Na stronie, albo raczej w pliku generującym fragment strony, która jest wczytywana do DIVa, musisz połączyć się z bazą danych.
ok dzięki mam jeszcze jedno pytanie, potrzebuję pomiędzy całą stroną a divem operować zmiennymi. Np mając jakąś zmienną na stronie głównej chciałbym ją wywołać w odświeżanym divie. Czy jest to możliwe? Próbowałem z global ale nie działa.
getData(‘ajax.php?zmienna=wartosc&zmienna2=wartosc2′,’mojDIVIK’);
Dzięki wszystko działa mam jednak pomysł aby podczas ładowania strony do diva pokazywał się preloder…
tak działa pod IE
odswiezaj();
Get zamienic na post
i funkcja tworzaca zmienna object musi wygladac tak:
function getXMLHttpRequest()
{
var request = false;
try {
request = new XMLHttpRequest();
} catch(err1) {
try {
request = new ActiveXObject(‘Msxml2.XMLHTTP’);
} catch(err2) {
try {
request = new ActiveXObject(‘Microsoft.XMLHTTP’);
} catch(err3) {
request = false;
}
}
}
return request;
}
var object;
object = getXMLHttpRequest();
cześć, mógłby mi ktoś wytłumaczyć co zrobić aby ten skrypt zadziałał?
Jeśli komuś nie działa to niech w
„”
zmieni <? na <?php
witam, ja posiadam taki problem z funkcją „odswiezaj”
chodzi o to że moj tak jakby div się nie odświeża, możecie zobaczyć sobie na http://www.dawit.eu/Ajax w Chrome pisze mi „Uncaught ReferenceError: odswiezaj is not defined” Gdyby ktoś tylko mógł mi pomóc, byłbym bardzo wdzięczny – proszę o kontakt mailowy Dawid.Tararuj(małpa)gmail.com
“Hey, thanks for the article post.Much thanks again. Awesome.”
Postawie dobry komentarz. Można sobie modyfikować indywidualnie do potrzeb. Działa 100% można scrypt umieścić w osobnym pliku.
Dzięki Piwo dla Ciebie.
Our little ones interviewed describe the annual „good grief” camp organized from your nonprofit Tragedy Assistance Program for Survivors every