ForumCała strona

Nawigacja

Aktualnie online

Gości online: 35

Użytkowników online: 0

Łącznie użytkowników: 25,400
Najnowszy użytkownik: AlojzyBartek

Logowanie

Nazwa użytkownika

Hasło



Zarejestruj się

Odzyskaj hasło

Shoutbox

Musisz zalogować się, aby móc dodać wiadomość.

Zbigniew@
17.11.2024 11:33:24
Nie ten grzeszy kto pije, ale ten, kto się nie upije.

JazOOn
16.11.2024 20:46:18
tja

Zbigniew@
15.11.2024 18:58:17
Kto pije, ten nie bije.

JazOOn
31.10.2024 20:49:47
Kto pije?

piterus
30.10.2024 19:45:48
I będziemy śpiewać: "Kiedy 20 blisko, przebadaj wszystko, przebadaj wszystko..." Pfft

Pobierz nową wersję
Pobierz podręcznik
Zobacz inne oficjalne Supporty
Statystyki supportu
PHP-Fuson PL na Facebooku

RSS

Polecamy hosting SferaHost.pl

Zobacz temat

 Drukuj temat
Panel losowy artykuł AJAX
kefirek
Ostatnio zacząłem się bawić w AJAX i zrobiłem prosty panel z losowym artykułem. Co 3s jest losowany nowy artykuł. Oczywiście artykuł zmienia się bez przeładowania.

Daje kod może się komuś przyda.
Wklejamy taki kod w panel.
Pobierz kod źródłowy  GeSHi: PHP
  1.  
  2. openside("Losowy artykuł AJAX");
  3. ?>
  4.  
  5. <script type="text/javascript" language="javascript">
  6.  
  7. var http_request = false;
  8. function makeRequest(url) {
  9.  
  10. http_request = false;
  11. if (http_request.overrideMimeType) {
  12. http_request.overrideMimeType('Content-Type: image/png');
  13. }
  14.  
  15. if (window.XMLHttpRequest) { // Mozilla, Safari,...
  16. http_request = new XMLHttpRequest();
  17. if (http_request.overrideMimeType) {
  18. http_request.overrideMimeType('text/xml');
  19. }
  20. } else if (window.ActiveXObject) { // IE
  21. try {
  22. http_request = new ActiveXObject("Msxml2.XMLHTTP");
  23. } catch (e) {
  24. try {
  25. http_request = new ActiveXObject("Microsoft.XMLHTTP");
  26. } catch (e) {}
  27. }
  28. }
  29.  
  30. if (!http_request) {
  31. alert('Poddaję się :( Nie mogę stworzyć instancji obiektu XMLHTTP');
  32. return false;
  33. }
  34. http_request.onreadystatechange = function() { alertContents(http_request); };
  35. http_request.open('GET', url, true);
  36. http_request.send(null);
  37.  
  38. }
  39.  
  40. function alertContents(http_request) {
  41.  
  42. if (http_request.readyState == 4) {
  43. if (http_request.status == 200) {
  44. document.getElementById("test").innerHTML = http_request.responseText;
  45. } else {
  46. alert('Wystąpił problem z zapytaniem.');
  47. }
  48. }
  49.  
  50. }
  51.  
  52. idInterwalu = setInterval("makeRequest('../../art.php')", 3000);
  53.  
  54. </script>
  55. <?php
  56. echo "<div id=\"test\" align=\"center\">";
  57. $wynik = dbquery(
  58. "SELECT ta.article_id, ta.article_subject, tac.article_cat_id, tac.article_cat_access FROM ".DB_ARTICLES." ta
  59. INNER JOIN ".DB_ARTICLE_CATS." tac ON ta.article_cat=tac.article_cat_id
  60. ".(iSUPERADMIN ? "" : "WHERE ".groupaccess('article_cat_access'))." AND article_draft='0' ORDER BY RAND() LIMIT 1"
  61. );
  62. if(dbrows($wynik) > 0)
  63. {
  64. $r = dbarray($wynik);
  65. $itemsubject = trimlink($r&#91;'article_subject'&#93;, 23);
  66. echo "<a href='".BASEDIR."articles.php?article_id=".$r&#91;'article_id'&#93;."' title='".$r&#91;'article_subject'&#93;."' class='side'>$itemsubject</a><br />\n";
  67. }else {echo "Brak artykułów."; }
  68. echo "</div>";
  69. closeside();
  70.  
Zinterpretowano w sekund: 0.022, wykorzystano GeSHi 1.0.8.10


I na koniec tworzymy plik art.php Kod pliku to
Pobierz kod źródłowy  GeSHi: PHP
  1.  
  2. <?php
  3. require_once "maincore.php";
  4. $wynik = dbquery(
  5. "SELECT ta.article_id, ta.article_subject, tac.article_cat_id, tac.article_cat_access FROM ".DB_ARTICLES." ta
  6. INNER JOIN ".DB_ARTICLE_CATS." tac ON ta.article_cat=tac.article_cat_id
  7. ".(iSUPERADMIN ? "" : "WHERE ".groupaccess('article_cat_access'))." AND article_draft='0' ORDER BY RAND() LIMIT 1"
  8. );
  9. if(dbrows($wynik) > 0)
  10. {
  11. $r = dbarray($wynik);
  12. $itemsubject = trimlink($r&#91;'article_subject'&#93;, 23);
  13. echo "<a href='".BASEDIR."articles.php?article_id=".$r&#91;'article_id'&#93;."' title='".$r&#91;'article_subject'&#93;."' class='side'>$itemsubject</a><br />\n";
  14. }else {echo "Brak artykułów."; }
  15. ?>
  16.  
Zinterpretowano w sekund: 0.024, wykorzystano GeSHi 1.0.8.10

i umieszczamy w głównym katalogu.
Testowane na IE 7 i Mozilla Firefox i wszystko działa i zmienia się jak należy
 
Wścibski Gość
Dodany dnia 24.11.2024 21:03:59
Pan Kontekstualny

Postów: n^x
Data rejestracji: Zawsze

Polecamy hosting SferaHost.pl
IP: localhost  
ICEK
No nie powiedziałbym, że wszystko jest ok, bo jak sprawdzałem przed chwila jak to działa, to wyskakiwał komunikat ze strony, że cyt.: "Wyst&#177;pił problem z zapytaniem." Nie wiem czy to tylko u mnie tak czy nie, ale pisze com zaobserwował Pfft
Edytowane przez ICEK dnia 30.11.2008 18:15:24
 
www.modlinski.net
bartek124
I za każdym razem zapytanie? Nie lepiej od razu wyciągnąć te parę artykułów i wsadzić w rotator? Wink.

PS. Masz jakieś dobre poradniki o AJAX? albo ogólnie, JavaScript?
userbar_bartek124_net.png mw.gif Nie pomagam na komunikatorach oraz PW!
 
www.bartek124.net
kefirek
ICEK napisał/a:
No nie powiedziałbym, że wszystko jest ok, bo jak sprawdzałem przed chwila jak to działa, to wyskakiwał komunikat ze strony, że cyt.: "Wyst&#177;pił problem z zapytaniem." Nie wiem czy to tylko u mnie tak czy nie, ale pisze com zaobserwował :P


Zrobiłem tak i teraz nie powinno być błędu
Taki kod wklejamy w panel

Pobierz kod źródłowy  GeSHi: Javascript
  1.  
  2. openside("name");
  3. ?>
  4.  
  5. <script type="text/javascript" language="javascript">
  6.  
  7. // przechowuje obiekt XMLHttpRequest
  8. var xmlHttp = createXmlHttpRequestObject();
  9. // przechowuje adres i parametry zdalnego serwera
  10. var serverAddress = "../../art.php";
  11.  
  12. // tworzy obiekt XMLHttpRequest
  13. function createXmlHttpRequestObject()
  14. {
  15. // przechowa odwoĹ_anie do obiektu XMLHttpRequest
  16. var xmlHttp;
  17. // powinno dziaĹ_aÄ_ dla wszystkich przeglÄ_darek z wyjÄ_tkiem IE6 i starszych
  18. try
  19. {
  20. // prĂłbuje stworzyÄ_ obiekt XMLHttpRequest
  21. xmlHttp = new XMLHttpRequest();
  22. }
  23. catch(e)
  24. {
  25.  
  26. // zakĹ_adajÄ_c, Ĺźe IE6 lub starsza
  27. var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
  28. "MSXML2.XMLHTTP.5.0",
  29. "MSXML2.XMLHTTP.4.0",
  30. "MSXML2.XMLHTTP.3.0",
  31. "MSXML2.XMLHTTP",
  32. "Microsoft.XMLHTTP");
  33. // sprawdza kaĹźdy prog id aĹź ktĂłryĹ_ zadziaĹ_a
  34. for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
  35. {
  36. try
  37. {
  38. // prĂłbuje stworzyÄ_ obiekt XMLHttpRequest
  39. xmlHttp = new ActiveXObject(XmlHttpVersions&#91;i&#93;);
  40. }
  41. catch (e) {}
  42. }
  43. }
  44. // zwraca stworzony obiekt albo wyĹ_wietla komunikat o bĹ_Ä_dzie
  45. if (!xmlHttp)
  46. alert("BĹ_Ä_d podczas tworzenia obiektu XMLHttpRequest.");
  47. else
  48. return xmlHttp;
  49. }
  50.  
  51. // asynchroniczne wywoĹ_anie serwera
  52. function process()
  53. {
  54. // kontynuuje, jeĹ_li xmlHttp nie jest pusty
  55. if (xmlHttp)
  56. {
  57. // prĂłbuje poĹ_Ä_czyÄ_ siÄ_ z serwerem
  58. try
  59. {
  60. // prosi o poĹ_Ä_czenie ze zdalnym serwerem przeglÄ_darki oparte o MozillÄ_
  61. try
  62. {
  63. // generuje bĹ_Ä_d (ktĂłry jest ignorowany) jeĹ_li przeglÄ_darka nie jest MozillÄ_
  64. netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
  65. }
  66. catch(e) {} // ignoruje bĹ_Ä_d
  67. // rozpoczyna dostÄ_p do serwera
  68. xmlHttp.open("GET", serverAddress, true);
  69. xmlHttp.onreadystatechange = handleRequestStateChange;
  70. xmlHttp.send(null);
  71. }
  72. // w razie niepowodzenia wyĹ_wietla komunikat o bĹ_Ä_dzie
  73. catch (e)
  74. {
  75. alert("Nie mogÄ_ nawiÄ_zaÄ_ poĹ_Ä_czenia z sewerem:\n" + e.toString());
  76. }
  77. }
  78. }
  79.  
  80. // funkcja wywoĹ_ywana przy zmianie statusu ĹźÄ_dania HTTP
  81. function handleRequestStateChange()
  82. {
  83. // kiedy readyState ma wartoĹ_Ä_ 4, jesteĹ_my gotowi do odebrania odpowiedzi z serwera
  84. if (xmlHttp.readyState == 4)
  85. {
  86.  
  87. // kontynuuje tylko, gdy status HTTP ma wartoĹ_Ä_ "OK"
  88. if (xmlHttp.status == 200)
  89. {
  90. try
  91. {
  92. // przetwarza wiadomoĹ_Ä_ z serwera
  93. handleServerResponse();
  94. }
  95. catch(e)
  96. {
  97. // komunikat o bĹ_Ä_dzie
  98. alert("WystÄ_piĹ_ bĹ_Ä_d podczas odczytu odpowiedzi: " + e.toString());
  99. }
  100. }
  101. else
  102. {
  103. // wyĹ_wietla komunikat o statusie
  104. alert("PojawiĹ_ siÄ_ problem podczas odbierania danych:\n" +
  105. xmlHttp.statusText);
  106. }
  107. }
  108. }
  109.  
  110. // obsĹ_uguje odpowiedĹş otrzymanÄ_ z serwera
  111. function handleServerResponse()
  112. {
  113. // odbiera odpowiedĹş serwera
  114. var response = xmlHttp.responseText;
  115. // pobiera odwoĹ_anie do elementu <div> na stronie
  116. myDiv = document.getElementById('myDivElement');
  117. // wyĹ_wietla rezultat jako HTML
  118. myDiv.innerHTML = "Losowy artykul "
  119. + response + "<br/>";
  120. }
  121.  
  122. idInterwalu = setInterval("process()", 3000);
  123.  
  124. </script>
  125. <div id="myDivElement">
  126. </div>
  127.  
  128.  
  129. <?php
  130. closeside();
  131.  
Zinterpretowano w sekund: 0.006, wykorzystano GeSHi 1.0.8.10


I tworzymy plik art.php i umieszczamy w głównym katalogu

PS. Masz jakieś dobre poradniki o AJAX? albo ogólnie, JavaScript?


Mam ksiązki i przykłady z książek. Na hdd mam w PDF i doc ksiązki AJAX i JAVASCRIPT.

I za każdym razem zapytanie?


Na razie tyle tylko wymyśliłem ale można zrobić tak że pobrać klika losowych artykułów umieścić je w tablicy javascript i potem za pomocą setInterval wyświetlać co jakiś czas artykuł z tablicy. I co jakiś czas ładowało by się nowe dane do tablicy
Edytowane przez kefirek dnia 30.11.2008 21:03:04
 
Przejdź do forum:
Created by Arox Copyright (C) 2004
Copyright (C) 2004 - 2018 Ekipa PHP-Fusion.pl