How to renew information from MySql database without page refresh? (using jQuery/AJAX)

I guess it is sort of simple question, but I'm not the AJAX guy, tried it, but I still don't understand it )))

Here is the situation:

1) I get one random开发者_如何学JAVA url from database

$sql = ("SELECT url FROM url_table ORDER BY RAND() LIMIT 1");

       while($row = mysql_fetch_array($sql)){

             $url = $row["url"];

    }

2) Than I display website that has url = $url in iframe

<iframe src="<?php echo "$url"; ?>"></iframe>

3) Then I have <button id="Next url"> which when clicked refreshes the website, so new random url is selected from database and displayed in <iframe>

What I want to do is same process, but without page refresh. Ideally process should go like this:

User clicks the "Next Button" >> New random $url get's selected from database >> after that new url is echoed in iframe (<iframe src="<?php echo $url?>") >> iframe shows new website.

All of that without page refresh (using AJAX and jQuery if possible).And if possible could you please suggest how to show loading.gif image in iframe while information is getting renewed and loaded

Thank You )))

First, make a page that only spits out the iframe (no other HTML, just the 1 tag). Let's assume this page is at www.yourwebsite.com/random_iframe.php

Next, add the JQuery JS to your main page. On the main page, wrap the iframe in a div with an id, like:

<div id="frm"><iframe src="<?php echo "$url"; ?>"></iframe></div>

Then update the button

<button id="Next url" onclick="show_next();return false;">

Finally, add the JS

function show_next()
{
  $('#frm').load('random_iframe.php');
}

That JQuery code above select the ID 'frm' and replaces its contents with whatever is returned from the page 'random_iframe.php'.