Keskustelu: Nettisivujen teko: Ajaxilla päivitystä sivuun

Moi.

Alotin tänään tekemään chattia php:lla, mutta tarvisin apua viestien päivittämiseen.

Tarvisi siis saada includettua x.php y.php:hen vaikka 5 sekunnin välein tai jotakin vastaava.

Itsellä ei ole siis lainkaan kokemusta ajaxista, enkä löytänyt googlettamalla juuri mitään vastaavaa pätkää :(

Tälläisen olen saanut aikaan:
http://students.turkuai.fi/users/ollaason/chat/chat.php

Muistahan nyt, että PHP suoritetaan palvelimella, minkä jälkeen käyttäjälle lähetetään sen tulostama HTML-sivu (tai mitä skripti sitten tuottaakin). Toisin sanoen PHP on vain tapa säädellä, mitä dataa käyttäjälle lähetetään, ja sen avulla ei voi muokata sivua enää lähetyksen jälkeen.

Mainitsemasi AJAX mahdollistaa tällaisen järjestelmän:

1. Tulostetaan käyttäjälle sivu, joka ei sisällä vielä viestejä vaan pelkästään tyhjän alueen niitä varten ja tarvittavan JS-koodin niiden hakemista ja näyttämistä varten. (chat.php tai vaikka chat.html)
2. Tulostettu sivu voi setTimeout- tai setInterval-funktion avulla säädellä, milloin uudet viestit haetaan.
3. Palvelin saa AJAX-pyynnön, joka ei siis sen kannalta poikkea millään tavalla normaalista sivunlatauksesta. Palvelin tulostaa uuden "sivun", joka ei kuitenkaan ole kokonainen sivu vaan vain viestidataa sisältävä pätkä.
4. Selain vastaanottaa datan ja liittää sen JS:n avulla oikeaan paikkaan. Data voi olla vaikkapa valmista HTML-koodia, joka liitetään sivulla sijaitsevan objektin sisään suoraan, document.getElementById("viestit").innerHTML = data. Toisaalta joustavampi vaihtoehto on palauttaa viestit vaikkapa tekstinä, jolloin ne voi muotoilla JS:n avulla ja esimerkiksi viestimuisti ja skrollaus on helpompi toteuttaa.

On uskomatonta, miten jopa alaa opiskelleet ihmiset eivät hahmota selainskriptien (PHP:n) ja asiakasohjelmalle tuotetun sisällön (HTML:n ja JS:n) välistä rajaa. Älä sorru samaan vaan tee ero itsellesi selväksi.

AJAXista kerrotaan varsin riittävästi Ohjelmointiputkan AJAX-oppaassa, ja englanninkielisen Wikipedian XMLHttpRequest-artikkeli täydentää muutamaa IE-riippuvaista kohtaa.

Kyllä minä tiedän, että php suoritetaan palvelimella ja js selaimessa.

Tolla x.php ja y.php -jutulla yritin vain selittää mitä käytänössä haluasin tehdä.

Varmaan tuosta "includettamisesta"

Jos et jaksa opiskella ajaxia, niin nopeiten sellaiseen pääsee käsiksi valmiilla js-kirjastoilla (jQuery, Prototype, Mootools yms. yms.), joilla ajax-toimintojen teko vie pari hassua riviä (tosin kirjastoissa on jokunen rivi ylimääräistä muihin tarkoituksiin) ja otettu huomioon eri selaimet.

Mootools 1.11 esimerkki:
http://demos111.mootools.net/Ajax_Timed

Sain yhden esimerkki koodin modattua tähän muutaman tuton avulla :) IE:llä ei toimi, mutta se ei ole suuri menetys :D

http://students.turkuai.fi/users/ollaason/chat/chat.php