SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: AJAX question

  1. #1
    SitePoint Addict
    Join Date
    Feb 2006
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    AJAX question

    Hi,

    I have never used AJAX/Javascript systems before and don't really know much about them. Do I understand it correctly that i could use this method to get data from a mysql database without refreshing the whole page? I have a page that currently auto-refreshes every 5 mins to get new entries from the database. Could I replace this with an AJAX based system, and if so could you point me towards a tutorial/help page?

    The page simply displays records from a table (defined by a WHERE statement in the SQL) and prints them out in a reverse ordered ID list if that makes any difference?

    Thanks a lot!

  2. #2
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes.

    Here's the idea:
    HTML Code:
    <script type="text/javascript">
    function Init(){
        try{
            req=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e){
            try{
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(oc){
                req=null;
            }
        }
        if(!req&&typeof XMLHttpRequest!="undefined"){
            req = new XMLHttpRequest();
    	}
    }
    
    function get_table(){
      	Init();
      	if(req!=null){
    	    req.onreadystatechange = getResult;
    	    req.open("get", "page.php?param=value", true);
    	    try {
    	       req.send(null);
    	    } catch (ex) { alert("Error!");}
    	}
            setTimeout("get_table()",1000*60*5);
    }
    
    function getResult(){
      if (req.readyState == 4){
        if (req.status == 200){
          document.getElementById("table").innerHTML=req.responseText;
        }
        else {
            alert("Internal Server Error!");
        }
      }
    }
    
    get_table();
    </script>
    <div id="table">
    <!-- this is where your table appears -->
    </div>
    page.php?param=value is the url of a script displaying the table to be displayed between the <div id="table"> tags.

    Let me know if you have any questions.
    Saul

  3. #3
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also recommend you to google JavaScript tutorials, since a basic understanding of the language is needed. If you prefer books, then check out "JavaScript bible, 5th edition", its excellent.

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should also consider using someone else's Javascript library (which will slightly increase your page load time, but it's worth it) to do the actual Ajax calls so you don't have to actually learn the slightly frustrating cross-browser Ajax calls. I suggest Jquery, but there are lots of choices.

    Dave

  5. #5
    SitePoint Addict
    Join Date
    Feb 2006
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I have tried the above and it didn't work. I will get the book from Amazon but could someone look at this and help me out while it is posted?

    Below is a very cut down version of the page I need to use, where would I put the code to refresh just the table containing the print($row["event"]); stuff?

    Code:
    <?php
    $event_id = $HTTP_GET_VARS['eventid'];
    $server_time = date('Hi');
    ?>
    <HTML>
    <HEAD>
    <TITLE>Page</TITLE>
    </HEAD>
    <BODY>
    
    <table width = "100%">
    <tr>
    <td>This is a value that does not need to refresh<br>
    <table width="100%">
    <tr>
    <td>List values</td>
    </tr>
    <tr>
    <?php
    $sql_event = "SELECT event FROm table WHERE event_id = '$event_id' AND event_server_time <= '$server_time' ORDER BY id DESC";
    $events = mysql_query($sql_event);
    while($row = mysql_fetch_array($events))
    {
    ?><td><?php print($row["event"]); ?></td><?php } ?>
    </tr>
    </table></td>
    </tr>
    </table>
    </body>
    </html>
    Thanks a lot for your help so far

  6. #6
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This script should output only the table and no other html code, i.e. only the <table> tags and everything in between them.

    The rest of the page should be in a separate file along with the JS script I've posted. When called in JS, your script will output the table and will be displayed between the <div id="table"> tags.

    Hope it makes sense.
    Saul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •