Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Prosty tutorial AJAX
Forum PHP.pl > Forum > XML, AJAX > AJAX
bobens_83
21.12.2008, 05:15:05
Witam. Jestem laikiem w sprawach AJAX oraz JavaScript, chcialbym prosic Was o pomoc z prostym tutorialem. Ma on na celu wyswietlanie "podpowiedzi" dla pola html-input.



tindex.html
[HTML] pobierz, plaintext 
  1. <script>
  2. function hello() {
  3. 	document.write('Hello!');
  4. }
  5.  
  6.  
  7. function GetXmlHttpObject() {
  8. 	var xmlHttp=null;
  9. 	try  {
  10. 		// Firefox, Opera 8.0+, Safari
  11. 		xmlHttp=new XMLHttpRequest();
  12. 	} catch (e) {
  13. 		// Internet Explorer
  14. 		try	{
  15. 			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  16. 		} catch (e){
  17. 	    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  18. 		}
  19. 	}	
  20. 	return xmlHttp;
  21. }
  22.  
  23. function stateChanged() { 
  24. 	if (xmlHttp.readyState==4) { 
  25. 		document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
  26.  
  27. 	}
  28. }
  29.  
  30. function showHint(str) {
  31. 	// document.write(str);
  32.  
  33. 	if (str.length==0)  { 
  34. 		document.getElementById("txtHint").innerHTML="<H1>---</H1>";
  35. 		return;
  36. 	}
  37.  
  38. 	xmlHttp=GetXmlHttpObject();
  39. 	if ( xmlHttp==null )	{
  40. 		alert ("Your browser does not support AJAX!");
  41. 		return;
  42. 	} 
  43.  
  44. 	var url="tgethint.php";
  45. 	url = url + "?q=" + str;
  46. 	url = url + "&sid=" + Math.random();
  47. 	xmlHttp.onreadystatechange = stateChanged;  <== questionmark.gif
  48.  xmlHttp.open( "GET", url, true );
  49. 	xmlHttp.send( null );
  50.  
  51. }
  52. </SCRIPT>
  53.  
  54.  
  55.  
  56. <html>
  57. <form> 
  58. First Name:
  59. <input type="text" id="txt1"
  60. onkeyup="showHint(this.value)">
  61. </form>
  62.  
  63. <p>Suggestions: <span id="txtHint"></span></p> 
  64. <p>Result: <span id="resp"></span></p> 
  65. </html>
[HTML] pobierz, plaintext








tgethint.php
[PHP] pobierz, plaintext 
  1. <?php
  2. header("Cache-Control: no-cache, must-revalidate");
  3.  // Date in the past
  4. header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
  5.  
  6. // Fill up array with names
  7. $a[]="Anna"; $a[]="Brittany"; $a[]="Cinderella"; $a[]="Diana"; $a[]="Eva";
  8. $a[]="Fiona"; $a[]="Gunda"; $a[]="Hege"; $a[]="Inga"; $a[]="Johanna"; $a[]="Kitty";
  9. $a[]="Linda"; $a[]="Nina"; $a[]="Ophelia"; $a[]="Petunia"; $a[]="Amanda"; $a[]="Raquel";
  10. $a[]="Cindy"; $a[]="Doris"; $a[]="Eve"; $a[]="Evita"; $a[]="Sunniva"; $a[]="Tove";
  11. $a[]="Unni"; $a[]="Violet"; $a[]="Liza"; $a[]="Elizabeth"; $a[]="Ellen"; $a[]="Wenche";
  12. $a[]="Vicky";
  13.  
  14. //get the q parameter from URL
  15. $q=$_GET["q"];
  16.  
  17. //lookup all hints from array if length of q>0
  18. if (strlen($q) > 0) {
  19.   $hint="";
  20.   for($i=0; $i<count($a); $i++)  {
  21.     if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))     {
  22.         if ($hint=="") {
  23.             $hint=$a[$i];
  24.         } else {
  25.             $hint=$hint." , ".$a[$i];
  26.         }
  27.     }
  28.   }
  29. }
  30.  
  31. // Set output to "no suggestion" if no hint were found
  32. // or to the correct values
  33. if ($hint == "") {
  34.     $response="no suggestion";
  35. } else {
  36.     $response=$hint;
  37. }
  38.  
  39. //output the response
  40. echo $response;
  41. ?>
[PHP] pobierz, plaintext



Moglibyscie mi wyjasnic ta linijke kodu:
xmlHttp.onreadystatechange = stateChanged;

czemu wywolanie funkcji stateChanged jest bez nawiasow a nie stateChanged() ? Gdy dodam nawiasy skrypt nie dziala. Co ma na celu takie wywolanie funkcji?










... czyzby chodzilo o zdarzenie JavaScript?
Bede wdzieczny za odpowiedz na moze banalne pytanie. Z gory dziekuje i pozdrawiam.
flashdev
21.12.2008, 07:12:54
Ta linijak, o którą pytasz to nie jest wywołanie funkcji. Wywołanie jest wtedy gdy za nazwą pojawią się nawiasy.

To jest nazwa funkcji, czyli referencja do niej. Mozesz w ten sposób przekazać do innej funkcji referencje do tej funkcij, dzięki temu tamata funkcja będzia wiedziała co uruchomić np. gdy zajdzie taka potrzeba.
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.