T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
« Manipulacija slik s PHP-jem – cache slik – 304 Not Modified
Apache htaccess preusmeritve »
20th October

Stalno osveževanje del spletne vsebine – ajax jquery.get – javascript setinterval

Osveževanje spletne strani s pomočjo javascript-ajax naveze je danes že vsem dobro poznano. Tudi na T&R splet blogu smo o tem že veliko pisali, sedaj pa si poglejmo kratek primer namenjen začetnikom kako na spletni strani osvežimo le košček vsebine s pomočjo jquery ajax get klica ter javascript setInterval funkcije.

S pomočjo javascript setInterval funkcije dosežemo, da se naša vsebina oz. naši rezultati osvežujejo na določnem interval, v našem primeru osveževanje koščka spletne strani poteka na 15 sekund.

PLAIN TEXT
JAVASCRIPT:
  1. jQuery(document).ready(function(){
  2.    setInterval("fetchResults()", 15000);
  3. });
  4.  
  5. function fetchResults() {
  6.   jQuery.get("fetchResults.php", {}, function(data){
  7.       jQuery('#rightBar').attr('innerHTML', data);
  8.   });
  9. }

Opis delovanja skripte

Ko je spletna stran naložena, kar zaznamo preko jQuery(document).ready dogodka, nastavimo interval, ki bo klical našo funkcijo za osveževanje rezultatov na vsakih 15 sekund. V naši fetchResult funkcijo nato uporabimo jQuery get klic, ki kreira asinhrono povezavo na našo php skripto, ki vrne nove podatke. Dobljene podatke nato prepišemo v naš div, kjer se nahaja stara vsebina. Tako so podatki posodobljeni.

Optimizacija - hitrost

Stalno osveževanje določene spletne vsebine v prehitrem intervalu zna strežnik z visokim prometom kaj kmalu spraviti na kolena. Zato vam priporočamo, da v PHP skripti uporabite keširanje (začasno shranjevanje) rezultatov v primeru, da izvajate potratne operacije. Idealen pristop pa bi bil s ajax push metodo.

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. Javascript – avtomatsko osveževanje strani – refresh page – reload page
  2. jQuery each snippet
  3. Javascript – scrolling – jQuery.scrollTo – jQuery.SerialScroll
  4. jQuery – traversing – dodatki – javascript frameworks
  5. AJAX Gmail indikator – prikaz statusnega okna pri AJAX operacijah
  6. Javascript – fade efekt – jQuery – fadeIn – fadeOut – setTimeout – removeChild
  7. Javascript koledar – izbira datuma – jQuery date picker
  8. Tablesorter – jQuery plugin Tablesorter 2.0 – šumniki – nepravilno sortiranje šumnikov čšž – javascript sortiranje tabel
  9. AJAX na enostaven način
  10. AJAX iskanje datotek, dodajanje v seznam ter predogled le teh (PDF, jpeg)

Roky || Tuesday, October 20th, 2009 ob 4:00 pm || Splet, Splet (Javascript, Ajax) || RSS 2.0 | Dodaj komentar || Trackback


Dodaj komentar