רענון דיב עם AJAX כל חצי דקה

[106FM]

שלום,

לאחר חיפושים רבים בגוגל עם מילות המפתח :"refresh ajax div" ו "ajax refresh time" וכו'.

לא מצאתי את מה שחיפשתי... ולכן אני פותח כאן את האשכול הנ"ל.

אז, יש ברשותי DIV שמתרענן כל 3 דק' לבד, אבל בכדי לראות את הרענון - אתה צריך ללחוץ F5 (רענן). אני מעוניין לעשות כך שלא אצטרך ללחוץ F5 על מנת לרענן, כלומר, כל חצי דקה יהיה רענון אוטומתי אך ורק לDIV הזה בעזרת AJAX. במידה ויש שינוי - ישתנה. במידה ואין שינוי - אין שינוי. אבל כל חצי דקה יהיה רענון של AJAX.

הנה ה-DIV שלי שאני רוצה שיתרענן כל חצי דקה:

<div id="loadPeriodical" class="box periodical"><table border="0" dir="ltr" align="center" width="95%" cellspacing="0" cellpadding="4">
  <tr bgcolor="#0D0D0D"> 
    <td colspan="2" nowrap align="left"> 
      <p><font face="Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"><b>Now:</b></font>
    </td>
	<td nowrap align="Right"> 
      <p><font face="Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"><b>Time</b></font>
    </td>
  </tr>

<? 
  $rc=0;
  PutSongRow($song); 
  $mainsong = $song;
?>
  


<?
 if(count($queue)>0){?>
<tr bgcolor="#666666"><td colspan="7" dir="rtl">
<center><b><font size="2" color="#000000">???:</font></b>

<font size="2" color="003366"><b>
<?
 $i=0;
 while(list($key, $song) = each($queue))
 {
  if(empty($song["artist"])) 
   $song["artist"] = 'Unknown';
  
   if($i>0) echo ", ";
   echo $song["artist"]; 
   if($song["requestid"]!=0)
	{ echo " ~בקשה~"; }
   $i++;
  
 }
?>
</b></font></center></td></tr>
<?}?>



  <tr bgcolor="#0D0D0D"> 
    <td colspan="7" nowrap> 
      <p align="left"><font size="1" face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF">Recently 
        played songs:</font> 
    </td>
  </tr>
  
<? 
  $rc=0;
  while(list($key, $song) = each($history))
    PutSongRow($song); 
?>
</table><br></div>
</div></div>

קרוב לוודאי, שאתם לא מבינים מה הDIV הזה עושה, ולכן אסביר בקצרה, למרות שזה לא כל-כך חשוב ולא המטרה. מטרת הדיב היא להציג את השירים שנוגנו, כלומר ברגע שנוגן עוד שיר, ניתן לראות זאת אך ורק ע"י F5 - ואני רוצה ע"י AJAX. חשוב לציין שה-DIV עובד ופועל כראוי.

ניסיתי גם להכניס את הקוד הזה לפני ה-DIV אך עדיין לא עובד:

	
		<script type="text/javascript">
		function Ajax(){
		var xmlHttp;
			try{	
	xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
			}
			catch (e){
			try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
				}
			catch (e){
			    try{
	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
			catch (e){
				alert("No AJAX!?");
				return false;
				}
			}
		}

		xmlHttp.onreadystatechange=function(){
			if(xmlHttp.readyState==4){
document.getElementByID('loadPeriodical').innerHTML=xmlHttp.responseText;
			setTimeout('Ajax()',4000);
		}
		}

		window.onload=function(){
		setTimeout('Ajax()',4000);
		}
		</script>

איך אני אמור לעשות רפרש לדיב הזה עם AJAX?


תודה מראש,

[Shay Ben Moshe]

אהלן!
דבר ראשון בשביל לעשות את זה תיהיה חייב להפריד את קטע הקוד מהעמוד. במילים אחרות תפריד את כל מה שבתוך הDIV לעמוד PHP אחר. לאחר מכן תוכל להריץ קטע AJAX ולהחליף את תוכן הDIV הנוכחי בתוכן המתעדכן.
קטע הAJAX שהצגת לא נכון. אני ממליץ לך להשתמש בjQuery, הAJAX שם פשוט ביותר.

בהצלחה!

[Shillo]

נכתב במקור על ידי Shay Falador

אהלן!
דבר ראשון בשביל לעשות את זה תיהיה חייב להפריד את קטע הקוד מהעמוד. במילים אחרות תפריד את כל מה שבתוך הDIV לעמוד PHP אחר. לאחר מכן תוכל להריץ קטע AJAX ולהחליף את תוכן הDIV הנוכחי בתוכן המתעדכן.
קטע הAJAX שהצגת לא נכון. אני ממליץ לך להשתמש בjQuery, הAJAX שם פשוט ביותר.

בהצלחה!

להגיד לו להשתמש בJQuery לא יעזור לו.

הצעה שיש לי לתת לך, תתחיל להשתמש בtry וcatch כדי לדבג את הסקריפטים שלך.
למשל, את הפונקציה שכתבת "Ajax" יכלת לעטוף בtry ואז בקטע קוד של הcatch לכתוב alert(exception).

אוקי, בנוגע לשגיאות שיש לך בסקריפט, אני כבר שמתי לב שיש לך שגיאה בתחביר מאחר וחסר לך סוגר מסולסל אחד בסוף ('}').
עוד משהו, כשכתבת את קטע הקוד הבא:

window.onload = function ()
   {
      setTimeout( 'Ajax()', 4000 ) ;
   }

אתה הכללת אותו בתוך הפונקציה Ajax, פונקציה שלמעשה לעולם לא נקראה בסקריפט שלך.
עוד משהו מאוד חשוב, כשיצרת את האובייקט שאמור ליצור את ההתקשרות עם השרת עצמו, אתה שכחת בעצם ליצור את הבקשה להתקשרות, ולשלוח אותה.
כתבתי קוד עם תיקונים וקצת הערות, לא בדקתי ככה שאני לא יודע אם עובד.
אם לא עובד תכתוב פה את הבעיה ואני אנסה לעזור.

function Ajax()
{
   var xmlHttp ;
   try
   {
      xmlHttp = new XMLHttpRequest() ; // Firefox, Opera 8.0+, Safari
   }
   catch ( e )
   {
      try
      {
         xmlHttp = new ActiveXObject( "Msxml2.XMLHTTP" ) ; // Internet Explorer
      }
      catch ( e )
      {
         try
         {
            xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" ) ;
         }
         catch ( e )
         {
            alert( "No AJAX!?" ) ;
            return false ;
         }
      }
   }
   
   // מכינים את הפונקציה שתתבצע ברגע שהבקשה נשלחה
   xmlHttp.onreadystatechange = function ()
   {
      if( 4 == xmlHttp.readyState )
      {
        // ארעה שגיאה בשליחת הבקשה לשרת
        if( 404 == xmlHttp.status )
        {
            throw 'ארעה שגיאה בשליחת בקשה לשרת. קוד השגיאה: '+xmlHttp.status+"\n"+xmlHttp.statusText;
        }
        else
        {
            document.getElementByID( 'loadPeriodical' ).innerHTML = xmlHttp.responseText ;
            setTimeout( 'Ajax()', 4000 ) ;
        }
      }
   }
   
   //-----------------------------------------------
   // בקטע זה אנחנו שולחים בקשה לשרת ומכוונים אותו
   // לדף בשם 'ServerResponse.php' שנמצא באותה תיקייה
   // בה נמצא דף התצוגה של האתר.
   //-----------------------------------------------
   xmlHttp.open( 'GET', 'ServerResponse.php', true ) ;
   xmlHttp.send(null) ;
}


window.onload = function ()
{
    try
    {
        setTimeout( 'Ajax()', 4000 ) ;
    }
    catch( exception )
    {
        alert( exception.toString() ) ;
    }
}

[106FM]

נכתב במקור על ידי Shillo

להגיד לו להשתמש בJQuery לא יעזור לו.

הצעה שיש לי לתת לך, תתחיל להשתמש בtry וcatch כדי לדבג את הסקריפטים שלך.
למשל, את הפונקציה שכתבת "Ajax" יכלת לעטוף בtry ואז בקטע קוד של הcatch לכתוב alert(exception).

אוקי, בנוגע לשגיאות שיש לך בסקריפט, אני כבר שמתי לב שיש לך שגיאה בתחביר מאחר וחסר לך סוגר מסולסל אחד בסוף ('}').
עוד משהו, כשכתבת את קטע הקוד הבא:

window.onload = function ()
   {
      setTimeout( 'Ajax()', 4000 ) ;
   }

אתה הכללת אותו בתוך הפונקציה Ajax, פונקציה שלמעשה לעולם לא נקראה בסקריפט שלך.
עוד משהו מאוד חשוב, כשיצרת את האובייקט שאמור ליצור את ההתקשרות עם השרת עצמו, אתה שכחת בעצם ליצור את הבקשה להתקשרות, ולשלוח אותה.
כתבתי קוד עם תיקונים וקצת הערות, לא בדקתי ככה שאני לא יודע אם עובד.
אם לא עובד תכתוב פה את הבעיה ואני אנסה לעזור.

function Ajax()
{
   var xmlHttp ;
   try
   {
      xmlHttp = new XMLHttpRequest() ; // Firefox, Opera 8.0+, Safari
   }
   catch ( e )
   {
      try
      {
         xmlHttp = new ActiveXObject( "Msxml2.XMLHTTP" ) ; // Internet Explorer
      }
      catch ( e )
      {
         try
         {
            xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" ) ;
         }
         catch ( e )
         {
            alert( "No AJAX!?" ) ;
            return false ;
         }
      }
   }
   
   // מכינים את הפונקציה שתתבצע ברגע שהבקשה נשלחה
   xmlHttp.onreadystatechange = function ()
   {
      if( 4 == xmlHttp.readyState )
      {
        // ארעה שגיאה בשליחת הבקשה לשרת
        if( 404 == xmlHttp.status )
        {
            throw 'ארעה שגיאה בשליחת בקשה לשרת. קוד השגיאה: '+xmlHttp.status+"\n"+xmlHttp.statusText;
        }
        else
        {
            document.getElementByID( 'loadPeriodical' ).innerHTML = xmlHttp.responseText ;
            setTimeout( 'Ajax()', 4000 ) ;
        }
      }
   }
   
   //-----------------------------------------------
   // בקטע זה אנחנו שולחים בקשה לשרת ומכוונים אותו
   // לדף בשם 'ServerResponse.php' שנמצא באותה תיקייה
   // בה נמצא דף התצוגה של האתר.
   //-----------------------------------------------
   xmlHttp.open( 'GET', 'ServerResponse.php', true ) ;
   xmlHttp.send(null) ;
}


window.onload = function ()
{
    try
    {
        setTimeout( 'Ajax()', 4000 ) ;
    }
    catch( exception )
    {
        alert( exception.toString() ) ;
    }
}

ראשית, תודה רבה על התגובה והעזרה.
יש לי שתי שאלות, אשמח אם תוכל לענות עליהם

את הקוד שרשמת עלי לשים לפני הדיב שלי?
ומה אמור להיות ב- ServerResponse.php?

[Shillo]

נכתב במקור על ידי 106FM

ראשית, תודה רבה על התגובה והעזרה.
יש לי שתי שאלות, אשמח אם תוכל לענות עליהם

את הקוד שרשמת עלי לשים לפני הדיב שלי?
ומה אמור להיות ב- ServerResponse.php?

תשים לפני, אחרי, במקרה שלך זה לא משנה, מה גם שפונקציות אפשר לשים איפה שאתה רוצה כל עוד זה בדף.
במקום ServerResponse.php תן שם של דף PHP שנמצא על השרת שלך שתפקידו הוא לקבל את הבקשה שנשלחה מהדף ששלח אותה. כדי שתלך על בטוח, הייתי ממליץ לך להשתמש בכתובת מלאה. לדוגמא, נגיד כתובת האתר שלך היא mydomain.co.il, אזי:
http://www.mydomain.co.il/path/to/page.php
את path/to/page.php תחליף כמובן בדף שמקבל את הבקשה.

[106FM]

נכתב במקור על ידי Shillo

תשים לפני, אחרי, במקרה שלך זה לא משנה, מה גם שפונקציות אפשר לשים איפה שאתה רוצה כל עוד זה בדף.
במקום ServerResponse.php תן שם של דף PHP שנמצא על השרת שלך שתפקידו הוא לקבל את הבקשה שנשלחה מהדף ששלח אותה. כדי שתלך על בטוח, הייתי ממליץ לך להשתמש בכתובת מלאה. לדוגמא, נגיד כתובת האתר שלך היא mydomain.co.il, אזי:
http://www.mydomain.co.il/path/to/page.php
את path/to/page.php תחליף כמובן בדף שמקבל את הבקשה.

מה אמור להיות התוכן של ServerRespone.php?

תקן אותי אם אני טועה, עלי לשים
<script> ובסוף לסגור אותו, נכון?

בכל אופן, ניסיתי את הקוד שלך לפני הדיב ופתחתי קובץ ServerRespone.php, בו לא שמתי כלום.
ברגע שעשיתי את זה, האתר מאבד את עיצובו, ואיך אומרים - מתהפך.

[Shillo]

נכתב במקור על ידי 106FM

מה אמור להיות התוכן של ServerRespone.php?

תקן אותי אם אני טועה, עלי לשים
<script> ובסוף לסגור אותו, נכון?

בכל אופן, ניסיתי את הקוד שלך לפני הדיב ופתחתי קובץ ServerRespone.php, בו לא שמתי כלום.
ברגע שעשיתי את זה, האתר מאבד את עיצובו, ואיך אומרים - מתהפך.

תראה, אם אתה לא מבין שום דבר בתכנות אז אנחנו בבעיה.
תבין, הבקשה שאתה שולח דרך הסקריפט JS זו בקשה עם המתודה GET או POST, ובמקרה שלך בחרנו בGET. השליחה הזו עובדת אותו הדבר כמו שליחה של טופס HTML, אתה שולח בקשה שמשתמשת במתודה GET או POST לדף מסויים בשרת והדף מסויים בשרת הזה אמור להחזיר תשובה.
ככה גם פה.
לכן, הדף ServerResponse.php (השם זה סתם שם, אתה יכול לבחור איזה שם של קובץ קיים שבא לך), אמור להחזיר תשובה לבקשה. אם שלחנו בקשת GET (שליחה של שאילתה מקושרת), אז בקוד הPHP שמחזיר את התשובה, אנחנו נשתמש במערך: $_GET שמכיל את כל הבקשות שנשלחו. אחרת, נשתמש ב$_POST.

עוד פעם, אם אתה לא מתכנת אני לא יודע עד כמה זה עוזר, בכל-מקרה, אם המטרה שלך פה זה רק שיפתרו לך בעיות, אז אין לי כוח להמשיך לכתוב פה.