Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [AJAX] Preloader, napisałem preloader...
slammer
post
Post #1





Grupa: Zarejestrowani
Postów: 187
Pomógł: 6
Dołączył: 31.08.2005
Skąd: Bielsko-Biała

Ostrzeżenie: (0%)
-----


Postanowiłem napisać prosty preloader w ajax i stworzyłem coś takiego:

plik index.php
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  3. <link rel="stylesheet" href="style.css" type="text/css" />
  4. <title>TITLE</title>
  5. <script type="text/javascript" src="ajax.js"></script>
  6. </head>
  7.  
  8. <form>
  9. First Name:
  10. <input type="text" id="txt1"
  11. onkeyup="ajax('time.php', stateChanged)">
  12. </form>
  13.  
  14. <p>Wynik: <span id="txtHint"></span></p>
  15.  
  16. </body>
  17. </html>


plik ajax.js
  1. var xmlHttp
  2.  
  3. function ajax(plik, nazwa)
  4. {
  5. xmlHttp=GetXmlHttpObject()
  6. if (xmlHttp==null)
  7. {
  8. alert ("Twoja przegladarka nie obsluguje AJAX!");
  9. return;
  10. }
  11.  
  12. xmlHttp.onreadystatechange=nazwa;
  13. xmlHttp.open("GET",plik,true);
  14. xmlHttp.send(null);
  15. }
  16.  
  17. function stateChanged()
  18. {
  19. body=document.getElementsByTagName('body');
  20. x=document.getElementById('wait');
  21. if (xmlHttp.readyState != 4)
  22. {
  23. if(x == null){
  24. wait = document.createElement('div');
  25. wait.id='wait';
  26. wait.align='center';
  27. wait.style.border='solid 1px';
  28. wait.style.height='60px';
  29. wait.style.width='250px';
  30. wait.style.margin='auto';
  31. wait.innerHTML='Proszę czekać...';
  32. body[0].appendChild(wait);
  33. }
  34. }
  35. if (xmlHttp.readyState == 4)
  36. {
  37. document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
  38. body[0].removeChild(x);
  39. }
  40. }
  41.  
  42. function GetXmlHttpObject()
  43. {
  44. var xmlHttp=null;
  45. try
  46. {
  47. xmlHttp=new XMLHttpRequest();
  48. }
  49. catch (e)
  50. {
  51. try
  52. {
  53. xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  54. }
  55. catch (e)
  56. {
  57. xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  58. }
  59. }
  60. return xmlHttp;
  61. }


plik time.php
  1. <?
  2. //cokolwiek wyswietlane na stronie np:
  3. print 'test<br />';
  4. ?>

Jako, że zacząłem poznawać ajaxa 2 dni temu, zastanawiam się czy takie rozwiązanie jest dobre. Nie wiem czy to jest dobre więc nie umieszczam tego w dziale ocen.

Ten post edytował slammer 24.02.2007, 12:07:09
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 15.09.2025 - 07:10