Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX] Preloader
Forum PHP.pl > Forum > XML, AJAX > AJAX
slammer
24.02.2007, 12:06:46
Postanowiłem napisać prosty preloader w ajax i stworzyłem coś takiego:

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


plik ajax.js
[HTML] pobierz, plaintext 
  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. }
[HTML] pobierz, plaintext


plik time.php
[PHP] pobierz, plaintext 
  1. <?
  2. //cokolwiek wyswietlane na stronie np:
  3. print 'test<br />';
  4. ?>
[PHP] pobierz, plaintext

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.
jackweb
14.03.2007, 17:12:38
Napisałeś 
[HTML] pobierz, plaintext 
  1. body = document.getElementsByTagName('body')
[HTML] pobierz, plaintext
, nie wystarczy document.body? ;-)
Co do sposobu - też tak robiłem, sprawdzałem czy readyState jest 4 czy inne i wyświetlałem tekst "ładuję" lub coś w tym stylu. Nawet dobry sposób, a odnośnie wstawiania tekstu do tagu to ja robię document.createTextNode i potem appendChild wkładam do diva albo czegoś, a nie innerHTML, ale nie wiem czym dokładnie różnią się te metody.
skowron-line
14.03.2007, 21:42:46
Cytat(jackweb @ 14.03.2007, 17:12:38 ) *
ja robię document.createTextNode i potem appendChild wkładam do diva albo czegoś, a nie innerHTML, ale nie wiem czym dokładnie różnią się te metody.


to moze poczytaj a nie krytykujesz. bo to sa 2 rozne rzeczy bo innerHTML wkladasz tekst do diva a createm tworzysz nowy element a to niemala roznica
jackweb
15.03.2007, 16:52:15 
[HTML] pobierz, plaintext 
  1. divElement.innerHTML='miau'
[HTML] pobierz, plaintext

a
[HTML] pobierz, plaintext 
  1. textNode = document.createTextNode('miau')
  2. div.appendChild(textNode)
[HTML] pobierz, plaintext

Czym to się różni? Tu napisałem tekst i tu napisałem.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.