הוסטס - פורום אחסון האתרים הגדול בישראל - רענון דיב עם AJAX כל חצי דקה

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - רענון דיב עם AJAX כל חצי דקה (https://hosts.co.il/forums/showthread.php?t=78848)

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

שלום,

לאחר חיפושים רבים בגוגל עם מילות המפתח :"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?

תודה מראש,

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

בהצלחה!

ציטוט:

נכתב במקור על ידי Shay Falador (פרסם 741657)

להגיד לו להשתמש ב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() ) ;

    }

}

ציטוט:

נכתב במקור על ידי Shillo (פרסם 741812)

קוד:

window.onload = function ()

   {

      setTimeout( 'Ajax()', 4000 ) ;

   }

קוד:

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?

ציטוט:

נכתב במקור על ידי 106FM (פרסם 741827)

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

ציטוט:

נכתב במקור על ידי Shillo (פרסם 741858)

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

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

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

ציטוט:

נכתב במקור על ידי 106FM (פרסם 741859)

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

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